チーム開発でVSCodeの拡張機能やフォーマット設定などを統一したい時に便利な設定ファイルについて

こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。

みなさんはエディターは何を利用していますか？（火種）

私はnvimやVSCodeを使い分けています。チームで開発する時やペアプロをする時はVSCodeに便利な仕組みが揃っているからです。

今日はチーム開発の際にさっと導入できるわりに、不要な手間を省いてくれる.vscode/settings.jsonと.vscode/extensions.jsonについてお話しします。

何がうれしいのか

.vscode/settings.jsonでは以下のようにファイル保存時のフォーマッタ適用や適用するフォーマッタの指定が可能です。

{
  "extensions.ignoreRecommendations": false,
  // TSファイルにのみ適用する設定
  "": {
    // ファイル保存時のフォーマットを設定
    "editor.formatOnSave": true,
    // フォーマッタを指定
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

これに合わせて、.vscode/extensions.jsonでフォーマッタなどの推奨する拡張機能をリストアップします。

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

未インストールのメンバーがVSCodeでプロジェクトフォルダを開いた場合、以下のように推奨拡張機能のインストールを促してくれます。

これで、「○○の拡張機能のインストールしといて」と言わず「VSCodeから拡張機能を推奨されたらインストールしておいて」くらいのコミュニケーションですみますね。

なお、コンテナ環境を利用できる場合、Remote DevelopmentやRemote（Dev） Containerという機能で統一された環境で開発可能ですが、今回は説明を省略いたします。

気になる方は以下のブログ記事を参照してください。

settings.jsonについて

上では「フォーマッタとかの設定を入れられるすごいやつ」のような説明をしましたが、実際はこれらに限らずVSCodeのあらゆる設定を記述できるものです。

ユーザーのグローバルな設定を保持するファイルや、ワークスペースごとの設定を保持するファイルなど、状況に応じて柔軟に設定できます。

今回は省略していますが拡張機能ごとに細かい設定を記述できるため、以前私はPHPの古めのフレームワーク向けのフォーマッタの設定をチームで共有したことがあります。

extension.jsonについて

ワークスペースやプロジェクトごとに推奨する拡張機能を記述できます。

なお、拡張機能の識別子は拡張機能ページから取得でき、Add to Workspace Recommendations を選択することでそのまま.vscode/extensions.jsonに追加してくれます。

実際にチーム開発で利用する時には

.vscode/settings.json や .vscode/extensions.jsonの利用により拡張機能や利用するフォーマッタの統一ができました。

実際に業務で利用する際には利用するフォーマッタやリンタ自体の設定ファイルを用意しておくことで、プロジェクトごとのコードの見た目や品質維持に効果的だと思います。

例えばTypeScriptをメインで利用するプロジェクトでは以下のように.prettierrc.jsonや.eslintrc.json を用意するようなイメージです。

.
├── .eslintrc.json #eslintの設定ファイル
├── .prettierrc.json #prettierの設定ファイル
├── .vscode
│   ├── extensions.json
│   └── settings.json
├── package-lock.json
├── package.json
├── src
└── tsconfig.json

• Prettierの設定ファイルについてはConfiguration File · Prettierをご参照ください
• ESLintの設定ファイルについてはConfiguration Files - ESLint - Pluggable JavaScript Linterをご参照ください

最後に

今回は意外と使われていないこともあるVSCodeの設定ファイルについて紹介しました。

VSCodeには他にもlaunch.json、keybindings.json、devcontainer.jsonなど便利に利用できるさまざまな設定ファイルがあります。

私もチームメンバーが本質的な作業に集中できるように、便利な使い方を調べて行きたいと思います。

余談ですが、settings.jsonとキーボードのショートカット設定を記述できるkeybindings.jsonの整備をし始めると、平気で1日溶けてしまうのではまりすぎには気をつけましょう。