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

编程微刊

共 1682字,需浏览 4分钟

 ·

2020-08-05 15:25


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 个秘密特性


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




浏览 51
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报