22个用于Web开发的最佳Visual Studio代码扩展插件 - Web前端

前端的发展太快了，伴随其发展的编辑器，也是”遍地开花“，比如：

sublime text

Visual Studio Code

GitHubAtom

WebStorm

BowPad

Editra

...

相信大家应该用过其一二，说实话，目前用的最舒服的还是Visual Studiocode，为什么那么受欢迎？

可定制性是Visual Studio Code最令人印象深刻的部分之一，尤其是通过扩展。如果您是网络开发人员，那么如果不安装这些扩展程序，将无法生存！接下来让我们一起学习其强大的扩展插件吧！

目录

• 1. Chrome调试器

• 2. Javascript（ES6）代码段

• 3. ESLint

• 4.实时服务器

• 5.支架对Colorizor

• 6.自动重命名标签

• 7. Quokka

• 8.路径智能感知

• 9.项目经理

• 10.编辑器配置

• 11. Sublime Text Keymap

• 12.浏览器预览

• 13.镜头

• 14. Polacode

• 15.更漂亮

• 16.更好的评论

• 17. Git链接

• 18. VS代码图标

• 19.材质图标主题

• 20.设置同步

• 21.更好地对齐

• 22. VIM

1. Chrome调试器

https://marketplace.visualstudio.com/items?itemName=msJSdiag.debugger-for-chrome

信不信由你，调试javascript不仅意味着编写console.log（）语句（尽管有很多）。Chrome具有内置的功能，可以使调试获得更好的体验。此扩展为您提供了VS Code内部的所有（或几乎所有）调试功能！

如果您想了解有关调试的更多信息，请阅读Chrome和Visual Studio Code中的调试JavaScript。

2. Javascript（es6）代码段

https://marketplace.visualstudio.com/items?itemName=xabikos.javascriptSnippets

我收看了摘要扩展。我坚信，无需一遍又一遍地重新输入同一段代码。该扩展为您提供了流行的现代（ES6）javaScript代码片段。

旁注...如果您不使用ES6 JavaScript功能，应该使用！

3. ESLint

HTTPS://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

是否想编写更好的代码？是否需要整个团队使用一致的格式？安装ESLint。该扩展名可以配置为自动设置代码格式以及带有错误或警告的“大喊”。VS Code特别也经过完美配置，可以向您显示这些错误/警告。

查看ESLint文档以获取更多信息。

4.实时服务器

https://marketplace.visualstudio.com/items?itemName=ritwickdey.liveServer

在代码编辑器中进行更改，切换到浏览器，然后刷新以查看更改。那是开发人员无休止的循环，但是如果您在进行更改时浏览器会自动刷新怎么办？那就是Live Server进来的地方！

它还在本地服务器上运行您的应用程序。有些事情只有在从服务器运行应用程序时才能测试，因此这是一个不错的好处。

5.支架对colorizor

HTTPs://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pAIr-colorizer

括号是开发人员生存的祸根。使用大量的嵌套代码，几乎不可能确定哪些括号彼此匹配。括号对着色器（如您所料）为括号匹配颜色，以使代码更具可读性。相信我，你想要这个！

6.自动重命名标签

https://marketplace.visualstudio.com/items?itemName=FORMulahendry.auto-rename-tag

是否需要重命名html中的元素？好了，使用“自动重命名标签”，您只需要重命名开始或结束标签，其他标签将自动重命名。简单但有效！

7. Quokka

https://marketplace.visualstudio.com/items?itemName=Wallabyjs.quokka-VSCode

需要一个快速的地方来测试一些JavaScript吗？我曾经在Chrome中打开控制台，然后在其中输入一些代码，但缺点很多。Quokka在VS Code中为您提供了一个JavaScript（和TypeScript）暂存器。这意味着您可以在自己喜欢的编辑器中测试一段代码！

8.路径智能感知

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

在大型项目中，记住特定的文件名和文件所在的目录可能会很棘手。此扩展将为您提供智能感知。当您开始在引号中输入路径时，您将获得目录和文件名的智能感知。这样可以避免您在文件浏览器中花费大量时间：)

9.项目经理

https://marketplace.visualstudio.com/items?itemName=alefragnani.PRoject-manager

我讨厌的一件事是在VS Code中的项目之间切换。每次我必须打开文件资源管理器并在计算机上找到项目时。但这随项目经理而改变。使用此扩展，您可以在项目的侧边菜单中获得一个额外的菜单。您可以在项目之间快速切换，保存收藏夹或从文件系统自动检测项目git项目。

如果您从事多个不同的项目，那么这是保持组织状态和提高效率的好方法。

10.编辑器配置

https://marketplace.visualstudio.com/items?itemName=editorconfig.EditorConfig

Editor Config是少数几种编码样式的标准，在主要文本编辑器/ IDE中都得到尊重。运作方式如下。您将配置文件保存在您的编辑器尊重的存储库中。在这种情况下，您必须为其添加VS Code扩展名，以遵守这些配置文件。超级容易设置，在团队项目中表现出色。

在编辑器配置文档中阅读更多信息。

11. Sublime Text Keymap

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

您是Sublime的狂热用户，是否急于切换到VS Code？通过更改所有快捷方式以匹配Sublime的快捷方式，此扩展程序将使您有宾至如归的感觉。现在，您有什么理由不进行切换？

12.浏览器预览

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

我喜欢Live Server扩展（如上所述），但是在方便性方面，他的扩展又走了一步。它为您提供了VS Code内部的实时重新加载预览。无需再查看浏览器即可看到很小的变化！

13.镜头

https://marketplace.visualstudio.com/items?itemName=eamodio.Gitlens

那里有一堆git扩展，但是其中一个功能最强大，有很多功能。您会得到非常规的信息，行和文件的历史记录，提交搜索等等。如果您需要有关Git工作流程的帮助，请从此扩展开始！

14. Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

您知道您在文章和推文中看到的那些漂亮的代码截图吗？好吧，很可能它们来自Polacode。使用起来超级简单。将一段代码复制到剪贴板，打开扩展名，粘贴代码，然后单击保存图像！

15.更漂亮

https://marketplace.visualstudio.com/items?itemName=esbenp.prettIEr-vscode

不要花时间格式化代码...只是不要。没必要 Ealier，我提到了ESLint，它提供格式化和棉绒。如果您不需要棉绒部分，那么选择Prettier。它非常容易设置，可以配置为在保存时自动格式化代码。

不用担心再次格式化！

16.更好的评论

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

此扩展程序对各种类型的注释进行颜色编码，以赋予它们不同的含义，并在其余代码中脱颖而出。我一直都用这个来做评论。很难不说一个橙色的大评论，告诉我我有一些未完成的工作要做。

还有用于问题，警报和突出显示的颜色代码。您也可以添加自己的！

17. Git链接

https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

如果您曾经想在github中查看正在处理的文件，则此扩展名适合您。安装后，只需右键单击文件，您将看到在GITHUB中打开文件的选项。如果您不使用Git Lens扩展名，这对于检查历史记录，分支版本等非常有用。

18. VS代码图标

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

您知道您可以自定义VS Code中的图标吗？如果查看设置，将会看到“文件图标主题”的选项。从那里可以选择预安装的图标或安装图标包。此扩展程序为您提供了一个非常可爱的图标包，已有1100万人使用！

19.材质图标主题

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

google材料设计的粉丝？然后，签出此“材料主题”图标包。有数百种不同的图标，它们看起来很棒！

20.设置同步

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

开发人员（包括我自己）花费大量时间自定义开发环境，尤其是文本编辑器。使用“设置同步”扩展程序，您可以在Github中保存设置。然后，您可以使用一个命令将它们加载到任何新版本的VS Code。如果没有您惊人的设置，不要被抓住！

21.更好地对齐

https://marketplace.visualstudio.com/items?itemName=wwm.better-align

如果您是那种喜欢代码中完美对齐的人，那么您需要获得Better Align。您可以对齐多个变量声明，尾随注释，代码段等。没有比安装并尝试一下更好的办法来了解此扩展的惊人之处了！

22. VIM

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

您是VIM高级用户吗？祝福您，但是您可以掌握所有VIM高级用户知识，并直接在VS Code中使用它。这不是我个人想要走的路，但是我知道使用VIM发挥其潜力时会产生多么疯狂的生产力，从而为您提供更多的功能。

总结

了解完这些插件，赶紧下载install吧，相信会给你在开发的时候带来很大便捷。

标签：插件代码StudioVisualWeb22