用VSCode开发Angular项目需安装Angular Language Service等扩展、用ng new初始化项目后code .打开、配置Chrome调试器，并善用生成组件/跳转/保存即修复等快捷操作。
用 VSCode 开发 Angular 项目很顺手，关键在于装对扩展、配好环境、理清工作流。不需要重装系统或折腾复杂工具链，按步骤来就行。
安装必要扩展
VSCode 本身不内置 Angular 支持，得靠扩展补足智能提示、模板校验和调试能力：
- Angular Language Service：官方扩展，提供组件绑定、管道、指令的实时检查和跳转，.html 模板里写 *ngIf 或 [formControl] 都能自动提示和报错
- Auto Import：保存时自动补全 import 语句，避免手动翻模块路径（比如输完 HttpClient，它就帮你加上 import { HttpClient } from '@angular/common/http';）
- Prettier + ESLint：代码格式统一靠 Prettier，语法/规范检查靠 ESLint（推荐用 @angular-eslint/eslint-plugin 规则集）
- 可选但实用：Path Intellisense（路径自动补全）、Bracket Pair Colorizer（括号着色，对多层嵌套模板很友好）
初始化项目与打开方式
别直接用 VSCode 打开空文件夹再手动建文件。标准做法是：
- 终端执行 ng new my-app --routing --style=scss（加参数一步生成路由和 SCSS 支持）
- 进到项目目录后，运行 code . 启动 VSCode（确保已把 code 命令加入系统 PATH）
- 首次打开时，VSCode 可能弹窗问是否信任工作区——点“是”，否则 TypeScript 和 Angular 服务可能不启动
调试配置（Chrome 浏览器）
不用切到浏览器按 F12 查源码。VSCode 内置调试器可直接断点调试 TypeScript：
- 点击左侧调试图标 → 选择“创建 launch.json 文件” → 选“Chrome”环境
- 自动生成的配置里，确保 url 是 http://localhost:4200，webRoot 设为 ${workspaceFolder}/src
- 在 component.ts 里打个断点，按 F5 启动，VSCode 会自动打开 Chrome 并加载应用，断点命中后可看变量、单步执行
常用快捷与习惯建议
提升效率的小细节，用熟了比插件还管用：
- 生成新组件：命令面板（Ctrl+Shift+P）→ 输入 Angular: Generate Component，回车后填名字，自动建 ts/html/scss/spec 四个文件并注册到模块
- 快速跳转：在 HTML 模板里按 Ctrl+鼠标左键，能直接跳到对应 component.ts 的方法或属性定义处（依赖 Angular Language Service）
- 保存即修复：在设置里搜 format on save 和 eslint auto fix on save，全勾上，Ctrl+S 就完成格式化+错误修正
- 终端整合：VSCode 底部集成终端，用 Ctrl+` 呼出，直接运行 ng serve、ng test，不用切窗口
基本上就这些。配置一次，后续新建项目复用设置，开发体验会明显更稳更快。
