1、View In Browser
在浏览器里预览网页必备。
2、vscode-icons
改变编辑器里面的文件图标,个人比较稀饭这个。其他的这里就不说了。
![](http://upload-images.jianshu.io/upload_images/16375643-13f43f74f736c2f5.gif?imageMogr2/auto-orient/strip|imageView2/2/w/800/format/webp)
3、Bracket Pair Colorizer
给嵌套的各种括号加上不同的颜色。
![](http://upload-images.jianshu.io/upload_images/16375643-151bf52d91edf201.png?imageMogr2/auto-orient/strip|imageView2/2/w/672/format/webp)
4、Highlight Matching Tag
高亮对应的 HTML 标签 以及 标识出对应的各种括号。
![](http://upload-images.jianshu.io/upload_images/16375643-b748fe0a73946fe7.gif?imageMogr2/auto-orient/strip|imageView2/2/w/529/format/webp)
5、Auto Rename Tag
自动修改匹配的 HTML 标签。
![](http://upload-images.jianshu.io/upload_images/16375643-8260bd7e1f52ada7.gif?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
6、Path Intellisense
智能路径提示,可以在你输入文件路径时智能提示。
![](http://upload-images.jianshu.io/upload_images/16375643-eba3ac54b10842e1.gif?imageMogr2/auto-orient/strip|imageView2/2/w/480/format/webp)
7、Markdown Preview
实时预览 markdown。
8、stylelint
CSS / SCSS / Less 语法检查
![](http://upload-images.jianshu.io/upload_images/16375643-9252e8473dd0a0bc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1102/format/webp)
进价必备插件
9、Live Server
彩蛋1:
下面的小字注解: n p mNode 包管理器
是这样写出来的:<ruby>n p m<rp>(</rp><rt>Node 包管理器</rt><rp>)</rp></ruby>
一个不错的 Markdown 书写技巧是吧?提升阅读体验,真是太刺激了 : )
我以前使用 Live Server 都是 n p mNode 包管理器 下载的,而且使用的时候需要在控制台手动敲启动代码。还好 VSCode 有了相应的插件,现在只需要鼠标点几下就行了。
这个插件基本功能是预览网页,但它的特点是:会将网页在本地服务器上预览,最重要的是代码保存之后,浏览器自动刷新,有多方便不用我说了吧?
使用方法:
![](http://upload-images.jianshu.io/upload_images/16375643-a80e1c82509cbdd6.png?imageMogr2/auto-orient/strip|imageView2/2/w/563/format/webp)
在 HTML 文件上右键
打开 HTML 文件,点击编辑器右下角 Go Live 按钮
![](http://upload-images.jianshu.io/upload_images/16375643-df103ed5b843b564.png?imageMogr2/auto-orient/strip|imageView2/2/w/534/format/webp)
10、Prettier
格式化插件。有的人可能会推荐 Beautify。我原来也是一直用这个,后来发现这个并不能格式化 React 的代码。所以果断换成 Prettier。
11、carbon-now-sh
将代码分享为图片(图片的格式可以为 png 和 svg),最最最重要的是: 图片逼格敲高 ↓↓↓
之所以将代码分享为图片,是因为如果直接分享代码,在有些地方代码格式可能会乱。
比如:你在评论区和别人交流代码,结果那个评论区做的很垃圾,粘贴上去的代码格式会很乱,有的代码甚至被解析了?所以是不是有必要将代码分享为图片呢?
![](http://upload-images.jianshu.io/upload_images/16375643-7c42c3e59f33c846.png?imageMogr2/auto-orient/strip|imageView2/2/w/704/format/webp)
12、Codelf
Codelf 是一个用来给变量命名的网站,你只要输入你想起的中文名,它就会给你提供很多建议的命名:
![](http://upload-images.jianshu.io/upload_images/16375643-5bf4d2541997b7b8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1135/format/webp)
可能很多人知道有 Codeif 这么个网站,其实 VSCode 上有插件哦,是不是很神奇 : )
![](http://upload-images.jianshu.io/upload_images/16375643-aefdfe20367440a2.png?imageMogr2/auto-orient/strip|imageView2/2/w/379/format/webp)
冲这个网站的逼格,必须安排!
13、Turbo Console Log
快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log。
简直好用到犯规!
![](http://upload-images.jianshu.io/upload_images/16375643-e1d975e7ff38bf25.gif?imageMogr2/auto-orient/strip|imageView2/2/w/600/format/webp)
简单说下这个插件要用到的快捷键:
ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
14、GitLens
详细的 Git 提交日志。
Git 重度使用者必备,尤其是多人协作时:哪一行代码,何时、何人提交都有记录。
![](http://upload-images.jianshu.io/upload_images/16375643-f4c30107f0174834.png?imageMogr2/auto-orient/strip|imageView2/2/w/1096/format/webp)
妈妈再也不用担心我背锅了!
15、Regex Previewer
实时预览正则表达式的效果。
![](http://upload-images.jianshu.io/upload_images/16375643-c5a25b14f2bd66c8.gif?imageMogr2/auto-orient/strip|imageView2/2/w/718/format/webp)
16、css-auto-prefix
自动添加 CSS 私有前缀。
![](http://upload-images.jianshu.io/upload_images/16375643-4f0f827cf69a274f.gif?imageMogr2/auto-orient/strip|imageView2/2/w/523/format/webp)
17、Change Case
转换命名风格。
![](http://upload-images.jianshu.io/upload_images/16375643-f72efbebabe33b8d.gif?imageMogr2/auto-orient/strip|imageView2/2/w/1156/format/webp)
18、CSS Peek
定位 CSS 类名。
![](http://upload-images.jianshu.io/upload_images/16375643-3aef728cdb52cf42.gif?imageMogr2/auto-orient/strip|imageView2/2/w/571/format/webp)
19、vscode-json
处理 JSON 文件,用法看图:
![](http://upload-images.jianshu.io/upload_images/16375643-3d17b1347a50d7c2.gif?imageMogr2/auto-orient/strip|imageView2/2/w/600/format/webp)
20、HTML Boilerplate
虽然 VSCode 已经内置了一键生成 HTML 模板的快捷方式,但这个有另外的用处,看图:
![](http://upload-images.jianshu.io/upload_images/16375643-474f8afdd890bc7b.gif?imageMogr2/auto-orient/strip|imageView2/2/w/600/format/webp)
21、settings sync
在不同电脑间同步你的插件。
安装了这么多插件,换了台电脑又得重新安装,所以,这个插件不考虑入手吗?
![](http://upload-images.jianshu.io/upload_images/16375643-3c8a1f780874fc5b.gif?imageMogr2/auto-orient/strip|imageView2/2/w/640/format/webp)
这里简述下这个插件怎么用:
首先要想在不同的设备间同步你的插件, 需要用到 Token 和Gist id
Token 就是你把插件上传到 github 上时, 让你保存的那段字符,Gist id 在你上传插件的那台电脑上保存着。
ps: 如果你没有保存Token,也不知道Gist id,不要慌, 可以这样获取:
在你上传 Sync 设置的 VSCode 里,按 F1, 然后输入 Sync,选择 Sync: 高级选项:
![](http://upload-images.jianshu.io/upload_images/16375643-2b2d933b9cc2ad5a.png?imageMogr2/auto-orient/strip|imageView2/2/w/824/format/webp)
然后选择:
![](http://upload-images.jianshu.io/upload_images/16375643-68affdfb3df37839.png?imageMogr2/auto-orient/strip|imageView2/2/w/912/format/webp)
这样就会进入一个压缩的文件,然后鼠标右键整理一下文档格式如下:
![](http://upload-images.jianshu.io/upload_images/16375643-96e9ed429ceba3ac.png?imageMogr2/auto-orient/strip|imageView2/2/w/1111/format/webp)
这样就能看见你的 Token 了。
接下来就是获取你的 Gist id:
在 VSCode 里,依次打开: 文件 -> 首选项 -> 设置,然后输入 Sync 进行搜索:
![](http://upload-images.jianshu.io/upload_images/16375643-73195ebe3012305e.png?imageMogr2/auto-orient/strip|imageView2/2/w/994/format/webp)
这样就获取到你的 Gist id。
知道了 Token 和 Gist id,就能在不同设备间同步你的 VSCode 插件。
(当然,你也可以把 Token 和 Gist id 分享给别人,这样别人就能一键下载你用的 VSCode 插件!)
彩蛋2:
我的 Token 和 Gist id 分别是:
Token:
4f5135c3c9e7275950f58133bc4b5f75461ceef3
Gist id:
ce3ff9d53df48d738f1e9e86fff55a8c
里面有我用的所有 VSCode 插件 : )
其他插件推荐
22、React/Redux/react-router Snippets
React 代码快捷生成。
![](http://upload-images.jianshu.io/upload_images/16375643-5da58993033636b1.png?imageMogr2/auto-orient/strip|imageView2/2/w/694/format/webp)
23、Minify
压缩 HTML、CSS、JS 代码。
![](http://upload-images.jianshu.io/upload_images/16375643-6e039c4ab75e1049.gif?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
24、:emojisense:
快速挑选 Markdown 中的 Emoji。
![](http://upload-images.jianshu.io/upload_images/16375643-809caf244b5ecccb.gif?imageMogr2/auto-orient/strip|imageView2/2/w/830/format/webp)
当然不想下载这个插件,可以去这个网站找你想用的 Markdown Emoji 代码:Emoji cheat sheet for Github
也可以下载浏览器插件,去寻找你想要的 Markdown Emoji代码 (这里我用的火狐浏览器):
![](http://upload-images.jianshu.io/upload_images/16375643-cd81e2a87bf502de.png?imageMogr2/auto-orient/strip|imageView2/2/w/728/format/webp)
![](http://upload-images.jianshu.io/upload_images/16375643-6d37bb3267d743dd.png?imageMogr2/auto-orient/strip|imageView2/2/w/550/format/webp)
当然,还有一个网站: Emoji Homepage,可以直接复制粘贴 Emoji,但是相应的 Markdown Emoji 代码,需要自己转换一下,比如这个表情:
![](http://upload-images.jianshu.io/upload_images/16375643-4e72d250d8847fad.png?imageMogr2/auto-orient/strip|imageView2/2/w/625/format/webp)
鼠标经过显示 See No Evil 那么他的 Markdown Emoji 代码就是 :see_no_evil:(全部小写, 空格用下划线代替)
25、TODO Highlight
高亮 TODO,FIXME、还可以自己配置要高亮的关键字。
我猜小伙伴们在跑代码时一定和我一样,经常打一些 TODO 标记吧?
所以,这个插件很适合你!
![](http://upload-images.jianshu.io/upload_images/16375643-84939fe72d37a4bc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
26、Icon Fonts
添加字体图标。
![](http://upload-images.jianshu.io/upload_images/16375643-1263746a86cd6bd4.gif?imageMogr2/auto-orient/strip|imageView2/2/w/598/format/webp)
27、SVG View
预览 SVG。
![](http://upload-images.jianshu.io/upload_images/16375643-2873c9f62e855cba.gif?imageMogr2/auto-orient/strip|imageView2/2/w/841/format/webp)
28、px to rem
像素转 rem。
29、code spell checker
对基本关键字拼写校验: