前言
之前从webstorm转投VSCode了,然后使用发现不装插件的VS感觉没WS顺手,然后就从网上搜罗了一些推荐插件,自己装上用了一下,瞬间舒服了~
所以倾力推荐给前端小伙伴们~^-^~
必备插件全套推荐
功能性插件
- Auto Close Tag : 匹配标签,关闭对应的标签。很实用【HTML/XML】
- Auto Rename Tag : sublime和webstorm也有这个内置功能,改变标签的时候同时改动开闭合标签;【HTML/XML】
-
beautify : 良好的拓展性,可以格式化
JSON|JS|HTML|CSS|SCSS
,比内置格式化好用 - colorize : 会给颜色代码增加一个当前匹配代码颜色的背景,写css的时候很舒服
- Git History : 可以看到以往git的提交列表,可视化更直观
- HTML CSS Support : 让 html 标签上写class 智能提示当前项目所支持的样式,新版已经支持scss文件检索啦
- Path Autocomplete : 路径智能补全
- Path Intellisense : 路径智能提示.
- SCSS IntelliSense Preview : SCSS智能提醒,配置强大
- Syncing: 这个同步插件支持删除同步!!!
-
Version Lens : 可以及时看到
package.json
内部版本的变动,很实用 - Output Colorizer : 可以终端日志输出着色,比较实用
- filesize: 在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间,相当实用
- Bracket Pair Colorizer: 让括号拥有独立的颜色,易于区分。可以配合任意主题使用。很关键!!!用它!
Vue插件
- Vetur: Vue语法高亮、智能感知、Emmet等
- VueHelper:写代码的时候会显示snippet代码片段
- Import Cost: 引入包大小计算,对于项目打包后体积掌握很有帮助,非常实用!
代码片段插件
- JavaScript (ES6) code snippets : ES6的代码片段,实用
- JavaScript Snippet Pack : ES5及以下的代码片段,实用
语法校验插件
- stylelint : 比内置的要全,更智能
主题
- Panda:就冲这个名字,你都可以试试用它,很养眼舒服,区分安排地明明白白的
-
Material Icon Theme : 可以给vscode 资源树目录加上图标,内置的
seti
也很优秀,还有simple icon
和vscode-icons
结语
装上自己喜欢的插件之后,顿时爱了,如果各位小伙伴是新入坑VSCode并且也是做前端的话,可以无脑装上面的推荐试试,不喜欢个人口味的话,移除也很方便,都很小,放心使用~