“拥有好的工具很重要,但以正确的方式使用这些工具也很重要”——Wallace D

[](https://res.cloudinary.com/practicaldev/image/fetch/s--_ugg1xv9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/eau1jkuz2b96c57c9dw6.jpg)

以下是我在 2022 年为 Angular 开发人员准备的 10 大 VS 代码扩展,它们可以显着节省时间并简化您的开发工作。提到的所有扩展都可以在 VS Code 市场中获得,最好的部分是所有扩展都可以免费使用。

1\。适用于 JavaScript、Python、Typescript、PHP、Go、Java、Ruby 等的 Tabnine AI 自动完成功能:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--6_7S3NbF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/l5z0yd5c7hujhoaqmkum.PNG)

Tabnine 通过从数百万个存储库中学习的模式提供代码指导来加速开发,并且可以对其进行定制以在您的存储库上进行训练。它使用机器学习模型,并接受了超过 10 亿行具有许可许可证的开源代码的培训。

您还可以通过授予 Tabnine 访问 GitHub、GitLab 和 Bitbucket 存储库的权限来允许 Tabnine 在您的存储库上进行训练。它也是安全可靠的,因为为您的团队创建的学习算法是严格排他的 - 制作并仅提供给您批准的团队成员。 Tabnine 的 AI 代码完成模型可以在您的机器上本地运行。

简而言之,它会分析您的代码/存储库、训练和生成模型,通过提供 AI 代码建议和代码补全,您可以更快地编写代码。如果您的工作有很多重复性任务,或者团队应该遵循特定类型的编码标准或风格,这将非常有用。

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

Tabnine AI 自动完成

2\。 Prettier- 代码格式化程序:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--wIvbnTz5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/gkifberfknek9g2jz5a7.PNG)

Prettier -Visual Studio Code 的代码格式化程序是一个固执己见的代码格式化程序。下载量超过 2100 万次,是最受欢迎的 VS Code 扩展之一。

设置完成后,它会在您每次保存文件时通过添加空格、换行和对齐代码来格式化您的代码,从而减少您花费在格式化代码上的大量时间。一旦你习惯了这个扩展,考虑到它为你做的工作量和你使用它节省的时间,你很难摆脱它。它适用于打字稿。

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

Prettier- 代码格式化程序

3\。 Angular2切换器:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--b1FdNLR7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/jys9ivqvmlv229i45jpq.PNG)

在处理 Angular 时,需要经常在 HTML、typescript、spec 和 CSS 文件之间导航。尽管这看起来很简单,但在处理多个组件时实际上是一项耗时的任务,在这些组件中需要不断地在文件之间切换。

Angular2-switcher 提供了一些快捷键,使我们能够在 HTML、typescript 和 CSS 文件之间快速轻松地切换,从而简化了这个过程。尽管 VS Code 具有在不同选项卡之间切换的内置快捷方式,但它可以工作,但它没有像 angular2-switcher 那样在组件的文件之间切换的快捷方式。

您还可以进一步自定义它以并排打开文件或切换顺序。从长远来看,这个扩展将为您节省大量的时间和文件之间的切换工作

这些是您需要知道的快捷方式:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--7VoXZRYY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/e8sb3qdlywclfa73h8tu.PNG)

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

Angular2 切换器

4\。 GitLens - Git 增压:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--4-Riyemh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/ovw87uj68knvbdns9iej.PNG)

我们中的大多数人作为一个团队来处理项目,在处理大规模和广泛的项目时会变得非常拥挤,这就是 GitLens 的用武之地。

GitLens 可帮助您在 VS Code 本身中一目了然地可视化代码作者身份。简单来说,这个扩展允许你逐行查看代码的作者、谁编辑了谁、谁创建了它、更改历史和提交消息。它使您能够了解代码在由多个开发人员处理后如何增长以及代码库如何发展。

下载量超过 1400 万,您已经可以猜到它在开发人员中的受欢迎程度。对于那里的开发人员来说,这绝对是救命稻草。

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

GitLens - Git 增压

5. Angular 语言服务:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--qCcWaGvm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/hbib57rgv5oxxr2uno1i.PNG)

这是一个非常酷的扩展,每个 Angular 开发人员都必须拥有。此扩展为 Angular 模板(包括内联模板和外部模板)提供了丰富的编辑体验。它帮助开发人员在 Angular 模板中获取完成、错误、提示和导航。

要充分利用此扩展,您必须在 tsconfig.json 中设置 strictTemplates。如下所示:

"angularCompilerOptions": { "strictTemplates": true }

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

Angular 语言服务

6\。角度片段:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--IXgyarSy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/l6vxxhnjxdanla81fgub.PNG)

Angular 片段允许您为打字稿和 HTML 包含 Angular 的片段。它可以节省大量时间,因为您不必输入全部内容而是使用代码片段。

在 typescript 中,它对于生成诸如组件、模块、指令、服务、管道、可观察、路由路径等片段非常有用。在 HTML 中,它在提供诸如 *ngFor、*ngSwitch、*ngIf、[ngClass]、[(ngModal)] 等片段时非常有用。

注意:确保根据您在机器上使用的角度版本下载正确版本的角度片段。

下面是角度片段如何工作的示例:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--zFrLuX0u--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/eeg4ier3cm0s5vq392bf.gif)

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

角度片段

7\。 ESLint:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--WVFYL7NR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/ue7nyd70wijsppb7zpl6.PNG)

如果您已经使用 angular 和 typescript 工作了一段时间,那么您很可能会遇到“TSLint”。此扩展名与“ESLint”相同,但仅适用于 Typescript。最近,随着 Typescript 与 ESLint 的集成,此扩展已被弃用。

ESLint 是一种用于识别和报告在 ECMAScript/JavaScript/Typescript 代码中发现的模式的工具。 ESLint 可用于根据您已配置的规则以及其中的内置规则来识别和报告代码中的模式,并创建一个错误更少且更一致的代码库。

您可以根据自己的标准和要求设置很多配置。它是一个开源工具,您可以在 GitHub 存储库中找到有关它的更多信息:

https://github.com/eslint/eslint和官网:https://eslint.org/

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

ESLint

8. JSON 到 TS:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--cnCOtjVT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/q0rm56dt6gjt3ouk2f9k.PNG)

JSON to TS 是一个很酷的扩展,如果您正在处理具有复杂嵌套的大型 JSON 文件,它可以为您节省大量时间。它所做的是,它自己创建基于 JSON 的 typescript 接口。酷对!您无需浪费时间一一输入。它还根据您提供的 JSON 提供它们的类型。这为我创造了奇迹。

您可以在复制后使用命令(Shift + Ctrl + Alt + V)直接从剪贴板进行转换,也可以粘贴 JSON,然后通过选择它然后使用命令(Shift + Ctrl + Alt + S)进行转换)

这是一个如何工作的例子:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--PLOq5lnw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/38tv125sutnnmhkghl9v.gif)

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

JSON 到 TS

9\。自动重命名标签:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--IKoyazSF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/zahrl4vzrdpa3s4qo72i.PNG)

如果您是一个经常编辑 HTML 文件的人,那么这就是您需要的扩展名。当初始标签被重命名时,它会自动重命名成对的 HTML/XML 标签。当您处理一个包含大量 HTML 标记并涉及复杂的标记嵌套的 HTML 文件时,它会非常有用。

这是它如何工作的示例:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--8NhGOeTJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/qscd9r9uytfxjydpiwev.gif)

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

自动重命名标签

10\。材料图标主题

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Nqu0ymOc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/wd36xw6d2j6il9hyeb39.PNG)

与其他扩展不同,此扩展用于增强文件的外观。此扩展程序使您可以将 Google 的材料图标用于不同的文件扩展名,从而帮助您快速找出文件之间的差异。您还可以根据自己的喜好自定义这些图标、图标的颜色等。这使您的项目文件看起来很酷且与众不同。

**您可以直接通过您的 VSCode 安装它。

如果您想了解有关此扩展程序的更多信息,请点击以下链接:**

材质图标主题

结论:

谢谢阅读。我希望所有这些扩展都能让您最大限度地提高工作效率并节省时间。尽管您可能需要一些时间来习惯某些扩展并将它们纳入您的日常开发工作中。这是一个缓慢而渐进的过渡,您将看到使用这些扩展程序节省的时间。

这些是我听过和使用过的扩展。如果您知道您一直在使用的任何其他酷且高效的 VSCode 扩展,请在评论中分享。

如果有任何拼写错误或语法错误,请原谅我,这是我的第一篇文章。谢谢!