VSCode 【前端】 必备插件推荐

前言

之前从webstorm转投VSCode了，然后使用发现不装插件的VS感觉没WS顺手，然后就从网上搜罗了一些推荐插件，自己装上用了一下，瞬间舒服了~
所以倾力推荐给前端小伙伴们 ~^-^~

---

必备插件全套推荐

功能性插件

1. Auto Close Tag : 匹配标签，关闭对应的标签。很实用【HTML/XML】
2. Auto Rename Tag : sublime和webstorm也有这个内置功能，改变标签的时候同时改动开闭合标签；【HTML/XML】
3. beautify : 良好的拓展性，可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用
4. colorize : 会给颜色代码增加一个当前匹配代码颜色的背景，写css的时候很舒服
5. Git History : 可以看到以往git的提交列表，可视化更直观
6. HTML CSS Support : 让 html 标签上写class 智能提示当前项目所支持的样式，新版已经支持scss文件检索啦
7. Path Autocomplete : 路径智能补全
8. Path Intellisense ： 路径智能提示.
9. SCSS IntelliSense Preview : SCSS智能提醒，配置强大
10. Syncing: 这个同步插件支持删除同步！！！
11. Version Lens : 可以及时看到package.json内部版本的变动，很实用
12. Output Colorizer : 可以终端日志输出着色，比较实用
13. filesize: 在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间，相当实用
14. Bracket Pair Colorizer: 让括号拥有独立的颜色，易于区分。可以配合任意主题使用。很关键！！！用它！

Vue插件

1. Vetur: Vue语法高亮、智能感知、Emmet等
2. VueHelper:写代码的时候会显示snippet代码片段
3. Import Cost: 引入包大小计算,对于项目打包后体积掌握很有帮助，非常实用！

代码片段插件

1. JavaScript (ES6) code snippets : ES6的代码片段，实用
2. JavaScript Snippet Pack : ES5及以下的代码片段，实用

语法校验插件

1. stylelint : 比内置的要全，更智能

主题

1. Panda:就冲这个名字，你都可以试试用它，很养眼舒服，区分安排地明明白白的
2. Material Icon Theme : 可以给vscode 资源树目录加上图标，内置的seti也很优秀，还有simple icon 和vscode-icons

结语

装上自己喜欢的插件之后，顿时爱了，如果各位小伙伴是新入坑VSCode并且也是做前端的话，可以无脑装上面的推荐试试，不喜欢个人口味的话，移除也很方便，都很小，放心使用~