【VSCode】Prettierをプロジェクト毎に設定を切り替える方法 - フロントエンドエンジニアのスターティングノート

はじめに

プロジェクトチームで開発をプログラムの改行位置や配列、オブジェクトの書き方などはどうしてもバラバラになってしまいますよね。

昔はコーディング規約なるものを作っていましたが非常に手間のかかるもの。

現在はプログラムの書き方をある程度自動で調整してくれるコードフォーマッターをお勧めしています。

VSCodeでは、数あるコードフォーマッターの中でも非常に使いやすいPrettierを利用しています。

しかし、こちらのPrettier、プロジェクト単位で有効無効を切り替えられたら便利ではありませんか？

今回は、VSCodeのsettings.jsonを使ってコードフォーマッターの適用有無を設定する方法を紹介します。もちろん設定ファイルはGitHubで管理できますので、チーム開発での相性はバッチリです。

下記のようにルートフォルダに.vscodeフォルダを作成してsettings.jsonファイルを手動作成します。

.vscode
└ settings.json

settings.jsonファイルはその他にも、特定のフォルダ、特定のファイルを隠す設定も可能です。

settings.jsonファイルに下記の設定を記入して保存します。
これでPrettierの設定が有効になりました。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}