VimでPrettierを使えるようにする手順のメモ。
対象読者
- Vimの初心者
- Macユーザー
- コード整形にPrettierを使いたい人
- VScodeのPrettierしか使ったことがなく、Prettierを単体でインストールしたことがない人
本記事でわかること
- Vim-Prettierのインストール方法
- Vim-Prettierの設定
それではまず、Vim-Prettierのインストール方法から説明していこう。
Vim-Prettierのインストール方法
Vimのプラグインのインストールにはいくつか方法がある。ここではVimのバージョン８から標準搭載されたパッケージマネージャを使った方法のみ扱う。
次のコマンドをTerminalで実行：
git clone --depth 1 [https://github.com/prettier/vim-prettier](https://github.com/prettier/vim-prettier) ~/.vim/pack/plugins/start/vim-prettier
実行後にいくつかダウンロードが行われ、次のディレクトリができているはずだ。
~/.vim/pack/plugins/start/vim-prettier
続いて、Prettier本体をインストールしよう。
Prettier本体のインストール
グローバルにインストールしたい場合：
npm i -g prettier
ローカルにインストールしたい場合：
cd ~/.vim/pack/plugins/start/vim-prettier
npm install
これでVimでPrettierを使う準備は整った。
次はVim-Prettierの使うための設定について見ていこう
Vim-Prettierの設定
仮でIndex.jsという名前のファイルを用意する。
Index.jsをVimで開いて、次のコードを記述：
let array={0:"zero",1:"one"};
このコードをPrettierで整形：
-
NOMARL modeに切り替え
-
次のコマンドを実行：
:Prettier
すると、コードが次のように、スペースが追加されただろう。
let array = { 0: "zero", 1: "one" };
もし:Prettierを実行後に次のエラーメッセージが出た場合、Prettierがインストールされていない。
no prettier executable installation found
Prettier本体のインストールからやり直そう。
ただ、毎回整形するときに:Prettierと入力するのは面倒だろう。
条件に応じて自動で整形するように設定しよう
Prettierを自動実行するための設定
vimrcファイルを開く：
vim ~/.vimrc
次のコードをコピペでvimrcファイルにはりつけ：
augroup fmt
autocmd!
autocmd BufWritePre,TextChanged,InsertLeave *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md,*.vue,*.svelte,*.yaml,*.html PrettierAsync
augroup END
これでPrettierが次の場合実行される。
- ファイルが保存される前
- テキストが変更された後
- INSERTモードから抜けた後
コードがキビキビ整形されて快感ではないだろうか？
余談
はじめVim-Prettierをインストールしたとき、Prettierが同梱されているものと思い込んでいた。
これまでVScodeでPrettierを使用していて、そのとき使っていたPrettierは拡張機能のインストールと同時にPrettier本体もインストールされていた（はず）ため、自らPrettierをインストールした経験がない。
思い込みによって、Vim-Prettier実行（:Prettier)にエラーメッセージが出ていたが、まさかPrettier本体をインストールされていないとは思わなかった。
エラー内容を検索したところ、このQiita記事によって解決した。
一応Vim-Prettierの公式ドキュメントにもPrettier本体がない場合はインストールするよう書いているが見落としていた。
こんなことで時間を消費しないようエラーメッセージの内容をよく解釈するよう気をつけたい。