[vim] 選択範囲だけprettierで整形する
問題
HTMLの一部を範囲選択して、「=」をしても、左に寄るだけで、インデントされないです。
ファイル全体ではなく、選択部分のHTMLを整形する方法はありますか?
答え
以下、準備とその使用方法。
準備
フォーマッターを用意しよう。
ここではprettierを使う。
globalにインストールする場合
npm install -g prettier
どこか場所を決めてある場合、プロジェクトの中、root権限がない場合など
npm install prettier
グローバルにインストールしたら /usr/bin などにリンクがあって、以下で実行できる。
prettier
ローカルにインストールしたらnpx経由などで。
npx prettier
vimでフォーマッターを使う
vimで整形をするときは、「gq」。
gqは formatprg に設定があればそれを使う。設定がないと内部整形ルーチンが使用される(=を押したときと一緒?)。
formatprgは標準入力を受け取って標準出力を返すものが期待されている。
以下のように設定できる。
:set formatprg=prettier\ --parser=html
空白を含むのでバックスラッシュでエスケープしている。
選択範囲をHTMLとして整形してほしいので --parser で html を指定している。
--stdin-filepath % で今編集しているファイル名を渡して推測させる手もあるが、ファイルがphpだとHTMLとして整形してくれないなど思ったようにならないこともある。
おまけ 1
prettierを使うと、たくさん改行される、変な位置で改行されて困るといった話を聞く。
以下の設定で、なるべく改行しないようにさせる。
--print-width=200
:set formatprg=prettier\ --print-width=200\ --parser=html
おまけ 2
prettierが対応しているパーサーは多数ある。
ヘルプより
--parser <flow|babel|babel-flow|babel-ts|typescript|acorn|espree|meriyah|css|less|scss|json|json5|jsonc|json-stringify|graphql|markdown|mdx|vue|yaml|glimmer|html|angular|lwc|mjml>
parserにjsonを指定したら、JSONを成型してくれる。
いろいろできる。
おまけ 3
ほんとに1回だけ実行したいだけの時は、範囲!コマンド で実行すればよい。
範囲選択して、
:'<,'>!prettier --parser=html
formatprg とか gq とか使わなくてもできる。