【完全版】VS Code / Cursorの設定・拡張機能をチームで統一！.vscodeフォルダ活用術とリポジトリ共有ガイド

チームで複数人のエンジニアと開発を進めていると、コードのインデント幅や改行コード、フォーマッタの設定がメンバーごとにバラバラで、Gitのプルリクエストに本質的ではない膨大な差分が発生してしまうトラブルによく遭遇します。

また、新しい開発メンバーがプロジェクトに参加した際、どの拡張機能をインストールすべきか、エディタにどんな設定を入れるべきかをドキュメントで指示しても、設定漏れやバージョン不一致が起きがちです。

本記事では、VS CodeおよびCursorにおいて、プロジェクトルートの「.vscode」フォルダを活用して推奨拡張機能やフォーマッタ（Prettier / ESLint / Biome）、エディタ設定をリポジトリ内で共有・統一する全手順を解説します。個人用のクラウド同期（Settings Sync）との違いや、AIエディタCursorへの移行・互換性、.gitignoreのベストプラクティスまで網羅して紹介します。

この記事で行うこと

• .vscode/extensions.json を作成し、プロジェクトで推奨する拡張機能を定義してチーム内で一括導入できるようにする
• .vscode/settings.json を作成し、インデント、改行コード、保存時の自動フォーマット（Prettier/ESLint/Biome）を統一する
• VS Code以外のエディタとも最低限のコード規約を合わせるための .editorconfig 連携を行う
• Cursorにおける .vscode 設定の互換性、VS Codeからの設定移行手順、AIルールファイルとの共存方法を整理する
• リポジトリ共有時にGit管理すべきファイルと除外すべき個人用設定（.gitignore）を適切に設定する

前提条件と検証環境

この記事で解説する内容は、以下の環境で動作確認を行っています。

項目	内容
対象エディタ	Visual Studio Code / Cursor
対象OS	Windows 11 / macOS / Linux (Ubuntu)
バージョン管理	Git / GitHub
対象フォーマッタ・リンター	Prettier, ESLint, Biome

なぜエディタ設定のチーム統一が必要なのか？

エディタ設定を各自のローカル環境に任せていると、開発効率を低下させる様々な問題が発生します。まずはチーム統一の重要性と仕組みを整理しておきましょう。

1. 不要なGit差分とレビュー負荷の削減

あるメンバーはスペース2文字インデント、別のメンバーはスペース4文字やタブを使っていたり、保存時に末尾の空白を削除する人としない人が混在していると、数行の修正に対して数百行の差分が発生してしまいます。

エディタの設定をリポジトリ単位で固定化することで、コードスタイルの議論や無意味な差分レビューの時間をゼロにできます。

2. 新規メンバーのオンボーディング高速化

リポジトリをクローンして開くだけで、必要な拡張機能のインストール通知がポップアップし、保存時フォーマットなどの開発ルールが自動で適用されます。「環境構築手順書を見ながら手動で設定する」という手間やヒューマンエラーをなくすことができます。

3. 個人同期（Settings Sync）とプロジェクト設定（.vscode）の明確な違い

VS CodeにはMicrosoftアカウントやGitHubアカウントを使って設定を同期する「Settings Sync」機能があります。

Settings Syncは「自分自身の複数PC間（会社のPCと自宅のPCなど）」で個人の設定やキーバインドを同期するための機能です。

一方で、チーム開発における「プロジェクトのコード規約やフォーマッタ」は、個人の好みに左右されてはいけないため、リポジトリ内の「.vscode」フォルダで管理するのが正解です。

4. VS Code / Cursorにおける設定の優先順位

VS CodeおよびCursorでは、設定ファイルが階層構造になっており、狭いスコープの設定が広いスコープの設定を上書きします。

• フォルダ設定（Folder Settings）：マルチルートワークスペース内の個別フォルダ設定（最優先）
• ワークスペース設定（Workspace Settings）：プロジェクトルートの .vscode/settings.json
• ユーザー設定（User Settings）：個人のPC全体に適用されるグローバル設定（最下位）

つまり、個人がどんなユーザー設定（ダークテーマ、フォントサイズ、キーバインドなど）を使っていても、プロジェクトルートの .vscode/settings.json に記述したルールが優先して適用されます。個人の好みのUIを壊すことなく、プロジェクト固有のコード規約だけを強制できる仕組みになっています。

手順1：推奨拡張機能を定義する（.vscode/extensions.json）

プロジェクトで使用する推奨拡張機能をチームに共有するには、プロジェクトのルートディレクトリに .vscode/extensions.json を作成します。

extensions.json の書き方

プロジェクトルートに .vscode フォルダを作成し、その中に extensions.json を配置します。

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "eamodio.gitlens",
    "editorconfig.editorconfig"
  ],
  "unwantedRecommendations": [
    "hookyqr.beautify"
  ]
}

各項目の役割は以下の通りです。

• recommendations: プロジェクトの全メンバーにインストールを推奨する拡張機能のID配列です。
• unwantedRecommendations: プロジェクト内で使用を非推奨とする拡張機能のID配列です。他のフォーマッタと競合して意図しないフォーマット崩れを引き起こす拡張機能などを指定します。

拡張機能ID（識別子）の調べ方

拡張機能IDは「パブリッシャー名.拡張機能名」の形式になっています。以下の手順で簡単にコピーできます。

• VS CodeまたはCursorの左側アクティビティバーから「拡張機能」アイコンをクリックします（ショートカット: Ctrl + Shift + X / Cmd + Shift + X）。
• 対象の拡張機能を検索して開きます。
• 拡張機能の詳細画面にある歯車アイコンをクリックし、「拡張機能 ID のコピー」を選択します。

チームメンバー側での導入手順

このファイルをリポジトリにコミットしてPushしておくと、他のメンバーがプロジェクトを開いたときに以下の挙動になります。

• 右下に「このワークスペースには推奨される拡張機能があります。インストールしますか？」という通知が表示されます。
• 「すべてインストール」をクリックすると、recommendations に記載された拡張機能が一括でインストールされます。
• 通知を閉じてしまった場合でも、拡張機能ビューの検索バーに @recommended と入力することで、ワークスペース推奨の拡張機能一覧を表示し、ワンクリックでまとめてインストールできます。

手順2：エディタ＆フォーマッタ設定を統一する（.vscode/settings.json）

次に、エディタの挙動やコードフォーマッタを統一するための設定を .vscode/settings.json に記述します。

共通の基本エディタ設定

まずは言語を問わず、チーム開発で必ず揃えておきたい基本設定です。

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true
}

各設定の意味は以下の通りです。

• editor.tabSize: インデント幅をスペース2文字に設定
• editor.insertSpaces: Tabキー入力時にスペースを挿入
• files.eol: 改行コードをLF（Unix形式）に統一（Windows環境のメンバーがCRLFでコミットするのを防止）
• files.trimTrailingWhitespace: ファイル保存時に行末の不要な空白を自動削除
• files.insertFinalNewline: ファイル末尾に必ず空行（改行）を1行追加（POSIX標準準拠）
• files.trimFinalNewlines: ファイル末尾の2行目以降の不要な連続空行を削除

【パターンA】Prettier + ESLint 構成（王道のWeb開発スタック）

TypeScript / JavaScript などのWeb開発で最も広く使われている Prettier と ESLint を併用する場合の .vscode/settings.json です。

保存時に Prettier によるコード整形、ESLint による自動修正、未使用importの整理を一括で実行します。

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,

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

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

ポイント：

• editor.codeActionsOnSave は近年のVS Code仕様に合わせて "explicit"（保存時に明示実行）を指定しています。
• Markdownファイル（[markdown]）は、意図しない改行やリスト構造の破壊を防ぐため、保存時自動フォーマットを false にするのが実務ではおすすめです。

【パターンB】Biome 構成（高速Rust製ツールの最新スタック）

Prettier や ESLint の代替として急速に普及している高速ツール「Biome」を採用する場合の .vscode/settings.json です。

Biomeはフォーマッタ、リンター、import整理が1つのバイナリに統合されているため、設定がシンプルで爆速に動作します。

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",

  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },

  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

ポイント：

• 拡張機能 biomejs.biome を指定します。
• quickfix.biome によりリンターの警告修正が保存時に適用され、source.organizeImports.biome によりimport文の自動ソートが走ります。

手順3：他エディタ併用メンバーのための「.editorconfig」連携

チーム内にはVS CodeやCursorだけでなく、IntelliJ IDEA、WebStorm、Neovim、Vimなどのエディタを使用しているメンバーがいる場合があります。

エディタの種類を問わず最低限のインデントや改行コードを統一するため、プロジェクトルートに .editorconfig を配置して併用するのが開発業界の標準的なベストプラクティスです。

.editorconfig の記述例

プロジェクトのルート直下に .editorconfig を作成します。

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

役割分担の整理：

• .editorconfig: あらゆるエディタで共通する「文字コード、改行コード、インデント種別・サイズ、末尾改行」を統一
• .vscode/settings.json: VS Code / Cursor 特有の「保存時フォーマッタ指定、ESLint / Biome のCode Action、拡張機能設定」を統一

VS CodeおよびCursorで .editorconfig を有効にするには、推奨拡張機能（extensions.json）に editorconfig.editorconfig を含めておきましょう。

手順4：Cursorとの設定共有と移行テクニック

AI機能を標準搭載したエディタ「Cursor」を採用するエンジニアが急増しています。VS CodeとCursorが混在するチームでの設定共有と移行方法を解説します。

Cursorでの .vscode 設定の互換性

Cursorは VS Code（Code – OSS）をベースに構築されているため、.vscode/settings.json や .vscode/extensions.json をそのまま完全に認識し、自動適用してくれます。

つまり、リポジトリ内に .vscode フォルダを作成しておけば、VS Codeを使っているメンバーもCursorを使っているメンバーも全く同じ設定で開発が可能です。

VS Code から Cursor へのワンクリック設定移行

VS CodeからCursorへ乗り換えるメンバーがいる場合、VS Codeにインストールしていた拡張機能や個人設定をCursorへ直接インポートできます。

• Cursorを起動し、設定画面を開きます（ショートカット: Ctrl + Shift + J / Cmd + Shift + J）。
• 左メニューから「General」を選択し、「Account」または「VS Code Import」セクションを探します。
• 「Import」ボタンをクリックします。
• VS Codeの拡張機能、グローバル設定（settings.json）、キーバインド、スニペットが一括でCursorにコピーされます。

Cursor特有のAIルール設定との共存

Cursorでは、プロジェクト固有のコーディング規約やAIへのプロンプト指示を .cursor/rules/ ディレクトリ配下（または .cursorrules ファイル）に記述します。

• エディタ設定・フォーマッタ統一: .vscode/settings.json および .vscode/extensions.json
• AIコーディングのルール・指示: .cursor/rules/*.mdc または .cursorrules

このように役割が明確に分かれているため、両方のフォルダを同じリポジトリに配置してGit管理することで、エディタ設定とAI設定の両方をチーム全員で共有できます。

手順5：Git管理（.gitignore）のベストプラクティス

.vscode ディレクトリ内には、チームで共有すべきファイルと、個人のローカル環境固有でGit管理に含めるべきではないファイルが混在します。

共有すべきファイルと除外すべきファイルの分類

ファイル	共有可否	理由
.vscode/extensions.json	共有（コミット対象）	プロジェクト推奨拡張機能を全員に共有するため
.vscode/settings.json	共有（コミット対象）	プロジェクト共通のエディタ・フォーマッタ設定のため
.vscode/launch.json	条件付き共有	共通のデバッグ構成（Node.jsデバッグ等）があれば共有
.vscode/tasks.json	条件付き共有	共通のビルド・実行タスクがあれば共有
.vscode/*.local.json	除外（gitignore）	個人固有のパスやオーバーライド設定
.vscode/workspace.json	除外（gitignore）	エディタ内部の状態キャッシュ

.gitignore の推奨記述例

プロジェクトの .gitignore には、以下のように記述するのがおすすめです。

# 個人用VS Code設定の除外
.vscode/*

# チームで共有する設定ファイルのみ追跡を許可
!.vscode/settings.json
!.vscode/extensions.json
!.vscode/launch.json
!.vscode/tasks.json

# 個人用ローカル設定ファイル
.vscode/*.local.json

この指定を行うことで、新しく生成される一時ファイルや個人用設定が誤ってGitにコミットされるのを防ぎつつ、チーム共有設定だけを確実にバージョン管理できます。

うまくいかない場合の確認ポイント

設定を配置したのに自動フォーマットや拡張機能がうまく動作しない場合は、以下のポイントを確認してください。

1. 保存時にフォーマットが動かない

以下の原因が考えられます。

• デフォルトフォーマッタの指定漏れ: editor.defaultFormatter が正しく設定されているか確認してください（Prettierなら esbenp.prettier-vscode、Biomeなら biomejs.biome）。
• 拡張機能が未インストール: extensions.json に書いただけでは自動インストールされません。拡張機能ビュー（Ctrl + Shift + X）で拡張機能が有効化されているか確認してください。
• 他のフォーマッタとの競合: 複数のフォーマッタ拡張機能が有効になっている場合、言語別設定（[typescript] など）で明示的に指定してください。

2. Prettier と ESLint が競合して無限ループや警告が出る

PrettierとESLintのルールが衝突している場合、Prettierのフォーマット結果に対してESLintが警告を出し続ける現象が起きます。

対処法:

• プロジェクトの package.json（devDependencies）に eslint-config-prettier を導入し、ESLint設定ファイルで Prettier と重複するルールを無効化してください。
• または、リンターとフォーマッタが一体化した Biome への移行を検討してください。

3. Windows環境で改行コードが CRLF に勝手に変わってしまう

.vscode/settings.json に "files.eol": "\n" を指定していても、Gitのクローン時にWindows側で自動変換されてしまう場合があります。

対処法:

• リポジトリのルートに .gitattributes を作成し、以下を記述してコミットします。

* text=auto eol=lf

これにより、OS環境に関わらずGitチェックアウト時の改行コードがLFに固定されます。

よくある質問（FAQ）

Q1: extensions.json に記述すれば自動でインストールされますか？

A: 自動的にはインストールされません。セキュリティ上の理由から、VS CodeおよびCursorはユーザーの許可なく拡張機能をバックグラウンドで強制インストールしない仕様になっています。プロジェクトを開いたときのポップアップ通知で「すべてインストール」をクリックするか、拡張機能ビューで @recommended を検索して手動インストールを行ってください。

Q2: 個人のキーバインドやカラーテーマは上書きされてしまいますか？

A: 上書きされません。.vscode/settings.json はプロジェクト固有のフォーマットやエディタ挙動（インデント・改行等）のみを定義するため、各メンバーがグローバル設定（User Settings）に設定しているお気に入りのカラーテーマ、フォント、キーボードショートカットはそのまま維持されます。

Q3: モノレポ構成（Frontend / Backend が同居）の場合はどこに .vscode を置くべきですか？

A: リポジトリのルートディレクトリに .vscode を配置するのが基本です。もしFrontend（TypeScript/Biome）とBackend（Go/Python）で設定を細かく分けたい場合は、マルチルートワークスペース（.code-workspace ファイル）を利用するか、サブディレクトリ単位で設定を行うことが可能です。

まとめ

VS CodeおよびCursorの設定・拡張機能をチームで統一することで、コードスタイルの衝突を防ぎ、開発チーム全体の生産性を大幅に向上させることができます。

今回の重要ポイント：

• .vscode/extensions.json で推奨拡張機能（recommendations）と非推奨拡張機能（unwantedRecommendations）を定義する
• .vscode/settings.json で改行コードLF、末尾空白削除、保存時自動フォーマット（Prettier/ESLint/Biome）を統一する
• .editorconfig を併用して他エディタを使うメンバーとも足並みを揃える
• Cursorは .vscode 設定を完全サポートしており、ワンクリックでVS Code設定をインポート可能
• .gitignore で個人用設定を除外しつつ、チーム共有設定のみをコミットする

まずは .vscode フォルダを作成し、最小限の基本設定からチームのリポジトリに導入してみてください。

参考情報

• VS Code 公式ドキュメント：Workspace Settings
• VS Code 公式ドキュメント：Workspace Recommended Extensions
• Cursor 公式ドキュメント：Migrating from VS Code
• Biome 公式ドキュメント：VS Code Extension
• EditorConfig 公式サイト