Prettierについてのメモです。

Bookmarks

References

• Website
• Docs
• Playground
• Blog
• Github

Prettierを実行するタイミング

• ファイル保存した時
• コミットする前
• CIの時？

やりたいこと

1. prettierでコードをフォーマットしたい
2. vscodeでファイル保存時にPrettierを実行させたい。ただしプロジェクト単位に限定する
3. vscodeでファイル保存時にprettierを実行させたい。その時プロジェクト内のprettier設定ファイルを参照させたい

vscodeでファイル保存時にPrettierを実行させたい。ただしプロジェクト単位に限定する

1. vscodeにprettier拡張をインストール
2. vscodeのsettingsを開く
3. Format On Save の設定にチェックを付ける。するとプロジェクトルートに.vscode/settings.jsonが作成されるのでこれでこのプロジェクト単位だけでファイル保存時にフォーマットされる。もしくは.vscode/settings.jsonをプロジェクトルートに手動で作って以下の設定を記述しても同じ

{
  "editor.formatOnSave": true,
}

4. Default Formatterをvscodeのprettier拡張に指定する

vscodeでファイル保存時にprettierを実行させたい。その時プロジェクト内のprettier設定ファイルを参照させたい

1. 上で工程に加え、プロジェクトルートの .prettierrcを作成する（prettierの設定ファイル）
2. vscodeのprettier拡張の設定で、Config Path を 1 で作成した .prettierrcを指定する
   pathはこれ　./.prettierrc プロジェクトルートから設定ファイルまでのパスを書く

vscodeのprettier拡張について

• デフォルトではvscode内の設定に従って動作する
• vscode上で実行するだけならローカル（node_modules）にprettier packageは必要ない。拡張機能にprettierそのものが含まれているから。
• プロジェクトローカル（プロジェクトのnode_modules）にprettierがあればそっちを実行するのプロジェクト単位でprettierが必要ならローカルにインストールした方が良い
• vscode上のprettierはあくまでvscodeでの操作に連動するもの

Githubでの運用を考える

要件は、

• vscodeを使っている前提
• vscodeでファイル保存時にフォーマットしたい
• vscode上でプロジェクト単位でprettierを実行したい
• prettier設定ファイルはプロジェクト内で管理したい
• vscodeの設定ファイルとprettierの設定ファイルはGithubで管理したい