2020年，9个前端的顶级 VS Code 扩展插件

女爷i 2023-03-05 06:28 7阅读 0赞

VS Code 的插件甚至是主题都数不胜数，开发者根据自己的需求可以自由选择。一个配置合适的 VSC 可以提高开发效率，有的则能够帮助开发者写出更简洁美观的代码。在大量的插件中，为了避免大家挑花眼，我在这里和大家分享12个我个人认为对前端开发最有利的扩展。

1. CSS Peek

下载量：102w

这款插件在你的html中鼠标指向某个class或者id名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置，可以说是大大提高了开发效率。

![format_png][]

2.  代码检查 ESLint

下载量：1019w

网站：[https://eslint.bootcss.com/][https_eslint.bootcss.com]

JavaScript 可能很难调试，但 ESLint 扩展可以使这个过程更容易。它能够在执行代码之前帮你指出其中潜在的问题。更强大的是它允许你创建自己的 linting 规则。

![format_png 1][]

3.Node 扩展  NPM

下载量：274w

所有开发者应该都认识NPM，其全称是Node Package Manager（node包管理器）。该扩展插件有助于管理Package.json，当生产环境依赖包未安装时会发出警告，并确保安装的版本正确。

![format_png 2][]

4. 调试器 Debugger for Chrome

下载量：612w

对于在运行时期间对代码进行调试的开发人员，Debugger for Chrome 将帮你更好的完成工作。它有许多方便的功能，包括在代码、watches 和控制台中设置断点的功能。另外你可以在 VS Code 中运行Chrome实例，或把调试器附加到单独运行的浏览器实例。

![format_png 3][]

5.代码片段扩展  JavaScript Code Snippets

下载量：377w

目前最流行的，迄今为止安装量超过 377 万。此扩展为 JavaScript ， TypeScript ，HTML，React和Vue扩展提供 ES6 语法支持。

![format_png 4][]

6 . 代码格式化扩展 Prettier

下载量：763w

说到漂亮整洁的代码，Prettier 听名字你就值得拥有。尤其在项目需要你和其他同事合作完成时，Prettier 会强势地将代码格式全部统一，让你再也不用和同事讨论自己的代码。

![format_png 5][]

7. 语法高亮 Beautify

下载量：516w

它同Prettier十分类似，是一种出色的代码格式化扩展插件，近1200万的下载量足以说明一切。可以用它格式化以JavaScript，JSON，CSS，Sass和HTML编写的代码。

![format_png 6][]

8. Vetur

下载量：518w

对 Vue.js 开发，有一个叫 Vetur 的扩展相当棒，它目前的下载量已经有将近2,000万。Vetur 的功能很强大，包括代码片段，Emmet，错误检查，格式化，调试和高亮语法等。

![图片.png][.png]

9：Git增强：GitLens

下载量：594w

虽然Git功能已内置于 VS Code 中，但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能，可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说，这个扩展插件会让你拥有全新的视觉感受。

![format_png 7][]

Visual Studio Code 成为最流行的 Javascript IDE 已经有一段时间了。我个人认为 VS Code 是个很好用的编辑器，在自定义方面它的自由度很高，并且有了自带的 git 功能，这也避免了你在不同的窗口间来回切换。

完

推荐阅读：

[太牛了，推荐一份从 0 开始刷 LeetCode 的心得记录][0 _ LeetCode]

[22 个让 React 开发更高效更有趣的工具][22 _ React]

[一文读懂 JS 装饰器，这是一个会打扮的装饰器][JS]

[好用到叫出声！强烈推荐 10 款 Mac 软件！][10 _ Mac]

[JSON.stringify() 的 5 个秘密特性][JSON.stringify_ _ 5]

今天的推荐你喜欢吗？如果喜欢，就点个再看吧，希望对你有用。

![format_png 8][]

[format_png]: /images/20230208/6ff1b3d9bddf4b0a84f8235776375ff5.png
[https_eslint.bootcss.com]: https://eslint.bootcss.com/
[format_png 1]: /images/20230208/8d131a5c457e44f4a88721563ae73ad8.png
[format_png 2]: /images/20230208/318aa224515b4347b164a0f3a5f98212.png
[format_png 3]: /images/20230208/f1debd3ad83b4f109f02015844741dc1.png
[format_png 4]: /images/20230208/967a766e9c9f422f90a5763e17f2411c.png
[format_png 5]: /images/20230208/4787dc05b65549539bccd71cb58e499f.png
[format_png 6]: /images/20230208/3d0e78bf4b2f4599b2886edac98870a4.png
[.png]: /images/20230208/b050535423bd48249f9d2861d34f0e45.png
[format_png 7]: /images/20230208/a9dc5f02c6234322b8a3cb669da3d381.png
[0 _ LeetCode]: http://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247488520&idx=1&sn=40ab6ed850ee8145f83a2ff1994d33c1&chksm=eaef3338dd98ba2eae32f5ffcf68ed9d17e2a447c6638700be9bc3e83823117c6d7e5c09d2c6&scene=21#wechat_redirect
[22 _ React]: http://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247488513&idx=1&sn=f08b0d6156b4140551ccd8497c9481ec&chksm=eaef3331dd98ba27a3496e0044cbf4ff8d58ed80e9da3dcea71cc8306fb8a77b32483c976ca9&scene=21#wechat_redirect
[JS]: http://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247488503&idx=1&sn=bc493f7fae20822df70de6687f0b6e3b&chksm=eaef34c7dd98bdd12a74c32bcfdf6ca505a0aedf0372117073ea7e48b0adbb32b06941924db5&scene=21#wechat_redirect
[10 _ Mac]: http://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247488501&idx=1&sn=5df866bac98c3866628d06c20edf1838&chksm=eaef34c5dd98bdd3784861d49c808a23a31127c300b78651adbb0874ef772ba16f4237d85747&scene=21#wechat_redirect
[JSON.stringify_ _ 5]: http://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247488444&idx=1&sn=a12d6ed0b0f8f3ba7314f7a10ba16977&chksm=eaef348cdd98bd9a81810a0ad3dae687deba1510d7e940117cc396ae8c9469ab76cf6740303b&scene=21#wechat_redirect
[format_png 8]: /images/20230208/316938c9b03a40f0adc747724308abf9.png