您是否正在为您的 Web 应用寻找令人惊叹的 VS Code 扩展?然后这是 2022 年最佳 vs 代码扩展的惊人集合。

VS 代码扩展在现代 Web 开发中是必不可少的。它们基本上是用于构建现代 Web 应用程序的源代码编辑器。它是一个免费的开源编辑器。此外,它支持大量可用于 Web 应用程序开发的扩展。

VS Code 扩展允许您在安装中添加调试器、语言和工具,以支持您的开发工作流程。他们丰富的可扩展性模型让扩展作者可以直接插入 VS Code UI,并通过 VS Code 使用的相同 API 贡献功能。

因此,为了帮助您选择正确的扩展程序,这些扩展程序将比它们从您的系统中获取的资源增加更多的价值,我们列出了当今可用的最佳趋势扩展程序的广泛列表。虽然其中一些是众所周知的并且经常安装,但其他一些是使用 Visual Studio Code 的有经验的开发人员强烈推荐的扩展。

1\。吉特伦斯

[

](https://marketplace.visualstudio.com/items?itemNameu003deamodio.gitlens)

GitLens 只是帮助您更好地理解代码。快速了解更改行或代码块的人员、原因和时间。此外,它可以让您轻松探索代码库的历史和演变。

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。它还可以帮助您通过 Git 责备注释和代码镜头一目了然地可视化代码作者,无缝导航和探索 Git 存储库,通过强大的比较命令获得有价值的见解等等。

下载:5,972,117

2\。PRETTIER – 代码格式化程序

它是一个固执己见的代码格式化程序,它通过解析代码并使用自己的规则重新打印代码来强制执行一致的样式,这些规则考虑了最大行长,并在必要时包装代码。此外,它支持多种语言。它可以与大多数编辑器集成。

下载:7,676,738

3\。ESLINT

ESLint 静态分析您的代码以快速发现问题。 ESLint 静态分析您的代码以快速发现问题。它内置在大多数文本编辑器中,您可以将 ESLint 作为持续集成管道的一部分运行。 ESLint 修复是语法感知的,因此您不会遇到传统查找和替换算法引入的错误。

下载:10,236,293

4\。夸卡.JS

[

](https://marketplace.visualstudio.com/items?itemNameu003dWallabyJs.quokka-vscode)

Quokka.js 是用于快速 JavaScript / TypeScript 原型设计的开发人员生产力工具。当您键入时,运行时值会更新并显示在您的代码旁边的 IDE 中。它使 原型设计、学习和测试 JavaScript / TypeScript 快得惊人。默认情况下不需要配置,只需打开一个新的 Quokka 文件并开始试验

下载:754,978

5\。路径智能

[

](https://marketplace.visualstudio.com/items?itemNameu003dchristian-kohler.path-intellisense)

它为文件名添加了 Intellisense 样式的补全,让您轻松输入长路径名。如果语句是导入语句,则默认删除文件扩展名

下载:3,318,156

6.路径自动完成

[

](https://marketplace.visualstudio.com/items?itemNameu003dionutvmi.path-autocomplete)

此扩展为 VS Code 提供路径补全,因此您不必记住那些长路径。

下载:558,868

7\。VISUAL STUDIO INTELLICODE

[

](https://marketplace.visualstudio.com/items?itemNameu003dVisualStudioExptTeam.vscodeintellicode)

它旨在帮助开发人员和程序员提供智能代码完成建议。此外,它还默认支持 Python、TypeScript/JavaScript、React 和 Java。 IntelliCode 将您最有可能使用的内容放在完成列表的顶部,从而节省您的时间。 IntelliCode 建议基于 GitHub 上的数千个开源项目,每个项目都有超过 100 颗星。当与您的代码上下文相结合时,完成列表是为促进常见实践而量身定制的。

下载:6,401,943

8.进口成本

此扩展将在编辑器中内联显示导入包的大小。该扩展使用带有 babili-webpack-plugin 的 webpack 来检测导入的大小。

下载:710,298

9\。文件大小

它在编辑器的状态栏中显示焦点文件的大小。

下载:198,807

10\。实时服务器

[

](https://marketplace.visualstudio.com/items?itemNameu003dritwickdey.LiveServer)

通过单击启动开发本地服务器并通过一些额外功能观看实时更改

下载量:6,541,468

11\。项目经理

[

](https://marketplace.visualstudio.com/items?itemNameu003dalefragnani.project-manager)

它可以帮助您轻松访问您的项目,无论它们位于何处。不要再错过那些重要的项目了。

下载:1,090,254

12\。代码拼写检查器

[

](https://marketplace.visualstudio.com/items?itemNameu003dstreetsidesoftware.code-spell-checker)

用于多种编程语言的简单源代码拼写检查器。

下载:1,596,862

13\。支架对着色器

[

](https://marketplace.visualstudio.com/items?itemNameu003dCoenraadS.bracket-pair-colorizer)

此扩展允许用颜色识别匹配的括号。用户可以定义要匹配的标记以及要使用的颜色。

下载:1,154,226

14\。远程 — SSH

Remote – SSH 扩展允许您使用任何带有 SSH 服务器的远程机器作为您的开发环境。

下载:1,605,734

15\。休息客户端

[

](https://marketplace.visualstudio.com/items?itemNameu003dhumao.rest-client)

REST 客户端允许您发送 HTTP 请求并直接在 Visual Studio 代码中查看响应。

下载:1,025,700

16\。JAVASCRIPT (ES6) 代码片段

[

](https://marketplace.visualstudio.com/items?itemNameu003dxabikos.JavaScriptSnippets)

此扩展包含用于 Vs Code 编辑器的 ES6 语法中的 JavaScript 代码片段(同时支持 JavaScript 和 TypeScript)。

下载:3,789,793

17\。代码运行器

[

](https://marketplace.visualstudio.com/items?itemNameu003dformulahendry.code-runner)

Code Runner 是用于多种语言的运行代码片段或代码文件。通过文件资源管理器的上下文菜单运行当前活动的文本编辑器的代码文件很有用。此外,您可以在文本编辑器中运行选定的代码片段。它通过在集成终端中运行代码来支持 REPL

下载:4,549,546

18\。码头工人

Docker 扩展使从 Visual Studio Code 构建、管理和部署容器化应用程序变得容易。它还提供容器内 Node.js、Python 和 .NET Core 的一键式调试。该扩展识别使用最流行的开发语言(C#、Node.js、Python、Ruby、Go 和 Java)的工作区,并相应地自定义生成的 Docker 文件。 Docker 扩展为 VS Code 提供了一个 Docker 视图。 Docker 视图允许您检查和管理 Docker 资产:容器、图像、卷、网络和容器注册表

下载量:5,136,014

19\。更好的评论

[

](https://marketplace.visualstudio.com/items?itemNameu003daaron-bond.better-comments)

Better Comments 扩展将帮助您在代码中创建更人性化的注释。您将能够将您的注释分类为警报、查询、TODO、突出显示等。此外,注释掉的代码也可以设置样式以明确代码不应该存在,以及您想要的任何其他注释样式都可以在设置中指定。

下载:960,927

20\。Chrome 调试器

调试器是一个 VS Code 扩展,用于在 Google Chrome 浏览器或支持 Chrome DevTools 协议的其他目标中调试您的 JavaScript 代码。它有助于调试 eval 脚本、脚本标签、动态添加的脚本和设置断点,包括启用源映射时的源文件。

下载:1,617,311

21\。MARKDOWN ALL IN ONE

[

](https://marketplace.visualstudio.com/items?itemNameu003dyzhang.markdown-all-in-one)

Markdown 所需的一切(键盘快捷键、目录、自动预览等)。它支持以下降价语法:

• 通用标志

• 表,删除线和任务列表(来自 GitHub Flavored Markdown)

• 数学支持(来自 KaTeX)

• 正面

下载量:5,136,014

22\。搜索节点_模块

[

](https://marketplace.visualstudio.com/items?itemNameu003djasonnutter.search-node-modules)

搜索节点模块是 VS Code 的一个简单插件,可让您快速浏览项目 node_modules 目录中的文件。

下载:571,040

23\。设置同步

通过设置同步,您可以使用简单的 Gist 跨机器同步设置、片段、主题、文件图标、键绑定、工作区和扩展。它支持 GitHub Enterprise,带有 @sync 关键字的编译指示:host、os 和 env。一键上传和下载很容易。它允许您在您的机器上同步任何文件。

下载:1,870,161

24\。NPM

此扩展支持运行 package.json 文件中定义的 npm 脚本,并根据 package.json 中定义的依赖项验证已安装的模块。脚本可以在集成终端或输出窗口中运行。

下载量:2,748,322

结论:

嗯,Visual Studio Code 到 2022 年每月有 490 万活跃用户。毫无疑问,它是目前最好的代码编辑器。最好的功能之一是Market Place提供大量扩展来完全根据您的需求进行定制,并帮助您编写高质量的代码。

在本文中,我们将向使用 CSS、HTML、JavaScript 和 Angular、ReactJS 和 VueJS 等框架的前端工程师推荐这些 VS Code 扩展。

我们在ThemeSelection使用其中一些扩展来创建 Modern & Clean Bootstrap Admin Template。

Sneat Bootstrap 5 HTML 管理模板

Chameleon 免费引导管理模板

您还可以检查使用这些扩展制作的一些引导管理模板。

我们会说这个集合不是完整的集合,扩展不一定是最好的,但我们希望它可以帮助您选择最好的工具来帮助您编写高质量的代码并成为最好的 Web 开发人员。

如果您认为此列表缺少扩展,请随时通过在评论部分添加您喜欢的来建议和扩展它。