VSCode基础必备插件超实⽤
1、View In Browser
在浏览器⾥预览⽹页必备。
2、vscode-icons
改变编辑器⾥⾯的⽂件图标，个⼈⽐较稀饭这个。其他的这⾥就不说了。
image
3、Bracket Pair Colorizer
给嵌套的各种括号加上不同的颜⾊。
image
4、Highlight Matching Tag
⾼亮对应的 HTML 标签以及标识出对应的各种括号。
image
5、Auto Rename Tag
⾃动修改匹配的 HTML 标签。
image
6、Path Intellisense
智能路径提⽰，可以在你输⼊⽂件路径时智能提⽰。
image
7、Markdown Preview
实时预览 markdown。
8、stylelint
CSS / SCSS / Less 语法检查
image
进价必备插件
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 有了相应的插件，现在只需要⿏标点⼏下就⾏了。
这个插件基本功能是预览⽹页，但它的特点是：会将⽹页在本地服务器上预览，最重要的是代码保存之后，浏览器⾃动刷新，有多⽅便不⽤我说了吧？
使⽤⽅法：
image
在 HTML ⽂件上右键
打开 HTML ⽂件，点击编辑器右下⾓ Go Live 按钮
image
10、Prettier
格式化插件。有的⼈可能会推荐 Beautify。我原来也是⼀直⽤这个，后来发现这个并不能格式化 React 的代码。所以果断换成 Prettier。
11、carbon-now-sh
将代码分享为图⽚（图⽚的格式可以为 png 和 svg），最最最重要的是：图⽚逼格敲⾼↓↓↓
之所以将代码分享为图⽚，是因为如果直接分享代码，在有些地⽅代码格式可能会乱。
⽐如：你在评论区和别⼈交流代码，结果那个评论区做的很垃圾，粘贴上去的代码格式会很乱，有的代码甚⾄被解析了？所以是不是有必要将代码分享为图⽚呢？
image
12、Codelf
Codelf 是⼀个⽤来给变量命名的⽹站，你只要输⼊你想起的中⽂名，它就会给你提供很多建议的命名：
image
可能很多⼈知道有 Codeif 这么个⽹站，其实 VSCode 上有插件哦，是不是很神奇 : )
image
冲这个⽹站的逼格，必须安排！
13、Turbo Console Log
快捷添加 console.log，⼀键注释 / 启⽤ / 删除所有 console.log。
简直好⽤到犯规！
image
简单说下这个插件要⽤到的快捷键:
ctrl + alt + l 选中变量之后，使⽤这个快捷键⽣成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启⽤所有 console.log
alt + shift + d 删除所有 console.log
14、GitLens
详细的 Git 提交⽇志。
Git 重度使⽤者必备，尤其是多⼈协作时：哪⼀⾏代码，何时、何⼈提交都有记录。
image
妈妈再也不⽤担⼼我背锅了！
15、Regex Previewer
实时预览正则表达式的效果。
image
16、css-auto-prefix
⾃动添加 CSS 私有前缀。
image
17、Change Case
转换命名风格。
image
18、CSS Peek
定位 CSS 类名。
image
19、vscode-json
处理 JSON ⽂件，⽤法看图：
image
20、HTML Boilerplate
虽然 VSCode 已经内置了⼀键⽣成 HTML 模板的快捷⽅式，但这个有另外的⽤处，看图：
image
21、settings sync
在不同电脑间同步你的插件。
安装了这么多插件，换了台电脑⼜得重新安装，所以，这个插件不考虑⼊⼿吗？
image
这⾥简述下这个插件怎么⽤:
⾸先要想在不同的设备间同步你的插件, 需要⽤到 Token 和Gist id
Token 就是你把插件上传到 github 上时, 让你保存的那段字符，Gist id 在你上传插件的那台电脑上保存着。ps: 如果你没有保存Token，也不知道Gist id，不要慌, 可以这样获取:
在你上传 Sync 设置的 VSCode ⾥，按 F1, 然后输⼊ Sync，选择 Sync: ⾼级选项:
image
然后选择:
image
这样就会进⼊⼀个压缩的⽂件，然后⿏标右键整理⼀下⽂档格式如下:
image
这样就能看见你的 Token 了。
接下来就是获取你的 Gist id:
在 VSCode ⾥，依次打开: ⽂件 -> ⾸选项 -> 设置，然后输⼊ Sync 进⾏搜索:
image
这样就获取到你的 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 代码快捷⽣成。
image
23、Minify
压缩 HTML、CSS、JS 代码。
image
24、:emojisense:
快速挑选 Markdown 中的 Emoji。
image
当然不想下载这个插件，可以去这个⽹站你想⽤的 Markdown Emoji 代码：
也可以下载浏览器插件，去寻你想要的 Markdown Emoji代码 (这⾥我⽤的⽕狐浏览器)：
image
react router 方法image
当然，还有⼀个⽹站: ，可以直接复制粘贴 Emoji，但是相应的 Markdown Emoji 代码，需要⾃⼰转换⼀下，⽐如这个表情:
image
⿏标经过显⽰ See No Evil 那么他的 Markdown Emoji 代码就是 :see_no_evil:(全部⼩写，空格⽤下划线代替)
25、TODO Highlight
⾼亮 TODO，FIXME、还可以⾃⼰配置要⾼亮的关键字。
我猜⼩伙伴们在跑代码时⼀定和我⼀样，经常打⼀些 TODO 标记吧？
所以，这个插件很适合你！
image
26、Icon Fonts
添加字体图标。
image
27、SVG View
预览 SVG。
image
28、px to rem
像素转 rem。
29、code spell checker 对基本关键字拼写校验：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。