前端必备的几个 vscode 插件
正所谓:工欲善其事,必先利其器
作为一名前端开发者,vscode 想必大家应该都接触过,就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件。
作为一名熟练掌握各种前端开发工具安装和卸载的大师兄来说,为大家安利好玩有用的工具插件是我义不容辞的责任,所以我精挑细选了九款必备的 vscode 插件
Chinese (Simplified) (简体中文)
Chinese(Simplified)是一款中文汉化插件,英语渣渣崽的必备插件
![](https://static001.geekbang.org/infoq/01/0164f6dd139fa848cd5ea9320bb3e920.gif)
Live Server
Open In Browser 是打开静态页面,但是修改一次代码就需要打开一个浏览器,比较麻烦
可以安装一个 Live Server,动态刷新页面,每次修改代码,刷新一下浏览器就好
![](https://static001.geekbang.org/infoq/b4/b4b744801913200cac9a58954d6ad204.png)
Material Icon Theme
我们每天需要面对代码要长达 8 小时甚至更长的时间,页面不美观怎么能行
没有安装Material Icon Theme
前,vscode 的文件图标长这样
![](https://static001.geekbang.org/infoq/69/6917fb13268563fcaa4aa375afe67ccb.png)
安装了之后,是不是变美观了呢
![](https://static001.geekbang.org/infoq/2b/2bb364f2e20aab5bf0e488ad6581b903.png)
Image Preview 图片预览
还在引入图片担心引入的路径不对??,有了这个Image Preview
插件,能在左侧预览引入的图片,妈妈再也不用担心引入图片路径错误了
![](https://static001.geekbang.org/infoq/05/0551fae14c88f7d7c5924d13cf9e6274.png)
Bracket Pair Colorizer 2 括号对齐
js 代码写的太多??找不到哪是哪??这个利器帮你解决
![](https://static001.geekbang.org/infoq/1b/1b2218435f6aa2cc735ab82c52f1a695.gif)
formate: CSS/LESS/SCSS formatter 代码美化工具
虽然 VSCode 内置了 css 格式化功能,但这款支持 less, scss,更加高效美观
![](https://static001.geekbang.org/infoq/18/182a90904e0aeea9edfa2e69485288fa.png)
![](https://static001.geekbang.org/infoq/3d/3d3899f0272108f53f798b9c5da4ff8a.gif)
CSS Peek css 定位器
css 可以说是程序员的一大烦恼,尤其是样式多的时候
class 在哪定义的,自己都找不到了,有了 css peek
就能快速定位 css 样式了
![](https://static001.geekbang.org/infoq/2f/2f5bd8772732def4126111a817fbf213.gif)
GitLens Git 存储库
GitLens
可以缝导航和浏览 Git 存储库
![](https://static001.geekbang.org/infoq/49/498db32a7b856b2b5647cdff60854a77.gif)
Git History Git 历史
想不想知道是谁改了你的代码?Git History
,查看 Git 的历史,搜索,版本对比。
![](https://static001.geekbang.org/infoq/ac/ac0cbd5fde12334fde4cadfb3ef2bc4a.png)
评论