VSCodeの拡張機能を指定したプロジェクトに追加する

背景

VSCodeでは、設定や拡張機能を「個人」「プロジェクト」単位で設定できます。 そのことは覚えているのですが、具体的にどうやって「プロジェクトに拡張機能を追加する」か忘れてしまいました...。

備忘録として、手順や参考記事をまとめます。 今回は例として、フォーマッターであるPrettierを導入します。

導入手順

まさに、という記事があったので参考にさせていただきました。

cf. VSCodeでプロジェクト単位の拡張機能を設定する - Qiita

ざっくりとした手順はこんな感じです。

1. 自分のローカルに拡張機能を追加する
2. レコメンドする拡張機能を .vscode/extensions.json に記述する
3. 拡張機能のレコメンドを受け取るよう .vscode/settings.json に記述する

自分のローカルに拡張機能を追加する

これはいつもどおりですね。 下から2つ目の拡張機能のタブを押し、インストールしたい拡張機能を選びます。

VSCode > extension

レコメンドする拡張機能を .vscode/extensions.json に記述する

上記の位置にファイルを作ります（なければ）。 該当ファイルに以下のように書きます。

{
  "recommendations": [
    "esbenp.prettier-vscode"
  ]
}

recomendations内に書いた要素が、プロジェクトメンバーにレコメンドされます。

拡張機能のレコメンドを受け取るよう .vscode/settings.json に記述する

いままでの作業だけでは、プロジェクトメンバーに拡張機能のレコメンドはされないようです。

.vscode/settings.jsonに追記することでレコメンドされるようになります。

{
  "extensions.ignoreRecommendations": false // 追加
}

おわりに

やろうとしていたことを、先人がほぼまとめてくださっていたのでスムースに設定できました。

余談 - Prettierの感想

便利ではある反面、必ずしも自分の好み通りに出力してくれない点もありました。

具体的には、こんな感じになります。

- "required": [
- "status",
- "message",
- "detail"
- ]
+ "required": ["status", "message", "detail"]

個人的には、配列の要素は複数行に分かれているほうが見やすいんですよね〜

（ちょっと使った程度なのでもしかするとできるのかもですが）今回は導入を見送りました。 API開発をする中で、一部のjsonファイルをフォーマットする、が目的だったので。

フロント側のコードを多めに書く時に、再度検討しようと思いました。