为提升 VSCode 与 Angular 协同开发体验，需依次完成五步：一、安装 Angular Language Service、TypeScript Hero 和 Auto Import 扩展并重启；二、配置 TypeScript 使用工作区版本；三、将 .html 文件关联为 angular-html 模式；四、创建 launch.json 配置 Chrome 调试；五、启用保存时自动格式化并设置默认 formatter。
如果您正在使用 Visual Studio Code 进行 Angular 应用开发，可能会遇到扩展缺失、调试配置异常或 TypeScript 语言服务响应迟缓等问题。以下是提升 VSCode 与 Angular 协同开发体验的关键配置与操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装核心扩展
VSCode 本身不内置 Angular 开发支持，需通过扩展补足语法高亮、代码补全、模板校验及调试能力。这些扩展共同构成 Angular 开发的基础支撑层。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中依次输入并安装以下三个扩展：Angular Language Service、TypeScript Hero、Auto Import。
3、安装完成后，重启 VSCode 使 Angular Language Service 的语言服务器完全加载。
二、配置工作区 TypeScript 设置
TypeScript 配置直接影响组件类与模板间的类型推导精度。Angular CLI 生成的 tsconfig.json 是基础，但 VSCode 需明确识别其路径以启用智能提示。
1、在项目根目录下确认存在 tsconfig.json 和 tsconfig.app.json 文件。
2、打开 VSCode 命令面板（Cmd+Shift+P），输入并选择 TypeScript: Select TypeScript Version。
3、选择 Use Workspace Version，确保编辑器调用项目 node_modules 中的 TypeScript 实例。
三、启用 Angular 模板内联诊断
Angular Language Service 默认对 .html 模板文件提供绑定语法、管道、指令等实时校验。该功能依赖于 VSCode 对 Angular 项目结构的识别，需手动激活模板语言模式。
1、打开任意 Angular 组件的模板文件（如 app.component.html）。
2、点击右下角当前语言模式标识（通常显示为 HTML），在弹出菜单中选择 Configure File Association for '.html'。
3、在输入框中键入 angular-html 并回车确认。
四、配置 launch.json 启动调试
VSCode 调试 Angular 应用需借助 Chrome Debugger 扩展与本地 ng serve 进程通信。launch.json 定义了调试会话的入口、端口与源映射规则。
1、在项目根目录下创建 .vscode/launch.json 文件（若不存在该目录则先新建）。
2、填入以下 JSON 内容：{"version":"0.2.0","configurations":[{"type":"pwa-chrome","request":"launch","name":"Launch localhost","url":"http://localhost:4200/","webRoot":"${workspaceFolder}/src","sourceMapPathOverrides":{"webpack:///./~/*":"/node_modules/*","webpack:///./src/*":"${webRoot}/*","webpack:///./src/*":"${webRoot}/*"}}]}。
3、启动 Angular 开发服务器：ng serve，再在 VSCode 中按 Ctrl+Shift+D 切换到运行视图，点击绿色三角形启动调试。
五、设置保存时自动修复
Angular 项目普遍集成 ESLint 或 TSLint，启用保存时自动格式化可避免手动执行 lint --fix，保持代码风格统一且减少提交前检查负担。
1、在 VSCode 设置中搜索 format on save，勾选该项。
2、打开项目根目录下的 .editorconfig，确认已包含 indent_style = space 与 indent_size = 2。
3、在用户设置 JSON（Cmd+, → 打开设置 JSON）中添加："editor.defaultFormatter": "esbenp.prettier-vscode"，前提是已安装 Prettier 扩展。
