VSCodeでPrettierを使用する

VSCodeの拡張機能からPrettierを使用する方法をメモ。

設定方法

VSCodeの拡張機能から「Prettier」を検索して、インストールを行います。

次にデフォルトのフォーマッタを設定します。
左下の歯車アイコンから設定を選択します。

ユーザーのタブを選択した状態で、右上の「設定(JSON)を開く」のアイコンをクリックします。

settings.jsonが表示されるので、以下の項目を追加します。

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

これでエディタでコードの保存をしたタイミングでフォーマットが実行されるようになります。

前述の設定の場合、エディタで管理する各プロジェクト(ワークスペース)がフォーマットの対象になりますが、特定のプロジェクトでのみフォーマットの設定を有効にしたい場合は以下の項目を追加します。

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

prettier.requireConfigは、Prettierの設定ファイルがプロジェクトにある場合にのみフォーマットを有効にする項目です。
プロジェクトのルートディレクトリに空の.prettierrcを追加すればOKです。
これでプロジェクトルートに.prettierrcがある場合はフォーマットが行われ、ないプロジェクトではフォーマットが行われません。

.prettierrcについてもいくつか項目を確認してみます。
詳しくは公式のオプションをご確認ください。

{
  "printWidth": 80, // 1行に表示する長さ
  "tabWidth": 2, // インデントのスペースの数
  "useTabs": false, // インデントにスペースではなくタブを使うかどうか
  "semi": true, // 文末にセミコロンを出力するかどうか
  "singleQuote": false, // ダブルクォートの代わりにシングルクォートを使うかどうか
  "trailingComma": "all", // 配列やオブジェクトなどの末尾のカンマ "all"：可能な限り末尾につける "none"：つけない
  "bracketSpacing": true // オブジェクトのカッコ内にスペースを含めるかどうか
}

特定のプロジェクトでのみフォーマットを有効にする別の方法も試してみます。
まず、前述のsettings.jsonで追加した下記項目を削除します。

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

プロジェクトのルートに /.vscode/settings.json を作成して、以下の内容にします。

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

.vscodeフォルダ内のsettings.jsonは、VSCodeのプロジェクト単位(ワークスペース単位)の設定ファイルになります。
そのため、基本的にはフォーマットは有効にならず、特定のプロジェクトでのみフォーマットが有効になります。