こんにちは！ふたりはprettier。Mizutani(@sirycity)です。このネタわりと鉄板みたいでtwitterでいろんな人が言ってる。

今回はprettierでmarkdownファイルは無視したいけどignoreファイルは作りたくないという贅沢な悩みを解決する方法についてです。

※半分ネタです

結論

cliから実行する時はこう。

prettier '**/!(*.md)' --write --ignore-unknown --ignore-path .gitignore

さらにVSCodeの場合はsettings.jsonにこれを追記。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

はじめに

prettierは言わずとしれたコードを整形してくれるJSのライブラリです。webフロントエンド系ならどんなコードも大抵綺麗になります。しかしmarkdownだけは例外で、これはmarkdownの仕様と日本語の仕様の相性が悪いためです。このため日本ではmarkdownだけ整形の対象から除外することがよくあります。

.prettierignoreを使った除外

prettierには.prettierignoreというファイルに書かれたファイルを除外する必要があります。ここに拡張子.mdを追加すれば...

*.md

これでok。これで終了。簡単でしょ？

ふたりはprettier

ところで、VSCodeとかのエディタで使えるprettierは2種類あるんですね。npmで管理する普通のライブラリとVSCodeのプラグインの2種類。

npmで管理するprettier

これは普通にnpmでインストールするライブラリです。他のライブラリと一緒。コマンドラインからこんな感じでprettierを実行できます。

npx prettier . --write

別にprettierはこれだけでも使えるんですよ。ただ、毎回毎回これを実行するのはめんどいですね。保存したら自動で実行したいよね。なのでそのためにあるのがVSCodeのプラグインです。

VSCodeのプラグインのprettier

このprettierはVSCodeのライブラリとしてのprettierです。VSCodeのGUIからインストールするタイプね。実際に多くの場合はこっちを使います。ちなみに、もしこっちだけを使う場合はnpmでprettierをインストールする必要はなく、npm i -D prettierとかする必要はないです。

こっちのprettierの役目は保存した時に整形することです。それだけ。

2つのprettierの設定ファイル

もし2つのprettierが全然違う動きしたら大変ですね。なのでこの2つ、設定ファイルは同じやつを使います。設定ファイルってのは.prettierrc.jsとか.prettierignoreとかそういうやつね。

なのでnpmのprettierが入ってなくてVSCodeのprettierだけだったとしても、VSCodeのprettierは.prettierrcの設定を参照します。ちょっと変な感じするね。

VSCodeのprettierの設定

ところがVSCodeのprettier特有の設定もあるんです。めんどくさ！なぜならVSCodeの設定は全部settings.jsonってファイルに書くからです。.prettierrc.jsの中とかにVSCodeの設定も書けると楽なんだけどね。別にperttierはVSCodeのために開発してるわけじゃないしな。

npmのprettierの設定

npmの方には特有の設定ファイルとかはないですが、cliのパラメータとかは当然VSCodeからは参照できないです。--writeとかね。

無視の設定

閑話休題。まとめると「prettierは2種類あるけど設定ファイルが共通(.prettierignore) だからそこにmarkdownを無視する設定を書けば良い」ってことです。

起こる問題

ignoreファイルがなかったら

もし.prettierignoreが無かったら...上記の方法は採れません。markdownを除外する系の方法ではたびたび.prettierignoreを用いますが、ファイルがなければ無理です。

そんなことはあるのか

基本ないですが、prettierはじめフロントエンドのツールは--ignore-pathといってignoreファイルを変更する機能があります。前回の記事とかに書きましたが、この機能を使ってignoreファイルを.gitignoreに統一することができます。この手法は各種ツールのignoreの対象の一括管理することができる反面.prettierignoreが存在しなくなるためVSCodeのprettierが設定を読めなくなります。

VSCodeのprettierにもignorepathを設定

ならVSCodeのprettierにもignorepathを設定し.gitignoreをignoreファイルとして認識させれば良いんですが、VSCodeのprettierに同等の機能は無く、必ず.prettierignoreという名前のファイルを参照する仕様になっています。ちょっとCoC(設定より規約)みたいな思想ですね。

対策

命題は「.prettierignoreを使わずにnpmのprettierとVSCodeのprettierでmarkdownを除外せよ」です。シンプルだね。

npmのprettierでの対策

こう。

prettier '**/!(*.md)' --write --ignore-unknown --ignore-path .gitignore

対象を.md以外の全てとし、--writeで整形。--ignore-unknownで整形できないファイルのエラーを無視。あと直接は関係ないけど、--ignore-pathで.gitignoreを指定。

VSCodeのprettierでの対策

settings.jsonにこれを追記。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

フォーマッターにprettierを設定し、保存を押すたびに実行。ただし、markdownファイルを保存した時のみ実行しない。

最後に

今回の設定はエディタがVSCodeにロックインされます。VSCode以外にプラグインとしてprettierをサポートしているエディタがあると事故ります。気をつけて。

あと、ignoreファイルを一括管理したいための設定なのに結局markdownを無視する設定を2箇所に書いているのは何かの皮肉でしょうか。そこは突っ込んじゃ駄目ですね。以上。