「Visual Studio Code」でチーム開発するなら「共通設定」を整えよう

はじめに

チームで開発を進めていると、エディターの設定がメンバーによって異なるため、思わぬトラブルに繋がることもあります。例えば、インデントの幅(スペースやタブの数)に違いがあると、差分が意図せず発生しやすくなります。また、保存時にコードの整形が自動で行われない場合、例えば関数の引数を1行でまとめるか、改行して複数行に分けるかといったように、エンジニアごとの書き慣れたスタイルがそのまま反映され、コードにばらつきが生じることがあります。

このような環境の違いは見た目の問題だけにとどまらず、コードレビューの手間を増やしたり、バージョン管理に混乱を招いたりする原因にもなります。特に「Visual Studio Code」(以下、VS Code)を使っている場合は、プロジェクト内に共通の設定ファイルを用意することで、こうしたばらつきを防ぐことができます。

このように、少しの工夫で開発環境をそろえることができ、チーム全体の作業効率や快適さが大きく向上します。本記事では、VS Codeをチームで使い始める際に設定しておきたいポイントや注意点について、初心者にも分かりやすく紹介します。

まずは、小さな一歩として共通設定を整えるところから始めてみましょう。統一された環境があるだけで、日々の開発がぐっとスムーズになります。

.vscode/settings.jsonの活用

VS Codeでは、プロジェクトごとにエディターの設定をまとめることができます。そのためのファイルがプロジェクト内に配置する.vscode/settings.jsonです。

このファイルを使うことでチーム全員の開発環境をそろえることができ、誰が書いても同じようなスタイルのコードに統一されます。これにより、コードの見た目に関する無駄な差分が減り、レビューや保守の効率も上がります。

よく使われる共通設定の例

チームでよく使用される設定として、以下のようなものがあります。

• インデントの幅(2スペースや4スペース)
• ファイル保存時の自動フォーマット
• 行末の不要な空白の削除
• 最終行への改行の自動追加
• ESLintなどのリントツールの自動修正

これらの設定をプロジェクトに含めておくことで「自分の環境ではうまく動いたけど、他のメンバーの環境では動かない」といった問題を防ぎやすくなります。

VS Codeの設定ファイルに関する公式ドキュメント「User and Workspace Settings - Visual Studio Code」については、こちらを参照してください。

ファイルの配置場所

extensions.jsonは、プロジェクトのルートにある.vscodeフォルダーの中に配置します。例えば、次のようなディレクトリ構成になります。

your-project/
└── .vscode/
    └── extensions.json

このように設定しておくことで、新しくプロジェクトに参加したメンバーもすぐに必要な拡張機能を導入でき、コードスタイルやチェックルールを統一しやすくなります。

設定ファイルの記述例

実際の.vscode/settings.jsonの例を以下に示します。

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "files.insertFinalNewline": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

この設定には、次のような意味があります。

• "editor.tabSize": 2
  インデントを2スペースに統一
• "editor.formatOnSave": true
  ファイルを保存するたびに自動でコードを整形
• "files.insertFinalNewline": true
  ファイルの末尾に自動で改行を追加
• "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
  保存時にESLintの自動修正を実行

EditorConfigとの使い分け

EditorConfigはエディターやIDEの設定を超えてコーディングスタイルを指定するための仕組みです。EditorConfigは.editorconfigという設定ファイルにインデント幅や改行コードなどのルールを記述します。

VS Codeでも拡張機能を追加すれば対応できますが、細かい動作や保存時の自動フォーマットなどは.vscode/settings.jsonの方が柔軟です。どちらを使うか、あるいは併用するかは、チームの運用方針に合わせて選ぶと良いでしょう。

推奨拡張機能の共有：extensions.json

VS Codeでは、拡張機能をインストールすることで開発作業をより便利に進めることができます。例えば、コードを自動で整える「Prettier」をはじめ、文法ミスやスタイルの問題をチェックしてくれる「ESLint」などがよく使われています。

これらの拡張機能は、JavaScriptやTypeScriptで開発するプロジェクトでは特に適しており、多くのチームで導入されています。ただし、チーム全員が同じ拡張機能を使っていないとコードの書き方や表示される警告に違いが出て、作業効率やコードの統一感が損なわれる原因になります。

そういった問題を防ぐために、VS Codeにはプロジェクトごとに「推奨拡張機能」を設定してチームで共有できる仕組みがあります。そのために使用するのが.vscode/extensions.jsonというファイルです。

このファイルに拡張機能の一覧を記述しておくと、チームメンバーがプロジェクトを開いたときに、VS Codeから「このプロジェクトでは以下の拡張機能のインストールが推奨されています」といった通知が表示されます。インストールもワンクリックで行えるため、環境をそろえるのがとても簡単になります。

記述例

以下は、JavaScriptやTypeScriptプロジェクトでよく使われる拡張機能を指定する際にオススメの記述例です。

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

拡張機能を指定する際は、拡張機能に割り当てられているIDを使用します。拡張機能のIDは、VS Codeの拡張機能パネルで該当の拡張機能を右クリックして「拡張機能のIDをコピー」を選ぶことで取得できます。

つまずきやすいポイントと対処法

VS Codeの共通設定を導入しても、すぐに効果が出なかったり、思ったように動作しなかったりすることがあります。ここでは、チーム開発でよくあるつまずきポイントと、その対処法ご紹介します。

設定が反映されない、意図しない動作になる

共通設定を入れたはずなのに効いていないように見える場合、原因として多いのが「ユーザーごとの設定が優先されている」ケースです。

VS Codeでは、以下のように設定の優先順位があります。

1. ユーザー設定(個人の環境)
2. ワークスペース設定(プロジェクトごとの.vscode/settings.json)
3. 拡張機能の初期設定

例えば、ユーザー設定でタブ幅が2に設定されていると、プロジェクトでタブ幅4を指定していても反映されないことがあります。このようなときは、コマンドパレット(WindowsやLinuxでは[Ctrl]キー＋[Shift]キー＋[P]キー、Macでは[Cmd]キー＋[Shift]キー＋[P]キー)を開いて「設定の検査(Inspect Settings)」と入力し、実際にどの設定が有効になっているかを確認すると良いでしょう。

また、拡張機能によってはバージョンの違いで動作が異なることもあります。チームで使う拡張機能のバージョンをそろえる、または推奨バージョンをREADMEに書いておくと安心です。

保存時のフォーマットなどがうまく動かない

ファイル保存時に自動で整形されない場合、原因としては以下のようなことが考えられます。

• 使用している言語に対応したフォーマッターがインストールされていない
• 複数のフォーマッターが競合している
• 設定が正しくない、または保存時のフォーマットがオフになっている

例えば、JavaScriptやTypeScriptをPrettierで整形したい場合はesbenp.prettier-vscodeという拡張機能がインストールされている必要があります。また、次のように設定で明示的にフォーマッターを指定すると競合を避けることができます。

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

設定ファイルでeditor.formatOnSaveがtrueになっているかも確認してみてください。

おわりに

チームでVS Codeを使って開発を進めるとき、メンバーごとにエディターの設定がばらばらだと、コードの見た目や動作に違いが生じやすくなります。こうした状態は、ちょっとしたミスやレビュー時の手間につながることもあるため、できるだけ避けたいところです。

そこで役立つのがVS Codeの共通設定です。プロジェクト内に.vscode/settings.jsonを用意し、インデントの幅や保存時の自動フォーマットといった基本的なルールを定義しておくことでチーム全体で統一感のある開発がしやすくなります。VS Codeでは、このような設定をプロジェクト単位で管理できるため、個人の好みを尊重しつつ必要な部分だけ共通化することも可能です。

さらに.vscode/extensions.jsonを使って推奨する拡張機能を共有しておくと、新しいメンバーが参加したときでも、すぐに必要な環境を整えることができます。例えば、PrettierやESLintなど、よく使われるツールをチームで揃えることでコーディングルールの自動化や品質の維持がしやすくなります。

このように、ちょっとした設定の共有を行うだけでチーム全体の開発体験が大きく向上します。まずは.vscode/settings.jsonを整備することから始めてみましょう。小さな一歩がスムーズで快適なチーム開発への大きな助けとなります。