よく使うPrettierのスクリプトを理解する

よく使ってるスクリプト

package.json

"format": "prettier . --write"

これってどういう意味かよく理解できてないなぁ...

構文について

https://prettier.io/docs/cli

prettier [options] [file/dir/glob ...]

基本的な書き方はこう。
...あれ、optionsとfileの書き方、公式と逆になってた。
GPTに聞いてみると、

Prettierは親切で、引数の順序を柔軟に解釈してくれます。

確かに、オプションの順序が逆でも動作に変わりはない。

引数について

"format": "prettier . --write"
これは、
npm run format実行時、prettierでルートディレクトリ全体を対象にファイルを修正する
という意味になる。

--write（または-w）

• ファイルを実際に修正するオプション
• フォーマットの問題を検出して、自動的に修正する

実際の出力

npm run format

> prettier --write .

package-lock.json 30ms (unchanged)
package.json 0ms (unchanged)
prettier.config.js 2ms (unchanged)
README.md 17ms (unchanged)

フォーマットの必要のありなし関係なく、対象ファイル全てが出力される

他にもよく--checkを使ってた。

--check(または-c)

https://prettier.io/docs/cli#--check

• フォーマットされているかどうかを確認できるオプション
• フォーマットされていないファイルのリストを出力。（修正はされない）

実際の出力

npm run format

>prettier --check

Checking formatting...
[warn] prettier.config.js
[warn] src/styles/global.css
[warn] Code style issues fixed in 2 files.

すべてのファイルがフォーマット済みの場合

npm run format

> prettier --check

Checking formatting...
All matched files use Prettier code style!

フォーマットが必要なファイルのみリスト表示される

調整例

"format": "prettier --check . --write"

こうすれば、実際にフォーマットされたファイルのみをターミナルに表示させることができる！

実際の出力

 npm run format

> prettier --check . --write

Checking formatting...
[warn] package.json
[warn] src/styles/global.css
[warn] Code style issues fixed in 2 files.

ちょっとした改善。ターミナルの出力が少しスッキリ。