SOFTELメモ Developer's blog

[vim] 選択範囲だけprettierで整形する

2024/01/07 vim ,

問題

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 とか使わなくてもできる。

関連するメモ

コメント