深圳幻海软件技术有限公司 欢迎您!

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

2023-02-28

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

作为软件开发人员,提高工作效率的关键之一是最大限度地提高代码编辑器的功能。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 设置本地服务器而只想使用静态 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作为通用代码编辑器的美妙之处。