メインコンテンツまでスキップ

VS Code環境構築のベストプラクティス

Angular開発においてVS Codeを最大限に活用するための環境構築ガイドです。推奨拡張機能の導入から、ワークスペース設定、デバッグ構成、チーム全体での設定共有まで網羅します。

1. 必須拡張機能​

Angular 公式・準公式​

拡張機能ID機能
Angular Language ServiceAngular.ng-templateテンプレート内の自動補完、型チェック、エラー検出、Go to Definition
Angular Schematicscyrilletuzi.angular-schematicsAngular CLIコマンドのGUI実行（右クリックメニューからコンポーネント生成等）

Nx​

拡張機能ID機能
Nx Consolenrwl.angular-consoleNx/Angular CLI のGUIラッパー、プロジェクトグラフ表示、ジェネレータ実行

コード品質​

拡張機能ID機能
ESLintdbaeumer.vscode-eslintリアルタイムLint表示・自動修正
Prettieresbenp.prettier-vscodeコードフォーマッター
EditorConfigEditorConfig.EditorConfigチーム間のエディタ基本設定統一（インデント、改行等）

生産性向上​

拡張機能ID機能
Angular Snippetsjohnpapa.Angular2Angular用コードスニペット集
Auto Importsteoates.autoimport使用した型やモジュールの自動インポート
Move TSstringham.move-tsファイル移動時にimportパスを自動更新
Path Intellisensechristian-kohler.path-intellisenseファイルパスの自動補完

2. 推奨拡張機能​

テスト​

拡張機能機能
Jest Runner / Karma Test Adapterテストの個別実行・デバッグ
Test Explorer UIテスト結果の視覚的な表示とツリービュー

Git​

拡張機能ID機能
GitLenseamodio.gitlensGit履歴、blame、行ごとの変更者表示、変更比較
Git Graphmhutchie.git-graphブランチ構造の視覚的なグラフ表示

スタイリング​

拡張機能ID機能
SCSS IntelliSensemrmlnc.vscode-scssSCSS変数・ミックスインの補完
Tailwind CSS IntelliSensebradlc.vscode-tailwindcssTailwindクラスの補完（Tailwind CSS使用時）

ドキュメント​

拡張機能機能
Document ThisJSDoc/TSDocの自動生成（/** + Enter）
Todo TreeTODO/FIXME コメントを一覧表示

RxJS​

拡張機能機能
RxJS ExplorerRxJSオペレータのマーブルダイアグラムを視覚化（学習・デバッグ用）

3. extensions.json によるチーム共有​

.vscode/extensions.json を作成してリポジトリにコミットすると、チームメンバーがリポジトリを開いた際に推奨拡張機能が自動的に提案されます。

.vscode/extensions.json
{
  "recommendations": [
    "Angular.ng-template",
    "nrwl.angular-console",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "EditorConfig.EditorConfig",
    "johnpapa.Angular2",
    "christian-kohler.path-intellisense",
    "eamodio.gitlens"
  ],
  "unwantedRecommendations": [
    "ms-vscode.vscode-typescript-tslint-plugin"
  ]
}
プロパティ説明
recommendationsプロジェクトで推奨する拡張機能のIDリスト
unwantedRecommendations非推奨の拡張機能（古いLintプラグインなど）

4. ワークスペース設定（settings.json）​

.vscode/settings.json をリポジトリに含めることで、チーム全体で統一されたエディタ設定を共有できます。

.vscode/settings.json
{
  // フォーマッター設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

  // 保存時のコードアクション
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

  // TypeScript 設定
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.tsdk": "node_modules/typescript/lib",

  // Angular Language Service
  "angular.enable.strictMode": true,

  // ファイル非表示設定
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/.angular": true
  },

  // 検索除外
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.angular": true,
    "**/coverage": true
  }
}

設定項目の解説​

設定説明
editor.formatOnSaveファイル保存時にPrettierでフォーマット
source.fixAll.eslint保存時にESLintの自動修正を実行
source.organizeImports保存時にimport文を整理
typescript.preferences.importModuleSpecifierrelative で相対パスインポートを優先
files.excludeエクスプローラーから不要なディレクトリを非表示
search.exclude検索結果から除外するディレクトリ

5. デバッグ構成（launch.json）​

Chrome でのデバッグ​

.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve (Chrome)",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "ng serve",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*"
      }
    },
    {
      "name": "ng serve (既存のChromeにアタッチ)",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

デバッグのポイント​

  • TypeScriptのソースマップ（sourceMap: true）が tsconfig.json で有効になっていることを確認
  • ブレークポイントはコンポーネント（.ts）、サービス、インターセプターなどに設定可能
  • テンプレート（.html）へのブレークポイントは直接設定できないため、コンポーネントクラスのメソッドにブレークポイントを設置

テストのデバッグ​

.vscode/launch.json（追加構成）
{
  "name": "Debug Tests (Jest)",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/node_modules/jest/bin/jest",
  "args": [
    "--runInBand",
    "--config",
    "jest.config.ts"
  ],
  "console": "integratedTerminal"
}

SSR のデバッグ​

.vscode/launch.json（SSR構成）
{
  "name": "Debug SSR (Node.js)",
  "type": "node",
  "request": "attach",
  "port": 9229,
  "restart": true,
  "localRoot": "${workspaceFolder}",
  "remoteRoot": "."
}

SSR実行時に --inspect フラグを付けてNode.jsプロセスを起動し、この構成でアタッチします。

6. tasks.json による開発タスクの定義​

.vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "ng serve",
      "type": "shell",
      "command": "npx ng serve",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "pattern": {
          "regexp": "\\((\\d+),(\\d+)\\)",
          "line": 1,
          "column": 2
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Compiling",
          "endsPattern": "Compiled successfully"
        }
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "ng build",
      "type": "shell",
      "command": "npx ng build",
      "group": "build",
      "problemMatcher": ["$tsc"]
    },
    {
      "label": "ng test",
      "type": "shell",
      "command": "npx ng test --watch=false",
      "group": "test",
      "problemMatcher": []
    },
    {
      "label": "ng lint",
      "type": "shell",
      "command": "npx ng lint",
      "group": "none",
      "problemMatcher": ["$eslint-stylish"]
    }
  ]
}

ポイント​

項目説明
isBackgroundng serve のようなウォッチモードのタスクに設定
problemMatcherコンパイルエラーをVS Codeの「問題」パネルにリアルタイム表示
group.kind: "build"Ctrl+Shift+B でビルドタスクとして即実行

Nxプロジェクトの場合は npx ng を npx nx に置き換えるだけで同様に動作します。

7. カスタムスニペットの作成​

.vscode/ 配下にスニペットファイルを作成すると、プロジェクト固有のコードテンプレートを利用できます。

.vscode/angular.code-snippets
{
  "Angular Component": {
    "prefix": "ng-component",
    "scope": "typescript",
    "body": [
      "import { Component } from '@angular/core';",
      "",
      "@Component({",
      "  selector: 'app-${1:name}',",
      "  standalone: true,",
      "  imports: [${2:}],",
      "  templateUrl: './${1:name}.component.html',",
      "  styleUrl: './${1:name}.component.scss'",
      "})",
      "export class ${3:Name}Component {",
      "  $0",
      "}"
    ],
    "description": "Angular standalone component"
  },
  "Angular Service": {
    "prefix": "ng-service",
    "scope": "typescript",
    "body": [
      "import { Injectable } from '@angular/core';",
      "",
      "@Injectable({",
      "  providedIn: 'root'",
      "})",
      "export class ${1:Name}Service {",
      "  $0",
      "}"
    ],
    "description": "Angular injectable service"
  },
  "Angular Test (Component)": {
    "prefix": "ng-test-component",
    "scope": "typescript",
    "body": [
      "import { ComponentFixture, TestBed } from '@angular/core/testing';",
      "import { ${1:Name}Component } from './${2:name}.component';",
      "",
      "describe('${1:Name}Component', () => {",
      "  let component: ${1:Name}Component;",
      "  let fixture: ComponentFixture<${1:Name}Component>;",
      "",
      "  beforeEach(async () => {",
      "    await TestBed.configureTestingModule({",
      "      imports: [${1:Name}Component]",
      "    }).compileComponents();",
      "",
      "    fixture = TestBed.createComponent(${1:Name}Component);",
      "    component = fixture.componentInstance;",
      "    fixture.detectChanges();",
      "  });",
      "",
      "  it('should create', () => {",
      "    expect(component).toBeTruthy();",
      "  });",
      "  $0",
      "});"
    ],
    "description": "Angular component test scaffold"
  },
  "RxJS switchMap Pattern": {
    "prefix": "rx-switchmap",
    "scope": "typescript",
    "body": [
      "this.${1:source$}.pipe(",
      "  switchMap(${2:value} => this.${3:service}.${4:method}(${2:value})),",
      "  takeUntilDestroyed(this.destroyRef)",
      ").subscribe(${5:result} => {",
      "  $0",
      "});"
    ],
    "description": "RxJS switchMap with takeUntilDestroyed"
  }
}

8. Angular Language Service の活用​

Angular Language Service は Angular 開発において最も重要な拡張機能です。

主な機能​

機能説明
テンプレート補完コンポーネントのプロパティ、メソッド、パイプをテンプレート内で自動補完
テンプレート型チェックstrictTemplates 有効時にテンプレートの型エラーをリアルタイム表示
Go to Definitionテンプレートからコンポーネントクラスのプロパティやメソッドにジャンプ
Find Referencesテンプレートとコンポーネントクラス間の参照を横断的に検索
リネーム（F2）テンプレートとクラスのプロパティ名を同期してリネーム
クイックフィックス不足しているimportの自動追加、未定義プロパティの自動生成

strictTemplates の有効化​

tsconfig.json
{
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true
  }
}

strictTemplates を有効にすると、テンプレート内の型チェックが厳密になり、バグの早期発見に繋がります。

9. Nx Console の詳細活用​

サイドバー UI​

Nx Console をインストールすると、VS Codeのサイドバーに専用パネルが追加されます。

主な機能​

機能説明
ジェネレータ GUIフォーム形式でオプションを入力し、コンポーネント・サービス・ライブラリを生成
プロジェクトグラフインタラクティブな依存関係グラフをVS Code上で表示
タスク実行build / serve / test / lint をワンクリックで実行
affected 表示現在の変更に影響を受けるプロジェクトを視覚的に確認
ターゲット実行各プロジェクトのターゲットをツリービューから選択して実行
Nx Cloud ステータスCI/CDの実行状況やキャッシュヒット率を確認
ヒント

Nx Consoleのジェネレータ GUIでは、利用可能なすべてのオプションがフォームとして表示されるため、CLIのオプションを暗記しなくても使えます。

10. マルチルートワークスペース​

.code-workspace ファイル​

Nxモノレポなどの大規模プロジェクトでは、VS Codeのマルチルートワークスペースを活用できます。

my-project.code-workspace
{
  "folders": [
    {
      "name": "Shell App",
      "path": "apps/shell"
    },
    {
      "name": "Shared UI",
      "path": "libs/ui"
    },
    {
      "name": "Workspace Root",
      "path": "."
    }
  ],
  "settings": {
    "files.exclude": {
      "**/node_modules": true,
      "**/dist": true
    }
  }
}

活用ポイント​

  • フォルダーごとに異なる設定を適用可能（launch.json、tasks.json の分離）
  • 巨大なモノレポの中で、関連するプロジェクトだけにフォーカスして作業
  • チームメンバーの担当領域に合わせたワークスペースファイルを用意

11. キーボードショートカットの最適化​

Angular 開発でよく使うショートカット​

ショートカット機能
Ctrl+.クイックフィックス / コードアクション（import追加など）
F12Go to Definition（テンプレート ↔ コンポーネント間の移動）
Shift+F12Find All References（テンプレートを含む参照検索）
F2リネーム（テンプレートとクラスで同期）
Ctrl+Shift+P → AngularAngular関連コマンドの実行
Ctrl+Shift+Bビルドタスクの実行
Ctrl+`ターミナルの表示/非表示
Ctrl+Shift+M問題パネルの表示（コンパイルエラーの確認）
Ctrl+Pファイルのクイックオープン
Ctrl+Shift+Oファイル内のシンボル移動

カスタムキーバインドの設定​

keybindings.json に Angular 開発で便利なキーバインドを追加できます。

keybindings.json
[
  {
    "key": "ctrl+shift+g",
    "command": "workbench.action.tasks.runTask",
    "args": "ng serve"
  }
]

12. パフォーマンスの最適化​

大規模プロジェクトでVS Codeの動作が重くなった場合の改善策です。

files.watcherExclude の設定​

ファイル監視から不要なディレクトリを除外して、CPU・メモリ使用量を削減します。

.vscode/settings.json
{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true,
    "**/.angular/**": true,
    "**/coverage/**": true,
    "**/.nx/**": true
  }
}

TypeScript のメモリ制限の調整​

.vscode/settings.json
{
  "typescript.tsserver.maxTsServerMemory": 4096
}

不要な拡張機能の無効化​

  • ワークスペース単位で不要な拡張機能を無効化できます
  • 特に、他のフレームワーク用の拡張機能（React/Vue向けなど）はAngularプロジェクトでは無効にすることでパフォーマンスが改善されます

Angular Language Service の最適化​

.vscode/settings.json
{
  "angular.log": "off",
  "angular.forceStrictTemplates": true
}
まとめ

VS Codeの設定ファイル（extensions.json、settings.json、launch.json、tasks.json）をすべてリポジトリにコミットすることで、チーム全体で統一された開発環境を構築できます。新しいメンバーのオンボーディングも大幅に効率化されます。