必须安装的VSCode扩展有：①Angular Language Service；②TypeScript支持（如JavaScript and TypeScript Nightly）；③Pretterr+EditorConfig。可选但推荐Auto Rename Tag和Path Intellisense。
VSCode 本身不“支持 Angular”，它靠扩展和配置来适配 Angular 开发流程。真正起作用的是 Angular Language Service 扩展、npm 脚本集成、以及对 tsconfig.json 和 angular.json 的正确识别。
必须安装的 VSCode 扩展有哪些？
只装一个 Angular Language Service 是不够的，它依赖 TypeScript 支持，且需要配套工具链感知项目结构：
-
Angular Language Service（官方，提供模板语法高亮、组件跳转、*ngIf指令补全） -
TypeScript + Webpack Extension Pack或至少确保JavaScript and TypeScript Nightly已启用（VSCode 内置 TS 有时滞后，Angular 16+ 推荐用 Nightly） -
Prettier+EditorConfig for VS Code（避免团队格式冲突，尤其.prettierrc要和angular.json中的"style": "scss"匹配） - 可选但强烈建议：
Auto Rename Tag（改<app-header>时自动同步闭合标签）、Path Intellisense（路径导入补全）
为什么 ng serve 启动后修改 HTML/TS 文件没热更新？
常见原因是 VSCode 的文件保存策略或 Angular CLI 的监听机制被干扰：
- 检查 VSCode 设置里是否启用了
"files.autoSave": "afterDelay"—— 这会导致保存延迟，ng serve可能错过变更；建议设为"onFocusChange"或手动Ctrl+S - 确认终端中运行的是
ng serve --host 0.0.0.0 --port 4200而非默认 localhost，否则 WSL 或 Docker 环境下可能监听失败 - Windows 用户若用 Git Bash，
ng serve有时无法触发 chokidar 监听；换用 VSCode 内置 Terminal（PowerShell 或 CMD）更稳 - 如果修改了
angular.json中的"sourceRoot"，但tsconfig.json的"baseUrl"没同步更新，TypeScript 语言服务会静默失效，表现为模板中component.ts的属性不提示
如何快速定位模板里的绑定错误（比如 {{ user.name }} 报错）？
这类错误不会在浏览器控制台直接报出，而是由 Angular Language Service 在编辑器内标红，但前提是：
- 组件类中必须显式声明属性类型，例如：
user: User | undefined;，不能只写user; - 确保
tsconfig.json中启用了"strict": true和"strictTemplates": true（Angular CLI 默认开启，但老项目可能关了） - 如果用了
async管道，模板中要加非空断言或*ngIf守卫，否则user$ | async后的.name会被标红 —— 这是类型安全特性，不是 bug - 重启 VSCode 的 TS 服务：按
Ctrl+Shift+P→ 输入Typescript: Restart TS server，比重启整个编辑器快
export class UserComponent implements OnInit {
user$: Observable<User>;
constructor(private service: UserService) {}
ngOnInit() {
this.user$ = this.service.getUser();
}
}
// 模板中应写：
// <div *ngIf="user$ | async as user">{{ user.name }}</div>
// 而不是直接 {{ (user$ | async)?.name }} —— 后者在 strictTemplates 下会警告
Angular 的类型深度绑定让 VSCode 成为高效开发工具，但所有智能提示都建立在 tsconfig.json、angular.json 和实际代码类型定义的一致性上。一旦出现“该提示的不提示，不该报错的报错”，优先检查这三个文件的路径、模块解析和严格模式设置是否咬合。
