目次
1.背景
2.原因1 Prettierルールの優先順位
3.原因2 設定の相違点
4..prettierrc.json
1. 背景
- VSCodeのPrettier拡張機能とnpmのPrettierの設定が異なっていました。
- 毎回以下の無駄なことをしていました。
npx prettierでフォーマット
↓
VSCodeのprettierでフォーマットすると末尾にカンマが数カ所追加される
↓
npx prettierでフォーマットされた状態に戻す
次に、この原因を説明します。
2. 原因1 Prettierルールの優先順位
VSCodeのPrettier拡張機能にバンドルされているPrettierやVSCodeの設定は、あくまでもフォールバック的な位置付けで、優先される設定もローカルのPrettier設定ファイル(.prettierrc)が上位になっています。
ローカルに Prettier 設定ファイル (.prettierrc) が存在し、一つでも設定項目が書かれている場合、 VSCode の Prettier の設定はすべて適用されません。
【Prettier】「なんとなく使う」から「分かって使う」へ【Visual Studio Code】
3. 原因2 設定内容の相違
VscodeのPrettier拡張機能の設定
npmのprettierの設定
prettier doc trailing-commas
Default value changed from es5 to all in v3.0.0
バージョン確認した所v3.0.0でした！
"prettier": "^3.0.0"
よってallとes5の違いが原因でした。
次に以上を踏まえて.prettierrc.jsonを設定します。
4. .prettierrc.json
ルートディレクトリ配下に以下を作成しました。
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
以下のように主要なJavaScriptエンジンとブラウザはすでにES2017をサポートしていますので、trailingCommaがallで良いと考えてます。
Can I use Search Trailing comma in function parameters?
また、以下の利点があります。
- オブジェクトや配列の要素を追加、削除、再配置する際にコードの編集が簡単になります。
- TypeScriptとの整合性
TypeScript2.7以降、型パラメータリスト内でトレーリングカンマ（末尾のカンマ）を使用できるようになっています。
以下の理由でvscodeのsettings.jsonで保存時に自動でprettierのフォーマットを設定してません。
- VScode以外のエディタの方もいる可能性があります。
- pre-commitでprettierし、その差分を一緒にcommitまでしてくれる設定にしてます。
参考
最後に
- 無事ローカルの設定で上書きすることができました。
- 勘違いしていたので今回設定ズレのおかげでとても勉強になりました。
- 設定ズレを起こして下さったVSCodeのprettier拡張機能とnpm prettier v3.0.0に大変感謝します。
参考になる記事を書いてくださった皆様ありがとうございました！
宣伝させてください！