VS Code Setup Best Practices

A comprehensive guide for maximizing VS Code in Angular development. Covers recommended extensions, workspace settings, debug configuration, and team-wide settings sharing.

1. Essential Extensions

Angular Official

Extension	ID	Features
Angular Language Service	`Angular.ng-template`	Template autocomplete, type checking, error detection, Go to Definition
Angular Schematics	`cyrilletuzi.angular-schematics`	GUI for Angular CLI commands (generate components from right-click menu, etc.)

Nx

Extension	ID	Features
Nx Console	`nrwl.angular-console`	GUI wrapper for Nx/Angular CLI, project graph display, generator execution

Code Quality

Extension	ID	Features
ESLint	`dbaeumer.vscode-eslint`	Real-time lint display and auto-fix
Prettier	`esbenp.prettier-vscode`	Code formatter
EditorConfig	`EditorConfig.EditorConfig`	Unify basic editor settings across team (indentation, line endings, etc.)

Productivity

Extension	ID	Features
Angular Snippets	`johnpapa.Angular2`	Angular code snippet collection
Auto Import	`steoates.autoimport`	Automatic imports for used types and modules
Move TS	`stringham.move-ts`	Auto-update import paths when moving files
Path Intellisense	`christian-kohler.path-intellisense`	File path autocomplete

2. Recommended Extensions

Testing

Extension	Features
Jest Runner / Karma Test Adapter	Individual test execution and debugging
Test Explorer UI	Visual test results in tree view

Git

Extension	ID	Features
GitLens	`eamodio.gitlens`	Git history, blame, per-line change author, diff comparison
Git Graph	`mhutchie.git-graph`	Visual branch structure graph

Styling

Extension	ID	Features
SCSS IntelliSense	`mrmlnc.vscode-scss`	SCSS variable and mixin completion
Tailwind CSS IntelliSense	`bradlc.vscode-tailwindcss`	Tailwind class completion (when using Tailwind CSS)

Documentation

Extension	Features
Document This	Auto-generate JSDoc/TSDoc (`/** + Enter`)
Todo Tree	List all TODO/FIXME comments

RxJS

Extension	Features
RxJS Explorer	Visualize RxJS operator marble diagrams (for learning and debugging)

Creating .vscode/extensions.json and committing it to the repository automatically suggests recommended extensions when team members open the project.

.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"
  ]
}

Property	Description
`recommendations`	List of recommended extension IDs for the project
`unwantedRecommendations`	Unrecommended extensions (e.g., deprecated lint plugins)

4. Workspace Settings (settings.json)

Including .vscode/settings.json in your repository shares unified editor settings across the team.

.vscode/settings.json
{
  // Formatter settings
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,

  // Code actions on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

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

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

  // Hidden files
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/.angular": true
  },

  // Search exclusions
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.angular": true,
    "**/coverage": true
  }
}

Settings Explained

Setting	Description
`editor.formatOnSave`	Format with Prettier on file save
`source.fixAll.eslint`	Run ESLint auto-fix on save
`source.organizeImports`	Organize import statements on save
`typescript.preferences.importModuleSpecifier`	`relative` prioritizes relative path imports
`files.exclude`	Hide unnecessary directories from explorer
`search.exclude`	Exclude directories from search results

5. Debug Configuration (launch.json)

Chrome Debugging

.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 (Attach to existing Chrome)",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Debugging Tips

Ensure TypeScript source maps (sourceMap: true) are enabled in tsconfig.json
Breakpoints can be set in components (.ts), services, interceptors, etc.
Breakpoints cannot be set directly in templates (.html) — place breakpoints in component class methods instead

Test Debugging

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

SSR Debugging

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

Start the Node.js process with the --inspect flag during SSR execution, then attach with this configuration.

6. Development Tasks with 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"]
    }
  ]
}

Key Points

Item	Description
`isBackground`	Set for watch-mode tasks like `ng serve`
`problemMatcher`	Display compile errors in real-time in VS Code's "Problems" panel
`group.kind: "build"`	Execute instantly with `Ctrl+Shift+B` as the build task

For Nx projects, simply replace npx ng with npx nx for the same functionality.

7. Custom Snippets

Creating snippet files under .vscode/ provides project-specific code templates.

.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 Tips

Angular Language Service is the most important extension for Angular development.

Key Features

Feature	Description
Template completion	Autocomplete component properties, methods, and pipes in templates
Template type checking	Real-time type error display when `strictTemplates` is enabled
Go to Definition	Jump from template to component class properties and methods
Find References	Cross-reference search between templates and component classes
Rename (F2)	Synchronously rename properties in templates and classes
Quick Fixes	Auto-add missing imports, auto-generate undefined properties

Enabling strictTemplates

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

Enabling strictTemplates makes template type checking stricter, helping catch bugs early.

9. Nx Console Deep Dive

Installing Nx Console adds a dedicated panel to VS Code's sidebar.

Key Features

Feature	Description
Generator GUI	Fill in options via forms to generate components, services, and libraries
Project Graph	Display interactive dependency graphs within VS Code
Task Execution	Run build / serve / test / lint with one click
affected Display	Visually confirm projects affected by current changes
Target Execution	Select and run targets from a tree view
Nx Cloud Status	Check CI/CD execution status and cache hit rates

tip

The Nx Console generator GUI displays all available options as form fields, so you don't need to memorize CLI options.

10. Multi-Root Workspaces

.code-workspace Files

For large projects like Nx monorepos, you can leverage VS Code's multi-root workspaces.

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
    }
  }
}

Tips

Different settings can be applied per folder (launch.json, tasks.json separation)
Focus on only relevant projects within a large monorepo
Prepare workspace files tailored to each team member's area of responsibility

11. Keyboard Shortcut Optimization

Frequently Used Shortcuts for Angular Development

Shortcut	Function
`Ctrl+.`	Quick Fix / Code Actions (add imports, etc.)
`F12`	Go to Definition (navigate between template and component)
`Shift+F12`	Find All References (including templates)
`F2`	Rename (synchronized between template and class)
`Ctrl+Shift+P` → `Angular`	Execute Angular-related commands
`Ctrl+Shift+B`	Execute build task
Ctrl+`	Toggle terminal
`Ctrl+Shift+M`	Show Problems panel (view compile errors)
`Ctrl+P`	Quick file open
`Ctrl+Shift+O`	Navigate symbols within file

Custom Keybindings

You can add convenient keybindings for Angular development in keybindings.json.

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

12. Performance Optimization

Strategies for improving VS Code performance in large-scale projects.

files.watcherExclude Configuration

Exclude unnecessary directories from file watching to reduce CPU and memory usage.

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

TypeScript Memory Limit Adjustment

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

Disable Unnecessary Extensions

You can disable unnecessary extensions on a per-workspace basis
Extensions for other frameworks (React/Vue) that aren't needed in Angular projects can improve performance when disabled

Angular Language Service Optimization

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

Summary

By committing all VS Code configuration files (extensions.json, settings.json, launch.json, tasks.json) to the repository, you can build a unified development environment across the entire team. This also greatly streamlines onboarding for new members.

1. Essential Extensions​

Angular Official​

Nx​

Code Quality​

Productivity​

2. Recommended Extensions​

Testing​

Git​

Styling​

Documentation​

RxJS​

3. Team Sharing with extensions.json​

4. Workspace Settings (settings.json)​

Settings Explained​

5. Debug Configuration (launch.json)​

Chrome Debugging​

Debugging Tips​

Test Debugging​

SSR Debugging​

6. Development Tasks with tasks.json​

Key Points​

7. Custom Snippets​

8. Angular Language Service Tips​

Key Features​

Enabling strictTemplates​

9. Nx Console Deep Dive​

Sidebar UI​

Key Features​

10. Multi-Root Workspaces​

.code-workspace Files​

Tips​

11. Keyboard Shortcut Optimization​

Frequently Used Shortcuts for Angular Development​

Custom Keybindings​

12. Performance Optimization​

files.watcherExclude Configuration​

TypeScript Memory Limit Adjustment​

Disable Unnecessary Extensions​

Angular Language Service Optimization​

1. Essential Extensions

Angular Official

Nx

Code Quality

Productivity

2. Recommended Extensions

Testing

Git

Styling

Documentation

RxJS

3. Team Sharing with extensions.json

4. Workspace Settings (settings.json)

Settings Explained

5. Debug Configuration (launch.json)

Chrome Debugging

Debugging Tips

Test Debugging

SSR Debugging

6. Development Tasks with tasks.json

Key Points

7. Custom Snippets

8. Angular Language Service Tips

Key Features

Enabling strictTemplates

9. Nx Console Deep Dive

Sidebar UI

Key Features

10. Multi-Root Workspaces

.code-workspace Files

Tips

11. Keyboard Shortcut Optimization

Frequently Used Shortcuts for Angular Development

Custom Keybindings

12. Performance Optimization

files.watcherExclude Configuration

TypeScript Memory Limit Adjustment

Disable Unnecessary Extensions

Angular Language Service Optimization