Visual Studio Code必备拓展【持续更新】

目录

一、视觉拓展

（一）Material Theme

（二）Material Icon Theme

（三）Prettier - Code formatter

（四）Bracket Pair Colorizer 2

（五）indent-rainbow

二、功能拓展

（一）Auto Rename Tag

（二）REST Client

（三）CSS Peek

（四）HTML CSS support

（五）Live Server

一、视觉拓展

让我们进行可视化编码、颜色和格式。

（一）Material Theme

提供多个颜色主题拓展。

安装成功后点击设置-->主题-->颜色主题-->手动输入关键词“material”筛选整理。

（二）Material Icon Theme

提供多样化的图标样式，包括文件菜单以及顶部栏。

安装成功后点击设置-->主题-->文件图标主题-->手动输入关键词“material”筛选整理。

（三）Prettier - Code formatter

让代码变得更漂亮，统一文档中代码的格式。

可以按照自己编号设置并且保存。流程：快捷键ctrl + ，-->输入format on save，选中。这样当保存时会自动格式化。

（四）Bracket Pair Colorizer 2

为括号、花括号着色，清楚地找到首尾，突出显示括号内的内容，通过视觉表现更容易识别出在代码的哪部分。

此拓展在当前版本的Visual Studio Code中已经内置，通过设置可以使用此拓展。

（五）indent-rainbow

通过给边距加颜色来更好识别，提示正在查看哪部分代码。

二、功能拓展

提高效率

（一）Auto Rename Tag

重命名起始标签会自动修改结束标签；如果修改结束标签，起始标签也会自动修改。

（二）REST Client

对前后端或全栈开发者大有裨益，当你处理一个后端接口时，如果你想知道API响应什么，可以在Visual Studio Code中得到响应，不用切换到另一个程序。

（三）CSS Peek

可以从html中查看css（类）定义。摁住ctrl然后移动到类上，自动找到定义；如果单击，则会自动跳转到css文件中；如果有多个地方定义，会都显示出来。

如果有很多的css文件这个拓展很有帮助，因为我们很难挨个寻找。

（四）HTML CSS support

智能提示类名。

（五）Live Server

创建一个具有实时重载功能的本地服务器，当创建网页大有帮助。