🎛

NeovimでPrettierを使って保存時にフォーマットする

2021/12/26に公開約1,700字

はじめに

ここ最近、 React や Vue のファイル編集は WebStorm や VSCode に任せっきりになってしまっていたので、毎年やっている冬休みの設定ファイル掃除で、 NeovimPrettier まわりの設定を見直してみました。

今回対応するファイル・タイプは、

  • JavaScript
  • JavaScript with React
  • TypeScript
  • TypeScript with React
  • Vue
  • CSS

です。

ちなみにですが、こちらがぼくの Neovim の設定ファイルです。

https://github.com/hisasann/neovim

ALE

https://prettier.io/docs/en/vim.html

Vim で Prettier を実行するプラグインは多々あります。

vim-prettier も有名なので、こちらを使っている方も多い印象です。

https://github.com/prettier/vim-prettier

ぼくは ALE というプラグインを使っているので、こちらで進めていきます。

https://github.com/dense-analysis/ale

dein.tomlの解説

https://github.com/hisasann/neovim/commit/1e401bca4fcdb705e3561d214e13ba1f5f3599d8

eslint の実行は ALE からは行っていません。

どうしても eslint まで含めると、保存の頻度が高くなるにつれ重くなってしまいます。

なので、ぼくは Prettier は ALE で、 eslint は yarn lint のようにコマンドを実行しています。

[[plugins]]
repo = 'dense-analysis/ale'
hook_add = """
let g:ale_fixers = {
\   'typescript': ['prettier'],
\   'typescriptreact': ['prettier'],
\   'javascript': ['prettier'],
\   'javascriptreact': ['prettier'],
\   'css': ['prettier'],
\}

let g:ale_sign_error = 'P>'
let g:ale_sign_warning = 'P-'
let g:ale_echo_msg_format = '[%linter%] %code: %%s'
let g:ale_statusline_format = ['E%d', 'W%d', 'OK']

nmap <silent> <C-w>j <Plug>(ale_next_wrap)
nmap <silent> <C-w>k <Plug>(ale_previous_wrap)

let g:ale_fix_on_save = 1
let g:ale_javascript_prettier_use_local_config = 1
let g:ale_javascript_prettier_options = '--single-quote --trailing-comma all'
"""

これで保存すると同時に JSX の整形や、 Prettier のフォーマットが走ってくれます。

また、 g:ale_javascript_prettier_use_local_config でローカルファイルを優先にしているので、すでに .prettierrc がある場合はそちらを見に行ってくれます。

参考記事

https://lealog.hateblo.jp/entry/2021/04/12/103902

https://dackdive.hateblo.jp/entry/2018/03/30/100000

Discussion

ログインするとコメントできます