VS Code 需配置三大核心扩展（Angular Language Service、ES7+ snippets、ESLint）及 tsconfig.json 启用 "composite": true，禁用 TS 自动导入，调试用 launch 模式并确保扩展版本与 Angular 版本匹配。
VS Code 本身不内置 Angular 支持，但通过合理配置扩展和工作区设置，能获得接近 IDE 级别的开发体验——关键不是装得越多越好，而是选对几个核心插件并配好 tsconfig.json 和 angular.json 的联动。
必须安装的三个扩展（缺一不可）
Angular 项目依赖 TypeScript 和 CLI 工程结构，以下扩展提供基础语言服务与上下文感知：
-
Angular Language Service：提供组件模板中的指令补全、@Input/@Output跳转、管道参数提示。注意：它依赖项目根目录下存在有效的tsconfig.json和angular.json，否则会报 “No Angular project found” -
ES7+ React/Redux/React-Native snippets（可选但推荐）：虽然名字带 React，但它提供的ng前缀代码片段（如ngcc,ngpipe）对 Angular 开发效率提升明显 -
Prettier或ESLint（二选一）：Angular CLI 默认用eslint，建议优先配ESLint+@angular-eslint/eslint-plugin，避免和 CLI 的ng lint冲突
tsconfig.json 必须启用 "composite": true
Angular Language Service 在 VS Code 中识别模块路径、符号跳转的前提是 TypeScript 启用复合项目支持。若你看到模板中 *ngIf 报红或无法跳转到组件类，大概率是这里没配：
{
"compilerOptions": {
"composite": true,
"types": ["node", "jasmine"]
}
}
注意："composite": true 仅对 tsconfig.json（非 tsconfig.app.json）生效；如果项目有多个 tsconfig.*.json，确保主配置文件被 angular.json 的 "tsConfig" 字段指向。
禁用 TypeScript 自带的自动导入（避免污染 NgModule）
VS Code 默认开启 typescript.preferences.autoImportSuggestions，但它常把 RxJS 操作符、Injectable 等直接插入组件文件顶部——这在 Angular 中是错误的，因为 Injectable 应该只出现在服务里，而操作符应统一用 pipe() 导入。解决方式：
- 在工作区设置（
.vscode/settings.json）中显式关闭："typescript.preferences.autoImportSuggestions": false
- 改用
Angular Snippets扩展提供的ngi（import）片段手动补全，更可控
调试时 launch.json 的常见陷阱
VS Code 调试 Angular 应用依赖 Chrome Debugging Protocol，但默认配置容易失败：
- 不要用
ng serve启动后再 Attach —— 改为用launch模式直接启动："type": "pwa-chrome", "request": "launch", "url": "http://localhost:4200", "webRoot": "${workspaceFolder}/src" - 确保
ng serve运行时加--host 0.0.0.0（尤其 Docker 或 WSL 场景），否则 Chrome 调试器连不上 - 如果断点不命中，检查浏览器是否启用了 “Disable cache (while DevTools is open)” —— Angular 的 HMR 机制依赖缓存控制，关掉反而导致 sourcemap 加载失败
最常被忽略的一点：Angular Language Service 扩展的版本必须与项目 Angular 版本对齐。比如 Angular 16 项目用了 v17 的扩展，模板语法高亮和绑定表达式校验就会失效——别只看“最新版”，要看扩展页面的兼容表格。
