Getting Started with Angular in Visual Studio Code

VS Code is the default Angular editor for good reason: the Angular Language Service makes templates type-safe, the integrated terminal runs the CLI, and the debugger steps through TypeScript in the browser. This getting-started guide goes from empty editor to a running, debuggable Angular app — the workflow, the shortcuts, and the configuration that makes VS Code feel purpose-built for Angular.

Getting Started with Angular in Visual Studio Code

From zero to running app

With the environment set up (Node 24 via a version manager, Angular CLI), the whole loop lives in VS Code's integrated terminal (Ctrl+`):

ng new my-app --style css
code my-app        # open the workspace
ng serve

http://localhost:4200 hot-reloads on every save. Keep ng serve running in one terminal tab permanently; open a second tab for generate commands — VS Code's split terminal (Ctrl+Shift+5) shows both.

The workspace that matters day to day:

src/
├── app/
│   ├── app.ts            root component (class)
│   ├── app.html          its template
│   ├── app.config.ts     application providers
│   └── app.routes.ts     routes
├── main.ts               bootstrap
└── styles.css            global styles

Current Angular scaffolds name files app.ts/app.html (not the older app.component.ts) and uses standalone components throughout — no NgModules anywhere.

The Angular Language Service changes everything

Install the Angular Language Service extension first — it's the difference between editing templates as strings and editing them as code:

Autocomplete in HTML for component properties, inputs, and pipes.
Red squiggles in templates for typos ({{ prodcut.name }} is an error at edit time, not a blank page at runtime).
F12 go-to-definition from a template expression into the TypeScript class, and from a component tag into its definition.
Hover types in templates — see that product() is Product, not guesswork.

Pair it with "strictTemplates": true in tsconfig.json's angularCompilerOptions so CI enforces what the editor shows.

Generating code without leaving the editor

The CLI scaffolds; VS Code makes it fluent:

ng generate component product-list
ng generate service cart
ng generate directive highlight

Each generates the class, template, styles, and a spec file, wired with current defaults. Angular's own VS Code extension pack adds right-click "Generate Component" in the explorer if you prefer clicks; most developers end up faster in the terminal.

Snippet-driven editing covers the rest: type a-component (John Papa's Angular Snippets extension) or lean on Copilot-style completion; either way the Language Service validates the result immediately.

Debugging: breakpoints in TypeScript

No extension needed — VS Code's built-in JavaScript debugger attaches to the browser. .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug Angular app",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

With ng serve running, F5 launches Chrome; breakpoints set in .ts files bind through source maps. You step through component code, inspect signals' current values, and watch input() values change on interaction — far faster than console.log archaeology. For quick inspection without the debugger, Angular DevTools (browser extension) shows the component tree and change-detection profile.

Tasks, tests, and the rest of the loop

Tests: ng test runs unit tests in watch mode — keep it in a third terminal during refactors. The spec files the CLI generates are real tests, not clutter; deleting them is a choice you'll re-litigate later.
Problems panel (Ctrl+Shift+M) aggregates TypeScript and template errors across the project — after a big rename, it's your to-do list.
Auto-imports: accept the lightbulb when using a component in a template — VS Code adds it to the imports array of your standalone component, the step everyone forgets manually.
Format on save with Prettier + the ESLint extension (via ng add angular-eslint) keeps diffs about behavior, not whitespace.

A five-minute first component

The full loop, editor to browser:

ng generate component hello

// src/app/hello/hello.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `
    <h2>Hello {{ name() }}</h2>
    <input #box (input)="name.set(box.value)" placeholder="Your name" />
  `,
})
export class Hello {
  readonly name = signal('Angular');
}

Add <app-hello /> to app.html (accept the auto-import), save, and the browser updates as you type into the input — signals driving the view with no ceremony. That tight save-see loop, with types checked end to end, is the actual reason this stack is pleasant.

From here, the components tutorial goes deeper into component anatomy, and the complete working examples for this series are in the companion repository — clone, npm install, ng serve.