🎛
NeovimでPrettierを使って保存時にフォーマットする
はじめに
ここ最近、 React や Vue のファイル編集は WebStorm や VSCode に任せっきりになってしまっていたので、毎年やっている冬休みの設定ファイル掃除で、 Neovim の Prettier まわりの設定を見直してみました。
今回対応するファイル・タイプは、
- JavaScript
- JavaScript with React
- TypeScript
- TypeScript with React
- Vue
- CSS
です。
ちなみにですが、こちらがぼくの Neovim の設定ファイルです。
ALE
Vim で Prettier を実行するプラグインは多々あります。
vim-prettier も有名なので、こちらを使っている方も多い印象です。
ぼくは ALE というプラグインを使っているので、こちらで進めていきます。
dein.tomlの解説
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 がある場合はそちらを見に行ってくれます。
参考記事
Discussion