Angular开发VSCode扩展只需三个核心：Angular Language Service（必须，需匹配@angular/core大版本）、ESLint（推荐）、Prettier（建议）；禁用冗余扩展可提升启动与热更新速度。
装哪些扩展才不算浪费内存
Angular 开发在 VSCode 里不是装越多扩展越好，核心就三个：Angular Language Service（必须）、ESLint（推荐）、Prettier（可选但建议）。其他像“Angular Snippets”或“TypeScript Import Sorter”属于锦上添花，项目小、团队没约定时反而容易干扰自动补全。
常见错误是装了 Auto Import 又开 Angular Language Service 的 auto-import，结果 import 语句重复插入两次。关掉前者，只留后者即可——它对 @Component、HttpClient 这类 Angular 特有符号的识别更准。
-
Angular Language Service必须匹配你项目中@angular/core的大版本（如 v17 项目不能用 v16 的插件） - 如果打开
.ts文件后没有模板语法高亮或ngIf提示，大概率是插件没激活——重启 VSCode 或运行命令面板里的Angular: Restart Angular Language Service - 禁用所有非必要扩展后，VSCode 启动变快，
ng serve热更新延迟也更低（尤其 Windows + WSL 场景）
tsconfig.json 和 jsconfig.json 到底该配哪个
Angular 项目默认用 tsconfig.json，VSCode 会自动读取它做类型检查和路径跳转。除非你在项目里混写了纯 JS 模块（比如 legacy 插件），否则根本不需要 jsconfig.json —— 它不仅无效，还会让 VSCode 误判模块解析逻辑，导致 import 路径标红但实际能跑。
关键配置项只有两个："baseUrl" 和 "paths"。如果你用了 src/app/core 这种别名路径，必须确保 tsconfig.json 里有：
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@core/*": ["app/core/*"]
}
}
漏掉 "baseUrl"，VSCode 就认不出 @core/http 指向哪；写错路径（比如漏了末尾 /*），跳转就失效。这类问题不会报错，但你会反复点进 any 类型定义里出不来。
模板文件（.html）里为啥不提示组件输入输出
根本原因是 Angular Language Service 默认只在 .ts 文件里激活模板支持，而 VSCode 对 .html 的语言模式识别可能卡在 “HTML” 而不是 “Angular HTML”。手动切一次：右下角点击当前语言模式（显示 “HTML”），选 “Configure File Association for '.html'” → 设为 Angular HTML。
- 如果项目用了
ng build --aot，但 VSCode 里模板仍不提示@Input()，检查tsconfig.app.json是否被"enableIvy": true覆盖（v13+ 默认开启，老项目可能关着） - 第三方库组件（如
@ng-bootstrap/ng-bootstrap）不提示，大概率是没在app.module.ts里imports对应模块——VSCode 不会扫描node_modules里的元数据，只认你显式引入的 - 模板里写
<my-comp [data]="xxx">却没提示，先确认my-comp组件类里真有@Input() data: string;，且不是用declare或动态 key 声明的
调试时断点不命中？别急着重装 Debugger for Chrome
Angular CLI 启动的开发服务器默认用 sourceMap，但 VSCode 的 Debugger for Chrome 扩展需要明确告诉它“去哪找 map 文件”。直接改 .vscode/launch.json 是最稳的：
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch localhost",
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*"
}
}
漏掉 sourceMapPathOverrides，断点会打在打包后的 main.js 上，而不是你写的 component.ts；webRoot 写成 ${workspaceFolder}（没加 /src），断点就永远停在 index.html 里。
另外，Angular v16+ 默认启用 esbuild 构建，它生成的 sourcemap 格式和 Webpack 不完全兼容。如果断点持续失效，临时切回 Webpack：在 angular.json 里加 "builder": "@angular-devkit/build-angular:browser"，并删掉 "useLegacyBuilder": true 以外的 esbuild 相关字段。
最难调的其实是模板绑定里的异步管道——{{ user$ | async }} 断点打在 user$ 声明处没用，得打在 async 管道内部的订阅逻辑里，而那部分代码在 node_modules 下，VSCode 默认不加载源码。这时候只能靠 console.log 配合 tap 操作符观察流状态。
