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

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

 

 

1. CSS Peek

 

下载量：102w

 

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

 

 

2.  代码检查 ESLint

 

下载量：1019w

 

网站：https://eslint.bootcss.com/

 

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

 

 

3.Node 扩展  NPM

 

下载量：274w

 

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

 

 

4. 调试器 Debugger for Chrome

 

下载量：612w

 

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

 

 

5.代码片段扩展  JavaScript Code Snippets

 

下载量：377w

 

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

 

 

6 . 代码格式化扩展 Prettier

 

下载量：763w

 

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

 

 

7. 语法高亮 Beautify

 

下载量：516w

 

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

 

 

 

8. Vetur

 

下载量：518w

 

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

 

 

9：Git增强：GitLens

 

下载量：594w

 

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

 

 

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

 

 

完

推荐阅读：

 

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

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

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

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

JSON.stringify() 的 5 个秘密特性

 

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

 

 

​