用于高效 Web 开发的 10 个 Visual Studio 代码扩展

机翻自 Nazere Wright 的 《10 Visual Studio Code Extensions for Productive Web Development》。

Visual Studio Code可以说是软件开发人员最流行，最广泛采用的代码编辑器。Visual Studio Code 具有广泛的扩展，这些扩展扩展了代码编辑器的功能。

作为软件开发人员，提高工作效率的关键之一是最大限度地提高代码编辑器的功能。Visual Studio Code本身具有大量功能。使用不带扩展的代码编辑器甚至可能足以完成手头的任务。然而，软件用例已经变得更加复杂和利基。在这种情况下，扩展可以帮助提高开发环境的质量。

您可能不需要或使用下面的所有扩展程序。但是，这就是Visual Studio Code作为通用代码编辑器的美妙之处。这些扩展中的每一个的用法将根据您手头的任务而有所不同。

JAVAScript (ES6) Code Snippets

JavaScript （ES6） Code Snippets 是任何类型 JavaScript 的非常有用的扩展。这包括TypeScript和主要的JavaScript框架。

该扩展为常见任务（如导入整个模块、导入模块的一部分和需要包）提供代码段。此外，还有大量代码段可用于快速创建命名导出、构造函数和许多更常见的 ES6 任务。所有代码段都以分号自动进行。

您可以在此处找到代码段参考。

ESLint

ESLint 是一个 JavaScript linter，它会自动突出显示 JavaScript 代码中的语法错误。Visual Studio Code已经为原生JavaScript内置了Intellisense。但是，ESLint 允许您将这些 linting 功能引入主要框架，如 Vue、Angular 和 React。

ESLint 会突出显示代码中的错误，还可以自动解决错误。最后，ESLint 可以集成到您的版本控制工作流中。这将确保所有贡献者都遵循代码库中的一致约定。

Auto Close Tag

你有没有使用Visual Studio Code来创建一个带有html的静态网站？如果是这样，您知道有时为DOM树中的每个元素编写打开和关闭HTML标记是非常重复的。

自动关闭标记扩展通过自动关闭 HTML（和 XML）标记来解决此问题。添加标记后，光标将位于开始标记和结束标记之间。这有助于快速创建子元素或添加文本内容。此扩展也支持诸如 之类的自关闭标记。<input />

Prettier

此扩展是软件开发人员的必备功能。老实说，我无法想象在不使用Prettier的情况下编写JavaScript，HTML或css。Prettier 是一种代码格式扩展，它强制实施一致的编写风格，例如设置最大行长度，并在必要时包装代码。总体而言，Prettier旨在使您的代码在每次保存到文件时更清晰。

Fast Arrow

你使用JavaScript ES6箭头函数吗？如果是这样，此扩展程序将对您非常有帮助。快速箭头提供了一组代码段，这些代码段将自动创建箭头函数。根据您使用的代码段，光标将显示在箭头函数的不同区域。

可用的快速箭头代码段

fa— 使用此代码段时，将创建一个箭头函数，您的光标将从函数的正文区域开始。

faa— 将创建一个箭头函数。光标将出现在函数的括号内，以便您可以指定任何函数参数。

fai— 将创建一个内联箭头函数。光标将出现在函数的右括号之后。

far— 具有预定义参数的箭头函数。如果您正在使用 Promises 或从外部 API 获取任何数据，则此代码段非常有用。response

Rainbow Brackets

处理较大的JavaScript文件可能非常棘手。如果您正在使用包含大量左括号和右括号（和括号）的函数，您可能会对特定符号（函数，if语句等）的开始和结束位置感到困惑。

彩虹支架扩展可以减轻搜索函数的压力，寻找匹配的支架。当您在特定函数中向下移动括号级别时，括号集的颜色将与上一个括号集的颜色不同。这为您提供了文件中函数或语句范围的绝佳可视化指示器。

Live Server

Live Server扩展允许开发人员通过Visual Studio Code启动本地开发服务器。这就像在安装后单击编辑器右下角显示的按钮一样简单。此外，服务器还具有实时重新加载功能。这意味着，一旦您对文件进行更改并保存，您的网页将自动重新加载。Go Live

对于可能不想使用 Node.js 或 Python/ target=_blank class=infotextkey>Python 设置本地服务器而只想使用静态 Web 文件的开发人员，此扩展非常有用。

Path Intellisense

作为Web开发人员，在处理HTML文件时，我们知道会有很多其他文件（JS，CSS）将加载到当前文件中。这包括可能位于项目其他目录中的 CSS 和 JavaScript 文件。

随着项目大小的不断增加，在加载外部文件时指定正确的路径名将变得更加麻烦。这就是Path Intellisense拯救一天的地方！Path Intellisense 在将文件加载到 HTML 中或需要 JavaScript 中的文件时自动完成文件路径。

有时您可能会忘记某个文件的位置。当 Path Intellisense 可以为您执行此操作时，为什么要花时间在源代码中搜索此文件？

Polacode

你有没有想过创建代码片段的漂亮屏幕截图？您可以使用 Polacode 扩展在 Visual Studio Code 中完成此操作。

Polacode实际上是你的代码的宝丽来。捕获源代码的高质量图像，并使用漂亮的字体格式化代码。

安装后，您可以在 mac 或 windows 上按键以打开 VS Code 命令面板。键入编辑器中显示的文本输入。选择第一个选项。第二个窗口将出现在源代码旁边。接下来，转到您的文件并突出显示要捕获并粘贴到Polacode窗口中的代码段。最后，您可以调整图像大小并将其保存到计算机。command + shift + pctrl + shift + ppolacode>

GitLens

本机 VS Code 附带 Git 版本控制功能。但是，GitLens 是一个可以丰富版本控制体验的扩展。GitLens 非常适合具有许多开发人员贡献的大型项目。

一目了然，您将在文件的每一行上获得一些有用的版本控制信息。您可以看到谁是文件中特定行的作者。这为所有贡献的开发人员提供了谁添加了什么的知识。如果代码发生冲突，开发人员会收到直接的通信线路。

一个好的建议是将以下行添加到 VS Code 设置中。这将删除每行上显示的分散注意力的批注。

复制

"gitlens.currentLine.enabled": false

• 1.

结论

在本文中，我们回顾了 10 个最佳的 Visual Studio Code 扩展，这些扩展可在开发 Web 应用程序时提高工作效率。还有更多的扩展涵盖了大量的用例。这显示了Visual Studio Code作为通用代码编辑器的美妙之处。