前端vscode必装的效率插件，你知道吗？-vscode 前端插件

免费、开源、功能强大，vscode几乎是前端工程师们必备的轻量级代码编辑器。

它几乎支持所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

其他的代码编辑器在打开超大文件时可能会产生明显的卡顿，但vscode几乎就是秒开。因为打开速度特别快，vscode还经常被用作普通文本阅读器。

但有时需要输入的代码量比较大，在编辑的时候容易出现各种各样的小bug，检查修改起来十分费力。这个时候，在vscode中安装几款插件，就可以实现轻松改查，一键格式对正，提高编程效率。

今天，小渡就为大家推荐8款入门级vscode插件，带你完成从颜值到功能的全方位提升。话不多说，一起来看看吧！

1、颜值提升利器：Material Theme

MaterialTheme是一款vscode主题插件，通过选择不同的主题样式，不仅可以调整代码编辑器主题颜色，也能同时对代码颜色进行适配，让编辑器界面更加清爽和美观。

目前，MaterialTheme提供了十种主题颜色，在vscode中可实现一键安装，轻松换色。

欲先攻其事，必先利其器。赏心悦目的代码编辑器界面，也会让写代码的过程变得趣味十足。

2、治好你的“代码强迫症”：Prettier

在多人开发同一个项目，合并代码时，经常会遇到各人代码风格迥异，换行空格乱七八糟，2格、4格缩进交替上演等等如此令人崩溃的状况，而单人开发时，一些小错误也不可避免，简直像张东升一样分分钟把强迫症逼上悬崖。

这个时候，就需要Prettier闪亮登场了。Prettier是VSCode代码格式增强工具，一个配置文件，配合vscode，保存即将代码全部格式化。代码格式统一的问题，交给Prettier再合适不过了，轻松治好你的“代码强迫症”。

不过Prettier只关心格式化文件（最大长度、混合标签和空格、引用样式等），这显然是不够的，项目运行中还是需要引入ESlint，二者配合才能让项目代码“茁壮成长”。

3、括号连连看：Bracket Pair Colorizer 2

除了各种字母和单词，编程中最常见的就是各种各样的括号了。随着代码量的增多，{[()]}天团开始疯狂嵌套，这还让我们怎么愉快的codereview 或者改代码？

前端vscode必装的效率插件，你知道吗？「渡一教育」

图片源自网络，仅做配文展示

还好有它——BracketPair Colorizer 2！这是一款在vscode上拥有五星好评的王者软件，为代码中的各种结对的括号兄弟们提供了颜色高亮等功能。

除此之外，BracketPair Colorizer 2还提供了各种的配置选项，包括颜色的唯一性的设置、颜色模式、设置选中括号时，相应匹配括号的CSS、是否在Gutter中显示选中的括号、是否显示ScopeLine等等，可以满足你对颜色高亮的不同需求。

小伙伴们还犹豫什么！不要睡，安它！

4、html自动重命名插件：Auto Rename Tag

AutoRename Tag的特征是自动重命名配对的HTML/ XML 标签，也可以在JSX中使用。在settings.json文件中的auto-rename-tag.activationOnLanguage中添加一项以设置扩展名将被激活的语言。默认情况下，它是**[“*”]**，将为所有语言激活。