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

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

文章插图

Rainbow Brackets处理较大的JavaScript文件可能非常棘手。如果您正在使用包含大量左括号和右括号（和括号）的函数，您可能会对特定符号（函数，if语句等）的开始和结束位置感到困惑。
彩虹支架扩展可以减轻搜索函数的压力，寻找匹配的支架。当您在特定函数中向下移动括号级别时，括号集的颜色将与上一个括号集的颜色不同。这为您提供了文件中函数或语句范围的绝佳可视化指示器。

文章插图

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