VS Codeのワークスペース設定を使いこなそう｜プロジェクトごとに環境を最適化する方法

プログラミング・IT

「プロジェクトごとにVS Codeの設定を変えたい」
「フォルダ単位で拡張機能やフォーマッタの動作を切り替えたい」

そんなときに役立つのがVS Codeのワークスペース設定です。

VS Codeのワークスペース設定を使えば、以下のようなことが簡単にできます：

  • 特定のプロジェクトだけ保存時にLintを走らせる
  • プロジェクトごとにPythonの仮想環境を切り替える
  • フォーマッタをプロジェクト単位で変える
  • チーム開発での設定統一

この記事では、VS Codeのワークスペース設定の基本から、実際の開発で役立つカスタマイズ例まで、初心者にもわかるように解説します。

スポンサーリンク

VS Codeのワークスペース設定とは？

ワークスペース設定の種類と優先度

VS Codeの設定には大きく3種類あり、それぞれ適用される範囲が異なります。

設定の種類影響範囲保存場所優先度
ユーザー設定VS Code全体settings.json（グローバル）低
ワークスペース設定現在開いているプロジェクト.vscode/settings.json中
フォルダ設定特定フォルダのみ.code-workspace高

ポイント： 優先度が高い設定が低い設定を上書きします。

ワークスペース設定のメリット

プロジェクト固有の環境を作れる

各プロジェクトに最適な設定を適用できるため、開発効率が大幅に向上します。

チーム開発での設定統一

.vscode/settings.json をGitで管理することで、チーム全体で同じ開発環境を共有できます。

他のプロジェクトに影響しない

設定がプロジェクト単位で独立しているため、他の作業に悪影響を与えません。

ワークスペース設定を作る方法

基本的なワークスペース設定の作成

ステップ1: フォルダを開く

VS Codeでプロジェクトフォルダを開きます。

ファイル → フォルダーを開く → プロジェクトフォルダを選択

ステップ2: 設定ファイルを作成

プロジェクトルートに .vscode フォルダと settings.json を作成します。

フォルダ構成例

my-project/
├── .vscode/
│   └── settings.json
├── src/
└── package.json

ステップ3: 設定を記述

.vscode/settings.json に設定を記述します。

基本的な設定例

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true
}

コマンドパレットから設定する方法

より簡単に設定を変更する方法もあります。

手順

  1. Ctrl + Shift + P（Mac: Cmd + Shift + P）でコマンドパレットを開く
  2. “Preferences: Open Workspace Settings” を選択
  3. GUI画面で設定を変更

この方法で変更した設定は自動的に .vscode/settings.json に保存されます。

よく使うワークスペース設定例

エディタの基本設定

インデントとフォーマット設定

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.trimAutoWhitespace": true
}

表示設定

{
  "editor.wordWrap": "on",
  "editor.lineNumbers": "on",
  "editor.renderWhitespace": "boundary",
  "editor.rulers": [80, 120]
}

言語別のフォーマッタ設定

JavaScript/TypeScript プロジェクト

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "prettier.semi": false,
  "prettier.singleQuote": true
}

Python プロジェクト

{
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "python.defaultInterpreterPath": "./venv/bin/python",
  "python.terminal.activateEnvironment": true
}

HTML/CSS プロジェクト

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

Linter とコード品質の設定

ESLint設定（JavaScript/TypeScript）

{
  "eslint.enable": true,
  "eslint.workingDirectories": ["./"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Python Linter設定

{
  "python.linting.enabled": true,
  "python.linting.flake8Enabled": true,
  "python.linting.pylintEnabled": false,
  "python.linting.flake8Args": [
    "--max-line-length=88",
    "--ignore=E203,W503"
  ]
}

ターミナルとシェル設定

デフォルトシェルの設定

{
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.fontSize": 14
}

作業ディレクトリの設定

{
  "terminal.integrated.cwd": "${workspaceFolder}",
  "terminal.integrated.env.windows": {
    "PATH": "${workspaceFolder}/node_modules/.bin;${env:PATH}"
  }
}

複数フォルダのワークスペース管理

.code-workspaceファイルの作成

複数のプロジェクトを1つのワークスペースで管理したい場合は、.code-workspace ファイルを使います。

手順

  1. メニュー → ファイル → ワークスペースにフォルダーを追加
  2. 必要なフォルダをすべて追加
  3. ファイル → 名前を付けてワークスペースを保存

.code-workspaceファイルの例

{
  "folders": [
    {
      "name": "フロントエンド",
      "path": "./frontend"
    },
    {
      "name": "バックエンド", 
      "path": "./backend"
    },
    {
      "name": "共通ライブラリ",
      "path": "./shared"
    }
  ],
  "settings": {
    "editor.formatOnSave": true,
    "files.exclude": {
      "**/node_modules": true,
      "**/.git": true
    }
  }
}

フォルダ別の個別設定

各フォルダに独自の設定も適用できます。

{
  "folders": [
    {
      "name": "React App",
      "path": "./frontend",
      "settings": {
        "eslint.workingDirectories": ["./frontend"],
        "typescript.preferences.includePackageJsonAutoImports": "on"
      }
    },
    {
      "name": "Node.js API",
      "path": "./backend",
      "settings": {
        "node.defaultNodePath": "./backend/node_modules"
      }
    }
  ]
}

実用的な設定テンプレート

React + TypeScript プロジェクト向け

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.workingDirectories": ["./"],
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "emmet.includeLanguages": {
    "typescriptreact": "html"
  },
  "files.exclude": {
    "**/node_modules": true,
    "**/build": true,
    "**/.git": true
  }
}

Python Django プロジェクト向け

{
  "python.defaultInterpreterPath": "./venv/bin/python",
  "python.terminal.activateEnvironment": true,
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "python.linting.enabled": true,
  "python.linting.flake8Enabled": true,
  "python.linting.flake8Args": [
    "--max-line-length=88",
    "--ignore=E203,W503"
  ],
  "files.associations": {
    "*.html": "django-html"
  },
  "files.exclude": {
    "**/__pycache__": true,
    "**/*.pyc": true,
    "**/venv": true
  }
}

Vue.js プロジェクト向け

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "emmet.includeLanguages": {
    "vue-html": "html"
  }
}

拡張機能の推奨設定

プロジェクト固有の拡張機能推奨

.vscode/extensions.json ファイルを作成して、プロジェクトに必要な拡張機能を推奨できます。

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-python.python",
    "ms-python.black-formatter",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next"
  ]
}

拡張機能の無効化

特定のプロジェクトで拡張機能を無効にしたい場合：

{
  "extensions.ignoreRecommendations": true,
  "typescript.suggest.autoImports": false
}

トラブルシューティング

よくある問題と解決方法

問題1: 設定が反映されない

原因： ユーザー設定が優先されている

解決方法：

{
  // ワークスペース設定で明示的に上書き
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

問題2: フォーマッタが動作しない

原因： 拡張機能がインストールされていない

解決方法：

  1. 必要な拡張機能をインストール
  2. .vscode/extensions.json で推奨拡張機能を指定

問題3: パスの設定がうまくいかない

原因： 相対パスの基準点が違う

解決方法：

{
  // ${workspaceFolder} を使用
  "python.defaultInterpreterPath": "${workspaceFolder}/venv/bin/python",
  "eslint.workingDirectories": ["${workspaceFolder}"]
}

設定の検証方法

現在の設定を確認

  1. Ctrl + Shift + P → “Preferences: Open Settings (JSON)”
  2. ワークスペース設定タブを選択
  3. 設定内容を確認

設定の優先度を確認

コマンドパレットで “Developer: Reload Window” を実行して設定を再読み込み

チーム開発での活用方法

Gitでの設定共有

.gitignoreの設定

# VS Code設定は共有するが、個人設定は除外
.vscode/settings.json
!.vscode/extensions.json
!.vscode/launch.json
!.vscode/tasks.json

README.mdでの説明

## 開発環境のセットアップ

1. VS Codeで本プロジェクトを開く
2. 推奨拡張機能をインストール（自動で促される）
3. 設定が自動で適用されます

設定のバージョン管理

プロジェクトの成長に合わせて設定も進化させましょう：

  • 新しいツールの導入時に設定を追加
  • チームのフィードバックを受けて設定を調整
  • 定期的に不要な設定を削除

まとめ

VS Codeのワークスペース設定を使えば、以下のメリットが得られます：

  • .vscode/settings.json にプロジェクト固有の設定を保存
  • フォーマッタやLinter をプロジェクト単位で管理
  • 複数フォルダをまとめた .code-workspace でさらに柔軟な環境構築
  • チーム開発での設定統一 により生産性向上

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました