用于高效 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 SnippetsJavaScript （ES6） Code Snippets 是任何类型 JavaScript 的非常有用的扩展。这包括TypeScript和主要的JavaScript框架。
该扩展为常见任务（如导入整个模块、导入模块的一部分和需要包）提供代码段。此外，还有大量代码段可用于快速创建命名导出、构造函数和许多更常见的 ES6 任务。所有代码段都以分号自动进行。
您可以在此处找到代码段参考。

文章插图

ESLintESLint 是一个 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— 使用此代码段时，将创建一个箭头函数，您的光标将从函数的正文区域开始。