8个针对前端开发人员的强大Visual Studio代码扩展

正式的Visual Studio Code扩展托管在Visual Studio Code市场中 ，其中许多对Web开发人员都可以提供很大的帮助。

尽管微软仅在几个月前发布了其功能强大的代码编辑器Visual Studio Code的第一个稳定版本，但到2016年3月 ，它已经具有许多可用的扩展，这些扩展可以将编码体验提升到一个新的水平。

花些时间自己浏览市场，看看它还能为您提供什么，尤其是因为还没有很多强大的扩展功能出现时。

这并不是所有人的最终清单。

在本文中，我测试了一堆与前端开发相关的VS Code扩展，并列出了我发现的最直观，易用和方便的扩展 。

如何安装VS Code扩展

在VS Code Marketplace中，每个扩展都有自己的页面，您可以在此页面顶部找到可以安装给定扩展的命令。

在Visual Studio Code中，安装扩展非常简单，因为您可以在代码编辑器中进行安装 。

要安装扩展，只需在VS Code中按CTRL+P即可启动“快速打开”面板 ， 将此命令复制粘贴到其中，最后重新启动代码编辑器以使新扩展生效。

该命令始终以ext install术语开头。

8个功能强大的Visual Studio代码扩展

1. HTML片段

   尽管VS Code具有对HTML的基本支持，例如语法着色 ，但是HTML Snippets扩展了解的更多。

   如果您想经常在Visual Studio Code中编写HTML，那么HTML Snippets扩展可以作为一个便捷的工具，因为它增加了对HTML的精心支持 。

   

   此扩展程序最有用的功能可能是， 当您开始键入HTML标签的名称 （没有起始尖括号）时，HTML代码段会Swift显示可用选项的列表 ，并简要列出每个选项。

   

   例如，如果您想向文档添加链接（锚标签），只需在VS Code中键入a ，在弹出框中选择正确的选项，HTML片段将插入必要的<a href=""></a>轻松插入您的编辑器中。

   当您单击所需的元素时，HTML代码段将添加具有其最常用属性的完整HTML5标签。

   该扩展的作者还注意删除不推荐使用的元素，因此，如果您要使用在弹出列表中找不到HTML标记，则值得检查一下它是否仍然有效。

2. HTML CSS类完成

   对于我们的开发人员来说，经常会发生这样的情况，即我们不能完全确定某个类的确切名称 ，但是它只是被动知识而已。

   如果您需要在项目中使用许多CSS类 ，则HTML CSS类完成可以是有用的扩展。

   这个智能扩展为该问题提供了解决方案，因为它获取当前工作空间中所有CSS类的名称 ，并显示有关它们的列表。

   

   您不记得如何准确地命名类，但是您知道它们具有语义名称。

   假设您要使用Zurb Foundation创建一个站点 ，并且要使用小网格。

   使用HTML CSS Class Completion，您只需要开始输入单词small ，并且可用选项立即出现在屏幕上，因此您可以轻松地选择所需的选项。

   

3. 在浏览器中查看

   您可以通过按CTRL + F1键盘快捷键直接从VS Code在默认浏览器中打开HTML文件。

   通过允许您在编码时在浏览器中快速查看工作的结果，它可以促进前端开发。

   在浏览器中查看是Visual Studio Code的一个简单但功能强大的扩展。

   您无法从CSS或JavaScript文件直接访问浏览器。

   请注意，在浏览器中查看仅支持HTML ，因此，如果要查看站点，则需要打开HTML文件。

   

4. Chrome调试器

   观看此演示以了解其工作原理。

   这意味着您不需要使用浏览器看到的已转译JavaScript，而是可以直接从原始源文件执行调试 。

   Chrome调试器使您无需离开代码编辑器即可在Google Chrome中调试JavaScript 。

   

   该扩展具有调试器需要的所有功能，例如断点设置，变量监视，单步执行， 方便的调试控制台以及许多其他功能 （请参阅第一个版本的功能列表 ）。

   后者可能需要一段时间，但是您可以在GitHub上找到有关如何正确执行操作的详细说明 。

   要使用此扩展程序，您需要在启用了远程调试的情况下启动Chrome并设置适当的launch.json文件。

5. 捷迅

   默认情况下，JSHint扩展使用lint的默认选项，您可以借助配置文件对其进行自定义。

   Visual Studio Code的JSHint扩展将流行的JSHint JavaScript linter直接集成到了代码编辑器中，因此，一旦提交错误，便会立即通知您 。

   

   如果您想了解有关该问题的更多信息，只需将鼠标悬停在带下划线的部分上，JSHint将立即浮动一个带有问题描述的标签。

   此扩展的用法非常简单，因为JSHint用红色标记错误，而用绿色下划线标记通知。

   

6. jQuery代码段

   jQuery代码段目前大约有130个可用的 代码段，您可以通过键入正确的触发器来调用它们。

   jQuery代码片段可极大地加快Visual Studio Code的前端开发速度，因为它使您可以快速编写jQuery而不会出现基本语法错误。

   

   一个例外是func触发器，该触发器将匿名函数插入编辑器 。

   除jQuery以外，所有jQuery代码段jq前缀开头。

   它还使轻松滚动浏览可用选项变得容易。

   如果您不确定完全正确的语法，并希望节省时间检查文档，则可以使用此方便的扩展程序。

   

7. 凉亭

   通过将Bower软件包管理器集成到Visual Studio Code中， Bower VS Code扩展可以使您的Web开发工作流程更加直观 。

   如果使用此扩展， 则不必在终端和编辑器之间来回切换 ，但是可以在Visual Studio Code中轻松执行包管理任务。

   

   Bower扩展程序将引导您完成项目的bower.json文件的创建，并且您还可以安装，卸载，搜索，更新程序包 ，管理缓存以及执行许多其他任务（请参见完整功能列表 ）。

   您可以通过以下方式访问与Bower相关的命令：启动命令面板，方法是：按F1 ，在输入栏中键入“ Bower”，然后在出现的下拉列表中单击“ Bower”选项，然后选择适当的Bower命令 。

   

8. git历史

   如果您想为更大的Github项目做出贡献，并且需要一种方法来快速查看其他开发人员所做的修改 ，则此扩展特别有用。

   通过Git历史记录 ，可以在Visual Studio Code中跟踪Git项目的更改 。

   您还可以比较同一文件的早期版本 。

   安装了Git History扩展后，您可以查看整个文件的历史记录 ，或其中的特定行 。

   

   请注意， 您需要先打开要查看其历史记录的文件 ，然后才能对其执行任何操作。

   如果在命令面板（ F1 ）中输入单词“ Git”，在下拉列表中选择“ Git”，然后选择所需的命令，则可以访问与Git历史记录相关的命令。

   

翻译自: https://www.hongkiat.com/blog/visual-studio-code-extensions/