VS Code 是最常用的代码编辑器，它提供了一系列对开发人员编写代码非常有帮助的功能。 Visual Studio Code 扩展有助于轻松进行开发并支持开发工作流程。本文列出了一些重要的 Angular 或使用 Angular 时的 Visual Studio Code 扩展。
- 路径智能感知
- 角度片段
- Angular2-Switcher
- 角度文件
- REST客户端
- JSON 转 TS
- Angular 语言服务
- Angular2-内联
- TSLint
- 材质图标主题
1. 路径智能感知
在处理一个项目时，我们必须管理多个文件。很多时候记住文件名并不容易，尤其是当文件名带有连字符时。为了避免这个问题，我们在 VS Code 中有 Path Intellisense 扩展。它会自动完成文件名。当您开始输入时，它会建议文件路径，帮助您轻松添加所需文件。如果有任何隐藏文件，路径智能感知也可以帮助使它们可见。
2. 角度片段
它是最流行的 Angular 相关 VS Code 扩展。这个 Visual Studio Code 扩展通过为 TypeScript 和 HTML 添加 Angular 的片段，节省了大量时间。它可以与 vs code 0.10.1 版本或更高版本一起使用。我们可以使用键盘快捷键直接从编辑器中激活代码片段，从而使工作更加轻松。
3. Angular2-Switcher
此扩展有助于在 angular 中特定组件的 CSS、ts 和 HTML 文件之间导航。安装 Angular Switcher 后使用一些快捷键，可以快速从一个文件切换到另一个文件。下面给出了 Windows 和 MAC 操作系统的切换组合键。
| Windows | macOS | |
|---|---|---|
| Switch to HTML | Alt+O | Shift+Alt+O |
| Switch to CSS | Alt+I | Shift+Alt+I |
| Switch to ts | Alt+U | Shift+Alt+U |
| Switch to spec.ts | Alt+P | Shift+Alt+P |
4. 角度文件
当您在项目中创建组件时，此扩展将为组件内的所有文件创建样板代码。因此，无需为所有这些新创建的文件从头开始编写代码。
5. REST 客户端
作为一名开发者，在使用 Angular 的过程中，我们不得不频繁地访问一些后端 API，以通过 HTTP 请求获取或发送一些数据。我们可以在 VS Code 本身中完成所有这些工作，而不是使用任何第三方工具（如邮递员）。它允许您发送 HTTP 请求。您可以直接在 Visual Studio Code 中查看响应。它可以防止您在第三方工具和代码编辑器之间切换。
6. JSON 转 TS
它将 JSON 对象转换为打字稿接口。如果您在后端有一些 API 并且它返回 JSON 对象并且您需要将它们强制转换以响应前端的 POJO，那么这个扩展对每个人来说都是一个福音。它将解析整个 JSON 并从中创建 POJO。
7. Angular 语言服务
这实际上是 angular 开发人员的一个非常重要的扩展。它至少需要 16.5.0 版本的 Visual Studio Code 编辑器，并提供一些有用的功能，如 Angular 代码完成、Angular 诊断消息、快速信息和转到定义。
8. Angular2-内联
在使用 Angular 时，此扩展对组件的 CSS 和 HTML 文件很有帮助。它提供语法突出显示，从而提高代码的可读性。它还有助于代码完成，并在将鼠标悬停在其上时提供有关内联 HTML 的信息。当我们使用反引号字符(`) 来定义内联模板或内联样式表时，则使用此扩展来处理内容。
9. TSLint
TSLint 有助于提高代码可读性、可维护性和纠正功能错误。安装后，它会在存在问题的代码部分下创建一条波浪线，并在将鼠标悬停在其上时显示警告和错误。您将能够看到检测到的错误列表并修复它们。
10. Material Icon 主题
这个扩展是可选的，但非常美观。它为文件和文件夹提供了不同的图标。您可以根据需要自定义这些图标的颜色。它使用 Google 的 Material Design 库来插入图标。