首先安装angular Language Service、Prettier、ESLint和Debugger for chrome等插件，然后使用Angular CLI创建项目并运行ng serve，接着在vscode中配置launch.json文件实现浏览器调试，最后通过启用自动保存、使用CLI命令生成代码和设置Prettier为默认格式化工具等方式提升开发效率。

要在VSCode中高效开发和调试Angular项目，关键在于正确配置编辑器、安装必要插件，并设置调试环境。下面详细介绍如何完成这些步骤。

安装必要的扩展

打开VSCode后，前往扩展市场（Extensions）并安装以下推荐插件：

• Angular Language Service：提供模板语法高亮、智能补全和错误提示，极大提升开发体验。
• Prettier – Code formatter：统一代码风格，支持自动保存格式化。
• ESLint：集成代码检查，帮助发现潜在问题。
• Debugger for Chrome / Debugger for edge：用于浏览器端的断点调试。

初始化Angular项目

如果你还没有项目，使用Angular CLI创建一个新项目：

ng new my-angular-app
cd my-angular-app
ng serve

确保项目能正常运行后，在VSCode中打开该项目文件夹。

配置调试环境

点击左侧活动栏的“运行和调试”图标（虫子形状），然后点击“create a launch.json file”，选择Chrome或Edge作为调试环境。

面试猫

ai面试助手，在线面试神器，助你轻松拿Offer

39

查看详情

生成的launch.json文件应位于.vscode目录下，内容类似如下：

{ “version”: “0.2.0”, “configurations”: [ { “name”: “Launch Chrome against localhost”, “type”: “chrome”, “request”: “launch”, “url”: “http://localhost:4200”, “webRoot”: “${workspaceFolder}”, “sourceMap”: true } ] }

保存后，启动Angular开发服务器（ng serve），再点击“运行和调试”按钮，VSCode会自动打开浏览器并连接调试器。

此时你可以在组件、服务或模板中设置断点，查看变量值、调用栈等信息。

提升开发效率的小技巧

• 启用自动保存：File > auto Save，避免频繁手动保存。
• 使用ng generate component my-component等CLI命令快速创建结构化代码。
• 在settings.json中配置Prettier为默认格式化工具，保持团队编码一致。
• 开启typescript错误实时提示，及时发现类型问题。

基本上就这些。配置完成后，VSCode就能成为你开发Angular应用的强大工具。调试流畅，代码提示准确，开发体验明显提升。