Vim as a Flutter IDE
Tags: vim, dart, flutter, autocompletion
Published: 2020-01-16 15:24:47

If you are such developers who love vim and use it instead of other IDEs and you are a Flutter developer, you are in the right place. In the continue, it is described how to configure vim to support Dart programming language and Flutter framework.


> It is assumed that you are familiar with vim and know how to install plugins.

## Support dart files

To support dart filetype, syntax highlight, and indention, There is a vim plugin that is called [`dart-vim-plugin`](https://github.com/dart-lang/dart-vim-plugin). If you use `Vundle` to manage the vim plugins, you can simply add this to your `.vimrc`.

```vim
Plugin 'dart-lang/dart-vim-plugin'
```

After adding `dart-vim-plugin` to your vim, it supports dart syntax and highlights your code.

![Dart syntax highlight in vim](https://tavanarad.github.io/my-blog/posts/dev-to/vim-as-dart-ide/syntax-highlight.png) 

Also, you can format and analyze your code by `:DartFmt` and `:DartAnalyzer` respectively.

## Auto completion

There are two plugins to add the Dart autocompletion to vim:

1. `dart-lsc-vim`
2. `coc.nvim`

### Dart LSC VIM
The Dart SDK comes with an analysis server that can be run in Language Server Protocol (LSP) mode. The `dart-lsc-vim` plugin help to register the dart analysis server as a language server by using `vim-lsc`. Again, by using Vundle you can easily install both `vim-lsc-dart` and `vim-lsc` as below:

```vim
Plugin 'natebosch/vim-lsc'
Plugin 'natebosch/vim-lsc-dart'
```

If you are a fan of `vim-plug` then you can use:

```vim
Plug 'natebosch/vim-lsc'
Plug 'natebosch/vim-lsc-dart'
```


By adding `g:lsc_auto_map` to `true`, you apply all defaults keymaps of `vim-lsc`.

```vim
let g:lsc_auto_map = v:true
```

The default keymaps of `vim-lsc` are:

- 'GoToDefinition': `<C-]>`,
- 'GoToDefinitionSplit': [`<C-W>]`, `<C-W><C-]>`],
- 'FindReferences': `gr`,
- 'NextReference': `<C-n>`,
- 'PreviousReference': `<C-p>`,
- 'FindImplementations': `gI`,
- 'FindCodeActions': `ga`,
- 'Rename': `gR`,
- 'DocumentSymbol': `go`,
- 'WorkspaceSymbol': `gS`,
- 'SignatureHelp': `gm`,

![Dart autocompeltion via vim-lsc-dart](https://tavanarad.github.io/my-blog/posts/dev-to/vim-as-dart-ide/auto-completion-vim-lsc-dart.png)

### CoC.nvim

[`CoC.nvim`](https://github.com/neoclide/coc.nvim) is an intellisense engine for `vim (>= 8.1)` and `neovim (>=0.3.1)`. It is a completion framework and language service client which supports extension features of VSCode.
You can install `CoC.nvim` by adding the line below to `.vimrc` if you have `Vundle`.

```vim
Plugin 'neoclide/coc.nvim'
```

After installing `coc.nvim` by Vundle, you should change the brach to `release` in `~/.vim/bundle/coc.nvim`.

```shell
cd ~/.vim/bundle/coc.nvim
git checkout release
```

If you use `vim-plug`, you can add the line below to `.vimrc`.

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

After adding `coc.vim` plugin to vim to enable flutter support you should install [`coc-flutter`](https://github.com/iamcco/coc-flutter) by running this command in vim

```vim
:CocInstall coc-flutter
```

![Dart autocompletion via coc.nvim](https://blog.tavanarad.ir/posts/dev-to/vim-as-dart-ide/auto-completion-coc-nvim.png)

You can add configuration to have `go-to definition`, `find references`, `go-to implementation` and etc. You can check `CoC.nvim`'s [README](https://github.com/neoclide/coc.nvim/blob/master/README.md) file for more configuration.

```vim
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)
```

I hope this tutorial helps you to configure your vim easily to use it as a Flutter IDE.

Your feedback is also highly appreciated.