How to setup Vim for Svelte development
Tags: vim, svelte, productivity, beginners
Published: 2020-12-17 08:03:57

---
title: How to setup Vim for Svelte development
published: true
date: 2020-12-10 00:00:00 UTC
tags: vim, svelte, productivity, beginners
canonical_url: https://codechips.me/vim-setup-for-svelte-development/
---

I like Vim. I like its simplicity, its ugliness. There is something appealing about its GUI constraints too.

Let's be honest. Trend sensitivity in tech is a big problem. Developers are jumping from editor to editor whenever something new, hot and trendy comes out. Always searching for the Holy Grail. Sublime, Atom, VSCode. What comes next?

Vim is a very old editor. It's 25 years old. That's ancient in the tech world. What can possibly justify this piece of software's existence? Something must be good if it still lives, right? What are the benefits?

One of Vim's powers is its simplicity and extensibility. It's a very extensible editor. It's also scriptable. It has macros and tons of other useful features. It's small, doesn't hog your CPU and make your computer fans go crazy. It often comes prepackaged with almost every Unix-like operating system.

It's also a powerful editor for Javascript, TypesScript and Svelte development.

![Vim with Svelte and TypeScript](https://res.cloudinary.com/codechips/image/upload/v1607621821/posts/vim-svelte-typescript_xbx7si.png)

## Neovim

Neovim is the modern fork of Vim. Its goal is to clean and extend Vim with modern features. Personally, I don't use Neovim. I tried it, but I can't honestly tell what makes it better than the original Vim. The gains are not obvious to me. I am sticking to orginal Vim for now, currently version 8.2.

## Ever Heard of Emacs?

You might say _"But what about Emacs?"_ I tried Emacs too for a while after getting inspired from watching [Emacs Rocks](http://emacsrocks.com/) videos. Tried only to realize that I was spending most of my working time configuring Emacs instead of doing the actual work. Also, I already have an operating system, thank you.

Oh, and you know, all those people who just **have to** crack a joke about exiting Vim, why don't you ask them to try and exit Emacs next time? Look who is laughing now!

## Side note: Vim + Tmux = Power

I always use Tmux and Vim together. What it [Tmux](https://github.com/tmux/tmux/wiki)? I would describe it as a tiling window manager for the terminal. You have to tweak it a bit to you liking, but once you master it, windows will start flying.

This is out of scope for the article. I just wanted to mention it.

## Svelte Syntax Highlighting

First things first, we have to configure Vim syntax highlighting for Svelte, Javascript and TypeScript.

For Svelte, [vim-svelte](https://github.com/evanleck/vim-svelte) is the plugin to use. It provides indentation and syntax highlighting for Svelte components. There is also [vim-svelte-plugin](https://github.com/leafOfTree/vim-svelte-plugin) that does the same thing.

For Javascript language highlighting, you have a few different options. The most popular seem to be [vim-javascript](https://github.com/pangloss/vim-javascript) and this is what I use.

There is also [vim-js](https://github.com/yuezk/vim-js) and [jats](https://github.com/HerringtonDarkholme/yats.vim). If you are feeling adventurous check out [vim-polyglot](https://github.com/sheerun/vim-polyglot), a plugin with more language syntax hightlights that you probably will ever need.

When it comes to TypeScript, I settled on [yats.vim](https://github.com/HerringtonDarkholme/yats.vim). I find it the best, but [typescript-vim](https://github.com/leafgarland/typescript-vim) is another good option.

I am using [vim-plug](https://github.com/junegunn/vim-plug) as my Vim plugin manager and if you do too, this is how to add them to Vim config file.

```text
Plug 'evanleck/vim-svelte'
Plug 'pangloss/vim-javascript'
Plug 'HerringtonDarkholme/yats.vim'
```

Syntax highlighting is a nice to have, but autocomplete is essential for a good coding session. Let's tackle that next.

## Svelte Autocomplete with Coc.nvim - Conquer of Completion

Honestly, how did I write code in Vim before this extension existed? Apparently I did, but I bet it was painful.

[Coc.nvim](https://github.com/neoclide/coc.nvim) is a must-have if you are a Vim user. It's an _"Intellisense engine for Vim8 & Neovim, full language server protocol support as VSCode"_ according to their website.

What does it mean? It means it supports the same language protocol standard as VScode, which in turn means you can easily implement an autocompletion for a language if that language has a language server. Crystal clear, right?

Here is Svelte's [language server](https://github.com/sveltejs/language-tools) for example.

Installing Coc.nvim is straight forward. Add the line below to your `.vimrc` in the right place and run `:PlugInstall`.

```text
Plug 'neoclide/coc.nvim', {'branch': 'release'}
```

Coc.nvim has many extensions and we will install one for Svelte next, along with a few others we will need too.

## coc-svelte

If you are coding Svelte in Vim [coc-svelte](https://github.com/codechips/coc-svelte) is a must. Unfortunately, the original extension's Svelte dependencies are lagging behind, so I keep my own fork of it where I try to keep upstream dependencies in sync.

Add it to your `.vimrc` with the line below.

```text
Plug 'codechips/coc-svelte', {'do': 'npm install'}
```

Beside Svelte extension we also need to install TypeScript Coc extension. It will help us with autocompletion for TypeScript and JavaScript. Install it in Vim by running `:CocInstall coc-tsserver` command.

Coc.nvim autoupdates dependencies in the background, but you can always update them manually by running `:CocUpdate` command.

## Setting up svelte.config.js

If you are using TypeScript, SASS or PostCSS in your Svelte components you have to create a `svelte.config.js` file in the root of your project. That file is needed by _coc.nvim_ in order to interpret those parts of the Svelte files correctly. Read my TypeScript and Svelte article on how to do that - [How to use Typescript with Svelte](/how-to-use-typescript-with-svelte/#bonus:-svelte-editor-integration).

## Formatting Files with Prettier

We also want our files to look nice and therefore we need to format them. There is a [coc-prettier](https://github.com/neoclide/coc-prettier) extension that does that, but for some reason it breaks Svelte files for me instead. Sometimes it doubles the lines at the end of the file. For that reason I decided to go with [vim-prettier](https://github.com/prettier/vim-prettier) extension instead.

For Prettier extension to work properly it needs to find a `prettier` CLI and Prettier configuration. There are multiple ways of configuring and setting it up, but I always do it locally for every of my projects. It's the easiest.

```text
$ npm add -D prettier prettier-plugin-svelte
```

You also need to add Prettier vim plugin to your Vim config and tweak some of its settings.

```text
Plug 'prettier/vim-prettier', { 'do': 'npm install' }

" Prettier Settings
let g:prettier#quickfix_enabled = 0
let g:prettier#autoformat_require_pragma = 0
au BufWritePre *.css,*.svelte,*.pcss,*.html,*.ts,*.js,*.json PrettierAsync
```

One drawback of Prettier is that you have to install Prettier and prettier Svelte plugin in every Svelte project. It might be possible to use a global Prettier config, because it will search for Prettier configs up the tree.

However, I strongly advice against doing it, because you might want to share same config with your team.

My prettier config usually looks something like this.

```js
module.exports = {
  arrowParens: 'avoid',
  printWidth: 90,
  singleQuote: true,
  svelteBracketNewLine: true,
  svelteStrictMode: false,
  trailingComma: 'none',
  plugins: ['prettier-plugin-svelte'],
};
```

Prettier uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig). That means you can use any name and format it [supports](https://prettier.io/docs/en/configuration.html).

## Configuring Coc.nvim

If you need to configure Coc.nvim and its extentions you can open the config file directly in Vim by running `:CocConfig` command. You can also edit the `coc-settings.json` file directly. You will find it in your `~/.vim` folder or `~/.config/nvim` if you are using Neovim.

Here is what mine looks like.

```json
{
  "diagnostic.messageTarget": "echo",
  "signature.target": "echo",
  "coc.preferences.hoverTarget": "echo",
  "javascript.suggestionActions.enabled": true,
  "typescript.suggestionActions.enabled": true,
  "prettier.printWidth": 120,
  "prettier.singleQuote": true
}
```

All those "echo" values force Coc to display diagnostic messages in Vim's command line instead of a popup. I don't like distracting popups.

These are Coc.nvim settings in my `.vimrc`.

```text
" COC
let g:coc_node_path = '$HOME/.nvm/versions/node/v12.16.3/bin/node'

nmap <leader>rn <Plug>(coc-rename)
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)

set updatetime=300
set shortmess+=c " don't give |ins-completion-menu| messages.

" Use K to show documentation in preview window
nnoremap <silent> K :call <SID>show_documentation()<CR>

function! s:show_documentation()
  if (index(['vim','help'], &filetype) >= 0)
    execute 'h '.expand('<cword>')
  else
    call CocAction('doHover')
  endif
endfunction
```

Maybe you can get some inspiration from reading them.

## A Few More Tips

It's not sure that Vim will recognize that your Svelte file consists of different sections and languages (JavaScript, CSS) and might comment them out using HTML comments when you try to comment them out.

It happened to me, and if it happens to you, here is how to solve it.

Install the [context_filetype](https://github.com/Shougo/context_filetype.vim) Vim plugin. It will help us set the filetype based on the file section.

```text
Plug 'Shougo/context_filetype.vim'
```

Add the following code to your Vim config.

```text
if !exists('g:context_filetype#same_filetypes')
  let g:context_filetype#filetypes = {}
endif

let g:context_filetype#filetypes.svelte =
\ [
\   {'filetype' : 'javascript', 'start' : '&lt;script&gt;', 'end' : '&lt;/script&gt;'},
\   {
\     'filetype': 'typescript',
\     'start': '&lt;script\%( [^>]*\)\? \%(ts\|lang="\%(ts\|typescript\)"\)\%( [^>]*\)\?>',
\     'end': '</script>',
\   },
\   {'filetype' : 'css', 'start' : '&lt;style \?.*>', 'end' : '&lt;/style&gt;'},
\ ]

let g:ft = ''
```

Now your comments should behave correctly.

I am using [NERDCommenter](https://github.com/preservim/nerdcommenter), a Vim commenting plugin with the best punchline - _"Comment functions so powerful - no comment necessary."_

For it to work properly with Svelte I had to tweak its settings a bit.

```text
" NERDCommenter settings

let g:NERDSpaceDelims = 1
let g:NERDCompactSexyComs = 1
let g:NERDCustomDelimiters = { 'html': { 'left': '<!--', 'right': '-->' } }

" Align comment delimiters to the left instead of following code indentation
let g:NERDDefaultAlign = 'left'

fu! NERDCommenter_before()
  if (&ft == 'html') || (&ft == 'svelte')
    let g:ft = &ft
    let cfts = context_filetype#get_filetypes()
    if len(cfts) > 0
      if cfts[0] == 'svelte'
        let cft = 'html'
      elseif cfts[0] == 'scss'
        let cft = 'css'
      else
        let cft = cfts[0]
      endif
      exe 'setf ' . cft
    endif
  endif
endfu

fu! NERDCommenter_after()
  if (g:ft == 'html') || (g:ft == 'svelte')
    exec 'setf ' . g:ft
    let g:ft = ''
  endif
endfu
```

There are plenty of other useful tips and tricks, but I will stop here.

If you stuck with me this far you should have a fully functional Vim setup ready for Svelte development.

## Plugins Mentioned

https://github.com/evanleck/vim-svelte
https://github.com/leafOfTree/vim-svelte-plugin
https://github.com/pangloss/vim-javascript
https://github.com/yuezk/vim-js
https://github.com/junegunn/vim-plug
https://github.com/leafgarland/typescript-vim
https://github.com/HerringtonDarkholme/yats.vim
https://github.com/sheerun/vim-polyglot
https://github.com/neoclide/coc-prettier
https://github.com/prettier/vim-prettier
https://github.com/preservim/nerdcommenter
https://github.com/Shougo/context_filetype.vim
https://github.com/davidtheclark/cosmiconfig

## Final Words

My goal has always been to shorten the time between an idea, a thought, and its final implementation on screen. I think I've come pretty close by now by using Vim as my main editor.

However, learning Vim comes with a price. I can barely write anything outside Vim now. Short texts, no problem. Longer texts, forget it. The muscle memory is strong!

One big reason I like Vim is that it's never in my way. I don't like being distracted. It's just me, a black computer screen and my thoughts.

My final advice:

- Stop jumping around, always looking for something better, and invest your time and energy into something that has proven its value by now - Vim.
- Very few people can master Vim fully, but many will increase their productivity from learning just a bit of Vim and by just start using it in their daily work. Try to stick to it and miracles will happen!
- Never copy someone else's config. Start with sensible defaults and build it up as you go.

If you want to learn Vim, [Vimcasts](http://vimcasts.org/) is a good starting point. Godspeed.