mac vscode运行node_2020年，9个前端的顶级 VS Code 扩展插件

梦里梦外; 2022-10-27 01:48 296阅读 0赞

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

#### 1. CSS Peek ####

下载量：102w

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

![4fdbff51d663a5653b4a68111a508b34.png][]

#####  #####

##### 2.  代码检查 ESLint #####

下载量：1019w

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

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

![a15803effdd9544655acd711f56056f4.png][]

####  ####

#### 3.Node 扩展  NPM ####

下载量：274w

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

![da33180b137f411b7de8dd153091b751.png][]

####  ####

#### 4. 调试器 Debugger for Chrome ####

下载量：612w

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

![fa5fae75749b10100aa1d4d3b5bc434c.png][]

####  ####

#### 5.代码片段扩展  JavaScript Code Snippets ####

下载量：377w

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

![acd7d6fa437b800d013fcbc73bb5ec4a.png][]

####  ####

#### 6 . 代码格式化扩展 Prettier ####

下载量：763w

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

![1eb76babb94e75c1988d7e24ab6f8df0.png][]

####  ####

#### 7. 语法高亮 Beautify ####

下载量：516w

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

![67434facf41109c623a50915c22a1e8d.png][]

####  ####

#### 8. Vetur ####

下载量：518w

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

![e1994afc1a84e6af73964402db10e96e.png][]

#### 9：Git增强：GitLens ####

下载量：594w

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

![fce87383774f39a1ec4901f060a1a88f.png][]

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

完

推荐阅读：

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

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

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

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

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

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

![c76183d2ff00b43499924c45554ef439.png][]

[4fdbff51d663a5653b4a68111a508b34.png]: /images/20221024/d465307b751640af9e2fef67cc7c9f76.png
[a15803effdd9544655acd711f56056f4.png]: /images/20221024/904583c4440548daac29744b5f495dcd.png
[da33180b137f411b7de8dd153091b751.png]: /images/20221024/9c3b72f0fc9244b3b0171a9c703a6e83.png
[fa5fae75749b10100aa1d4d3b5bc434c.png]: /images/20221024/8ebc19e970904db7a4123a7b07efba9d.png
[acd7d6fa437b800d013fcbc73bb5ec4a.png]: /images/20221024/22501c31bf804d2eac388cddc13aed7d.png
[1eb76babb94e75c1988d7e24ab6f8df0.png]: /images/20221024/b9c6c2369640473485dca44a2b5f2b44.png
[67434facf41109c623a50915c22a1e8d.png]: /images/20221024/13e454c616004d94b0636304fcb9fd78.png
[e1994afc1a84e6af73964402db10e96e.png]: /images/20221024/457c3614d81549599aedb97ebe6fd459.png
[fce87383774f39a1ec4901f060a1a88f.png]: /images/20221024/4a347d3250bd4917ab0ad503ac6bc2af.png
[c76183d2ff00b43499924c45554ef439.png]: /images/20221024/e5a07920ba3846abbf81eb167f3c2799.png