遅れながら話題のPrettierを導入してみました。
備忘録を兼ねて導入手順を記事にしてみようと思います。
当方のVim環境
Homebrewで--with-python3でインストールしています。
必要なもの
Prettierを非同期で実行するにはVim8以上が必須です。
導入手順
1. Prettierをインストール
If using other vim plugin managers or doing manual setup make sure to have
prettierinstalled globally or go to your vim-prettier directory and
either donpm installoryarn install
とヘルプに書いてあるので、お好みでどちらかの方法でインストールしてください。
https://prettier.io/docs/en/vim.html#vim-prettier-installation
グローバルインストール
npm i -g prettier
vim-prettierディレクトリにインストール
例はdeinのtomlなので、各自の環境に置き換えてください。
buildオプションにnpm installを設定します。
そうすると、プラグインのインストール時にPrettierをインストールしてくれます。
[[plugins]]repo='prettier/vim-prettier'build='npminstall'2. vim-prettierをインストール
当方はプラグイン管理にdeinを使っています。
また、設定ファイルはtomlなので、各自の環境に置き換えてください。
lazyする・しないはお好みで。
当方はVimの起動を少しでも早くしたいので、dein_lazy.tomlに書いています。
on_ftで特定のファイルタイプの時に起動するようにします。
ファイルタイプはお好みで設定してください。(Prettierがサポートしている範囲で）
この設定では、保存前にPrettierAsyncを実行します。
Prettierを非同期で実行するにはVim8以上が必須です。
[[plugins]]repo='prettier/vim-prettier'build='npminstall'on_ft=['javascript','typescript','vue','css','scss','json','markdown']hook_source='''"@formatアノテーションを持ったファイルの自動フォーマットを無効にするletg:prettier#autoformat=0"Prettierのパースエラーをquickfixに表示しないletg:prettier#quickfix_enabled=0autocmdBufWritePre*.js,*.ts,*.vue,*.css,*.scss,*.json,*.mdPrettierAsync'''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を併用する場合は、設定をうまくやってやる必要がありますが、
自動で良しなにやってくれるのですごく便利です😊
間違っていたりおかしい箇所があれば、コメントいただければ幸いです🙌