Vim as a Flutter IDE

Morteza Tavanarad — Thu, 16 Jan 2020 15:24:47 +0000

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. If you use Vundle to manage the vim plugins, you can simply add this to your .vimrc.

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

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

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:

dart-lsc-vim
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:

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

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

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.

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,

CoC.nvim

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.

Plugin 'neoclide/coc.nvim'

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

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

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

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

After adding coc.vim plugin to vim to enable flutter support you should install coc-flutter by running this command in vim

:CocInstall coc-flutter

You can add configuration to have go-to definition, find references, go-to implementation and etc. You can check CoC.nvim's README file for more configuration.

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.

DEV Community: Morteza Tavanarad

Vim as a Flutter IDE

Support dart files

Auto completion

Dart LSC VIM

CoC.nvim