Vim8にPrettierを導入する

遅れながら話題のPrettierを導入してみました。
備忘録を兼ねて導入手順を記事にしてみようと思います。

当方のVim環境

Homebrewで--with-python3でインストールしています。

必要なもの

• Vim
• Prettier
• prettier/vim-prettier

Prettierを非同期で実行するにはVim8以上が必須です。

導入手順

1. Prettierをインストール

If using other vim plugin managers or doing manual setup make sure to have
prettier installed globally or go to your vim-prettier directory and
either do npm install or yarn install

とヘルプに書いてあるので、お好みでどちらかの方法でインストールしてください。

グローバルインストール

npm i -g prettier

vim-prettierディレクトリにインストール

例はdeinのtomlなので、各自の環境に置き換えてください。
buildオプションにnpm installを設定します。
そうすると、プラグインのインストール時にPrettierをインストールしてくれます。

[[plugins]]
repo  = 'prettier/vim-prettier'
build = 'npm install'

2. vim-prettierをインストール

当方はプラグイン管理にdeinを使っています。
また、設定ファイルはtomlなので、各自の環境に置き換えてください。

lazyする・しないはお好みで。
当方はVimの起動を少しでも早くしたいので、dein_lazy.tomlに書いています。

on_ftで特定のファイルタイプの時に起動するようにします。
ファイルタイプはお好みで設定してください。(Prettierがサポートしている範囲で）

この設定では、保存前にPrettierAsyncを実行します。
Prettierを非同期で実行するにはVim8以上が必須です。

[[plugins]]
repo     = 'prettier/vim-prettier'
build    = 'npm install'
on_ft    = ['javascript', 'typescript', 'vue', 'css', 'scss', 'json', 'markdown']
hook_source = '''
  " @formatアノテーションを持ったファイルの自動フォーマットを無効にする
  let g:prettier#autoformat = 0
  
  " Prettierのパースエラーをquickfixに表示しない
  let g:prettier#quickfix_enabled = 0
  
  autocmd BufWritePre *.js,*.ts,*.vue,*.css,*.scss,*.json,*.md PrettierAsync
'''

By default it will auto format javascript, typescript, less, scss and css files that have "@format" annotation in the header of the file.

To enable vim-prettier to run in files without requiring the "@format" doc tag. First disable the default autoformat, then update to your own custom behaviour

とあるので、無効にして保存前のタイミングで実行するようにしています。
パースエラーをquickfixに表示したくないので無効にしています。

他にもオプションがあるので、お好みの設定で試してみてください。
https://prettier.io/docs/en/vim.html#vim-prettier-configuration

以上になります。

おわりに

linterとPrettierを併用する場合は、設定をうまくやってやる必要がありますが、
自動で良しなにやってくれるのですごく便利です😊

間違っていたりおかしい箇所があれば、コメントいただければ幸いです🙌