VS Code

嗯,本人就是坚定的VS Code党,因为VS Code的功能确实非常强大,而且很友好,所以这篇文章来介绍一下如何搭建我们的VS Code开发环境,主要来介绍一些插件

安装

官网下载安装即可,但是安装了之后可能我们的VS Code还是英文版的,这时候就需要我们点击最左侧竖排按钮的第五个,进入扩展菜单后搜索Chinese,然后选择简体中文语言包并且重新加载即可

美化类

扩展是VS Code的灵魂,有了扩展,我们就可以把它变成一个好用的IDE,并且支持各种语言...

所以,第一部分我们先来介绍一些如何美化它的插件及配置(当然,是我个人正在使用的配置)

Material Theme + Material Icon Theme

有一段时间我疯狂换主题,但最后还是觉得Material Theme才是那个各方面色彩平衡都做得最好的主题,所以试了超多主题之后,个人还是推荐这个很经典的主题

Bracket Pair Colorizer

作用是让不同层次的括号(包括大中小括号)显示不同的颜色,并且相同缩进的地方显示彩色的线,如下:

bpc

TODO Highlight

自动为注释里的TODO:FIXME:分别添加黄色和红色的高亮提醒,让你快速找出哪里还没做完

Glasslt-VSC

为你的VS Code提供透明效果,应该是使用纯CSS实现的,非常推荐,透明了比不透明的视觉效果好太多了

功能类

Auto Close Tag

自动闭合HTML、XML等标签,实际上VS Code是自带这功能的,但是有一次更新之后我的就不能用了,所以在扩展补一个也是没问题的~

Auto Import & Path Autocomplete

引入时自动补全路径

Auto Rename Tag

自动重命名前后的标签,也就是改了前面的标签可以同时修改后面的结束标签

ESLint

Javascript代码规范工具,具体参考Here

HTML Snippets

HTML代码补全插件

IntelliSense for CSS class names in HTML

扫描并自动补全CSS类名,当然感觉功能不是很完善

Live Server

本地构建一个调试服务器,可以热更新

Prettier

代码自动格式化工具,十分推荐

Vetur

vue.js VS Code相关工具

一些链接