2017-11-07 14:39:07 +11:00
---
id : vim
title : Vim Setup
---
2017-06-08 09:43:27 -07:00
2019-12-23 17:32:44 +03:00
Vim users can install either [vim-prettier ](https://github.com/prettier/vim-prettier ), which is Prettier specific, or [Neoformat ](https://github.com/sbdchd/neoformat ) or [ALE ](https://github.com/dense-analysis/ale ) which are generalized lint/format engines with support for Prettier.
2017-06-08 09:43:27 -07:00
2018-09-29 09:40:49 +02:00
## [vim-prettier](https://github.com/prettier/vim-prettier)
2017-06-08 09:43:27 -07:00
2018-09-29 09:40:49 +02:00
See the [vim-prettier ](https://github.com/prettier/vim-prettier ) readme for installation and usage instructions.
2017-06-08 09:43:27 -07:00
2018-09-29 09:40:49 +02:00
## [Neoformat](https://github.com/sbdchd/neoformat)
2017-06-08 09:43:27 -07:00
2018-09-29 09:40:49 +02:00
The best way to install Neoformat is with your favorite plugin manager for Vim, such as [vim-plug ](https://github.com/junegunn/vim-plug ):
2017-06-08 09:43:27 -07:00
2020-04-03 18:44:03 +08:00
```vim
2017-06-08 09:43:27 -07:00
Plug 'sbdchd/neoformat'
```
2018-09-29 09:40:49 +02:00
Run `:Neoformat` or `:Neoformat prettier` in a supported file to run Prettier.
2017-06-08 09:43:27 -07:00
2018-09-29 09:40:49 +02:00
To have Neoformat run Prettier on save:
2017-06-08 09:43:27 -07:00
2020-04-03 18:44:03 +08:00
```vim
2017-06-18 13:21:44 +05:00
autocmd BufWritePre *.js Neoformat
2017-06-08 09:43:27 -07:00
```
You can also make Vim format your code more frequently, by setting an `autocmd` for other events. Here are a couple of useful ones:
2018-05-27 15:37:44 -03:00
- `TextChanged` : after a change was made to the text in Normal mode
- `InsertLeave` : when leaving Insert mode
2017-06-08 09:43:27 -07:00
For example, you can format on both of the above events together with `BufWritePre` like this:
2020-04-03 18:44:03 +08:00
```vim
2017-06-18 13:21:44 +05:00
autocmd BufWritePre , TextChanged , InsertLeave *.js Neoformat
2017-06-08 09:43:27 -07:00
```
See `:help autocmd-events` in Vim for details.
2020-06-28 03:47:29 +02:00
It’ s recommended to use a [config file ](configuration.md ), but you can also add options in your `.vimrc` :
2017-06-08 09:43:27 -07:00
2020-04-03 18:44:03 +08:00
```vim
2020-02-27 02:19:52 +02:00
autocmd FileType javascript setlocal formatprg = prettier \ -- single - quote \ -- trailing - comma \ es5
2017-06-08 09:43:27 -07:00
" Use formatprg when available
let g :neoformat_try_formatprg = 1
```
2020-06-28 03:47:29 +02:00
Each space in Prettier options should be escaped with `\` .
2017-06-08 09:43:27 -07:00
2019-12-23 17:32:44 +03:00
## [ALE](https://github.com/dense-analysis/ale)
2017-06-08 09:43:27 -07:00
2018-09-29 09:40:49 +02:00
ALE requires either Vim 8 or Neovim as ALE makes use of the asynchronous abilities that both Vim 8 and Neovim provide.
2017-06-08 09:43:27 -07:00
2018-09-29 09:40:49 +02:00
The best way to install ALE is with your favorite plugin manager for Vim, such as [vim-plug ](https://github.com/junegunn/vim-plug ):
2017-06-28 17:20:34 +01:00
2020-04-03 18:44:03 +08:00
```vim
2019-12-23 17:32:44 +03:00
Plug 'dense-analysis/ale'
2017-06-28 17:20:34 +01:00
```
2019-12-23 17:32:44 +03:00
You can find further instructions on the [ALE repository ](https://github.com/dense-analysis/ale#3-installation ).
2017-06-28 17:20:34 +01:00
2018-09-29 09:40:49 +02:00
ALE will try to use Prettier installed locally before looking for a global installation.
2017-06-28 17:20:34 +01:00
2018-09-29 09:40:49 +02:00
Enable the Prettier fixer for the languages you use:
2017-06-28 17:20:34 +01:00
2020-04-03 18:44:03 +08:00
```vim
2018-09-29 09:40:49 +02:00
let g :ale_fixers = {
\ 'javascript' : ['prettier' ],
\ 'css' : ['prettier' ],
\}
2017-06-28 17:20:34 +01:00
```
2020-06-28 03:47:29 +02:00
ALE supports both _linters_ and _fixers_ . If you don’ t specify which _linters_ to run, **all available tools for all supported languages will be run** , and you might get a correctly formatted file with a bunch of lint errors. To disable this behavior you can tell ALE to run only linters you've explicitly configured (more info in the [FAQ ](https://github.com/dense-analysis/ale/blob/ed8104b6ab10f63c78e49b60d2468ae2656250e9/README.md#faq-disable-linters )):
2018-11-12 21:01:30 +01:00
2020-04-03 18:44:03 +08:00
```vim
2018-11-12 21:01:30 +01:00
let g :ale_linters_explicit = 1
```
2018-09-29 09:40:49 +02:00
You can then run `:ALEFix` in a JavaScript or CSS file to run Prettier.
2017-06-28 17:20:34 +01:00
2018-09-29 09:40:49 +02:00
To have ALE run Prettier on save:
2017-06-28 17:20:34 +01:00
2020-04-03 18:44:03 +08:00
```vim
2017-06-28 17:20:34 +01:00
let g :ale_fix_on_save = 1
```
2020-06-28 03:47:29 +02:00
It’ s recommended to use a [config file ](configuration.md ), but you can also add options in your `.vimrc` :
2017-06-28 17:20:34 +01:00
2020-04-03 18:44:03 +08:00
```vim
2020-06-28 03:47:29 +02:00
let g :ale_javascript_prettier_options = '--single-quote --trailing-comma all'
2017-06-28 17:20:34 +01:00
```
2018-10-06 01:41:51 +08:00
## [coc-prettier](https://github.com/neoclide/coc-prettier)
Prettier extension for [coc.nvim ](https://github.com/neoclide/coc.nvim ) which requires neovim or vim8.1.
Install coc.nvim with your favorite plugin manager, such as [vim-plug ](https://github.com/junegunn/vim-plug ):
2020-04-03 18:44:03 +08:00
```vim
2020-05-06 14:36:01 +02:00
Plug 'neoclide/coc.nvim' , {'branch' : 'release' }
2018-10-06 01:41:51 +08:00
```
2018-10-06 20:20:41 +08:00
2018-10-06 01:41:51 +08:00
And install coc-prettier by command:
2020-04-03 18:44:03 +08:00
```vim
2018-10-06 01:41:51 +08:00
CocInstall coc - prettier
```
Setup `Prettier` command in your `init.vim` or `.vimrc`
2020-04-03 18:44:03 +08:00
```vim
2018-10-06 01:41:51 +08:00
command ! - nargs = 0 Prettier :call CocAction ( 'runCommand' , 'prettier.formatFile' )
```
Update your `coc-settings.json` for languages that you want format on save.
2018-10-06 20:20:41 +08:00
2020-04-03 18:44:03 +08:00
```json
{
"coc.preferences.formatOnSaveFiletypes" : [ "css" , "Markdown" ]
}
2018-10-06 01:41:51 +08:00
```
[coc-prettier ](https://github.com/neoclide/coc-prettier ) have same configurations of [prettier-vscode ](https://github.com/prettier/prettier-vscode ), open `coc-settings.json` by `:CocConfig` to get autocompletion support.
2017-11-07 14:39:07 +11:00
## Running manually
2017-06-08 09:43:27 -07:00
2018-09-29 09:40:49 +02:00
If you want something really bare-bones, you can create a custom key binding. In this example, `gp` (mnemonic: "get pretty") is used to run prettier (with options) in the currently active buffer:
2017-06-08 09:43:27 -07:00
2020-04-03 18:44:03 +08:00
```vim
2020-06-28 03:47:29 +02:00
nnoremap gp :silent %! prettier -- stdin - filepath %< CR >
2017-06-08 09:43:27 -07:00
```
2018-09-29 09:40:49 +02:00
2020-06-28 03:47:29 +02:00
Note that if there’ s a syntax error in your code, the whole buffer will be replaced with an error message. You’ ll need to press `u` to get your code back.
2018-09-29 09:40:49 +02:00
2020-06-28 03:47:29 +02:00
Another disadvantage of this approach is that the cursor position won’ t be preserved.