最新常用Angular开发人员的10大VS Code扩展合集

2021年11月10日21:12:31 发表评论 1,009 次浏览

Angular VS Code扩展合集简介:VS Code 是最常用的代码编辑器,它提供了一系列对开发人员编写代码非常有帮助的功能。Visual Studio Code 扩展有助于轻松进行开发并支持开发工作流程。VS Code哪些Angular扩展最好?本文列出了一些重要的 Angular 或使用 Angular 时的 Visual Studio Code 扩展。

最新常用Angular开发人员的10大VS Code扩展合集
Angular VS Code扩展合集

VS Code Angular插件推荐合集主要内容如下:

  • Path Intellisense
  • Angular Snippets
  • Angular2-Switcher
  • Angular Files
  • REST Client
  • JSON to TS
  • Angular Language Service
  • Angular2-Inline
  • TSLint
  • Material Icon Theme

1. Path Intellisense 路径智能感知 

在处理一个项目时,我们必须管理多个文件。很多时候记住文件名并不容易,尤其是当文件名带有连字符时。为了避免这个问题,我们在 VS Code 中有 Path Intellisense 扩展。它会自动完成文件名。当你开始输入时,它会建议文件路径,帮助你轻松添加所需文件。如果有任何隐藏文件,路径智能感知也可以帮助使它们可见。

2. Angular Snippets

VS Code哪些Angular扩展最好?它是最流行的 Angular 相关 VS Code 扩展。这个 Visual Studio Code 扩展通过为 TypeScript 和 HTML 添加 Angular 的片段,节省了大量时间。它可以与 vs code 0.10.1 版本或更高版本一起使用。我们可以使用键盘快捷键直接从编辑器中激活代码片段,从而使工作更加轻松。

3. Angular2-Switcher

Angular VS Code扩展合集:此扩展有助于在 angular 中特定组件的 CSS、ts 和 HTML 文件之间导航。安装 Angular Switcher 后使用一些快捷键,可以快速从一个文件切换到另一个文件。下面给出了 Windows 和 MAC 操作系统的切换组合键。

 Windows苹果系统
切换到 HTML Alt+OShift+Alt+O
切换到 CSSAlt+IShift+Alt+I
切换到 tsAlt+U Shift+Alt+U
切换到spec.tsAlt+PShift+Alt+P

4. Angular Files

当你在项目中创建组件时,此扩展将为组件内的所有文件创建样板代码。因此,无需为所有这些新创建的文件从头开始编写代码。

5. REST Client

VS Code Angular插件推荐合集:作为一名开发者,在使用 Angular 的过程中,我们不得不频繁地访问一些后端 API,以通过 HTTP 请求获取或发送一些数据。我们可以在 VS Code 本身中完成所有这些工作,而不是使用任何第三方工具(如邮递员)。它允许你发送 HTTP 请求。你可以直接在 Visual Studio Code 中查看响应。它可以防止你在第三方工具和代码编辑器之间切换。

6. JSON to TS

它将 JSON 对象转换为打字稿接口。如果你在后端有一些 API 并且它返回 JSON 对象并且你需要将它们强制转换以响应前端的 POJO,那么这个扩展对每个人来说都是一个福音。它将解析整个 JSON 并从中创建 POJO。

7. Angular Language Service

这实际上是 angular 开发人员的一个非常重要的扩展。它至少需要 16.5.0 版本的 Visual Studio Code 编辑器,并提供一些有用的功能,如 Angular 代码完成、Angular 诊断消息、快速信息和转到定义。

8. Angular2-Inline

VS Code哪些Angular扩展最好?在使用 Angular 时,此扩展对组件的 CSS 和 HTML 文件很有帮助。它提供语法突出显示,从而提高代码的可读性。它还有助于代码完成,并在将鼠标悬停在其上时提供有关内联 HTML 的信息。当我们使用反引号字符 (`) 来定义内联模板或内联样式表时,则使用此扩展来处理内容。

9. TSLint

Angular VS Code扩展合集:TSLint 有助于提高代码可读性、可维护性和纠正功能错误。安装后,它会在存在问题的代码部分下创建一条波浪线,并在将鼠标悬停在其上时显示警告和错误。你将能够看到检测到的错误列表并修复它们。

10. Material Icon Theme

VS Code Angular插件推荐合集:这个扩展是可选的,但非常美观。它为文件和文件夹提供了不同的图标。你可以根据需要自定义这些图标的颜色。它使用 Google 的 Material Design 库来插入图标。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: