はじめに
npmを使用してサイト制作をする際にコード自動整形ツール「prettier」を使用しています。
prettierのバージョンが3にあがってから自動整形されなくなってしまいました。
バージョンのバグかと思っていましたがただの設定ミスだったというお話です。
prettierをどう入れていたか
npm i -D prettierで最新のバージョンをインストールします
npm-scriptsでタスク処理設定を行っていたのでpackage.jsonに下記項目を追加します
"scripts": {
"format": "prettier dist/**/*.html --write"
}この処理で期待する結果は
「distフォルダ内の拡張子がhtmlのファイルを自動整形して上書きする」
です。
これを実行してもさっぱり自動整形されなくなってしまいました。
prettierのバージョンを下げてみる
バージョンを3から2に下げてみると違った結果がかえってきました。
npm uninstall prettier
npm i -D prettier@2.8.8一度アンインストールしてからバージョンを指定してインストールしなおしています。
npm run format をおこなうと…
今度は無事自動整形されました！
ここでメモします。
「prettierはバージョン3だと自動整形がうまくいかないのでバージョン2系を入れる」
一旦ここで解決としたかったですが何かもやっとします。
問題はバージョンではなかった
しばらく経って、「そんなあっさりと諦めてよいものか」ともう少しもがいてみます。
"script": {
"format": "prettier 'src/**/*.html --write'"
}distをsrcに変更してみました
すると・・・
バージョン3系でも自動整形されるじゃないですか！？
distはだめでsrcは良いとはどういうことだと思い他の設定を見直します
すると.gitignoreファイルに手がかりがありました。
node_modules
*.log
dist↑もしやこれが原因ではと思いコメントアウトしてみます
node_modules
*.log
#distすると…
動きました！
.gitignoreに指定されているディレクトリは処理の対象外になるように見えます。
ここでようやく公式ドキュメントを見ます
.gitignoreに影響される
prettierのcliページのオプションに下記表記が書いてありました
https://prettier.io/docs/en/cli.html
–ignore-path
Path to a file containing patterns that describe files to ignore. By default, Prettier looks for ./.gitignore and ./.prettierignore.
Multiple values are accepted.
なにも指定しなければ.gitignoreの設定を取り込むようになっているようです。
なので今回はdistフォルダを.giteignoreに指定していたため処理対象範囲外とされてしまっていただけでした…。
オプションを追記して解決
npm-scriptsを以下のように変更して解決です。
"scripts": {
"format": "prettier 'dist/**/*.html' --write --ignore-path .prettierignore"
}※.prettierignoreファイルをルートに作成。中身は空でも大丈夫
まとめ
prettier（バージョン3系）をnpm-scriptで使用する場合はなにも指定がなければ.gitignoreを参照するようになっています。
–ignore-pathオプションで別のファイルを指定しておくと意図しない動きになることを防げます。