免费、开源、强大，vscode几乎是前端工程师必备的轻量级代码编辑器。支持几乎所有主流编程语言的语法高亮、智能代码补全、自定义热键、括号匹配等特性，支持插件扩展，针对Web开发和云应用开发进行了优化。其他代码编辑器在打开大文件时可能会出现明显的卡顿，但vscode打开几乎是秒级的。由于其极快的打开速度，vscode经常被用作普通的文本阅读器。但是有时候需要输入的代码量比较大，编辑的时候容易出现各种小bug，检查修改起来很费力。这时候通过在vscode中安装几个插件，可以方便的改签，一键格式对齐，提高编程效率。今天小度就为大家推荐8款入门级的vscode插件，带你完成从外观到功能的全方位提升。话不多说，一起来看看吧！1.外观增强工具：MaterialThemeMaterialTheme是一款vscode主题插件。通过选择不同的主题风格，不仅可以调整代码编辑器的主题色，还可以同时适配代码颜色，让编辑器界面更加清爽美观。.目前，MaterialTheme提供十种主题色，在vscode中一键安装，轻松换色。欲先攻其物，必先利其器。赏心悦目的代码编辑器界面，也会让编写代码的过程变得有趣起来。2.治好你的“代码强迫症”：Prettier在多人开发同一个项目合并代码时，经常会遇到不同的代码风格，换行符乱七八糟，2空格和4空格缩进交替出现等，这种令人沮丧的情况，而一个人开发的时候，难免有些小失误，就像张东升分分钟把强迫症推到悬崖上一样。这时候，Prettier就需要登场了。Prettier是一款VSCode代码格式增强工具。是配合vscode的一个配置文件，用来保存和格式化所有的代码。统一代码格式的问题最好还是交给Prettier吧，它可以轻松治愈你的“代码强迫症”。然而，Prettier只关心格式化文件（最大长度、混合标签和空格、引用样式等），这显然是不够的。项目运行时仍然需要引入ESlint，两者配合可以让项目代码“节俭”。3.括号连连看：BracketPairColorizer2除了各种字母和单词，编程中最常见的就是各种括号。随着代码量的增加，{[()]}天团开始疯狂嵌套。我们如何才能愉快地进行代码审查或更改代码？图片来自网络，仅供配文展示。幸运的是，有它——BracketPairColorizer2！这是一款在vscode上五星好评的王者软件，为代码中的各种配对括号兄弟提供了颜色高亮等功能。此外，BracketPairColorizer2还提供了多种配置选项，包括颜色设置的唯一性、颜色模式、选中括号时、括号对应的匹配CSS、是否在Gutter中显示选中的括号、是否显示displayScopeLine等，可以满足你对颜色高亮的不同需求。你们还犹豫什么呢！别睡了，睡吧！4.HTML自动重命名插件：AutoRenameTagAutoRenameTag的特点是自动重命名成对的HTML/XML标签，在JSX中也可以使用。在settings.json文件中向auto-rename-tag.activationOnLanguage添加一个条目，以设置扩展将被激活的语言。默认情况下它是**["*"]**并且将为所有语言激活。修改html标签，AutoRenameTag会自动为你完成尾部结束标签的同步修改。5、帮助您快速查找css代码：CsspeekCSSPeek插件扩展了HTML和ejs代码编辑功能，支持在源代码中的字符串中查找css/scss/less（classes和ids）。这在很大程度上受到方括号中称为CSS内联编辑器的类似功能的启发。此扩展支持所有正常的符号定义跟踪功能，但它针对css选择器（类、id和HTML标记）。这包括：查找：内联加载一个css文件并在那里进行快速编辑(Alt+F12)转到定义：直接跳转到css文件或在新编辑器中打开它(F12)鼠标悬停：将鼠标悬停在symboltodisplaythedefinition(Ctrl+Hover)此外，如果你已经知道类名或ID名，Csspeek还可以将鼠标指向你html中的一个类名或id名，按住Ctrl键+鼠标左键定位直接在名字的CSS位置，快速跳转到正确的CSS/SCSS/LESS代码，可以说大大提高了开发效率。6.换手机不用愁：SettingsSyncVscode上另一款五星级高颜值插件——代码同步工具SettingsSync。它基于GitHubTokens和GitHubGist功能，可以轻松地一键上传和下载，以在多台机器上同步设置、代码片段、主题、文件图标、启动、键绑定、工作区和扩展。因为Vscode并没有像webstorm一样集成几乎所有需要的插件，所以需要一个一个手动安装。但是插件多了之后，如果换了设备，来回安装vscode插件和快捷键配置会很麻烦。这时候你可以通过SettingsSync插件轻松解决这个问题。通过配置文件的形式，可以在多个设备之间同步vscode的配置，非常好用。7、图片预览工具：图片预览Imagepreview是一款非常实用的图片预览工具。作为vscode五星好评的图片工具，它会在鼠标悬停时根据路径在代码栏中显示图片及其大小，大大节省了我们浏览图片的时间和精力。8.高亮匹配标签：高亮匹配标签HighlightMatchingTag是高亮匹配的开始或结束标签。它的原理和instant-rename-tag完全一样，只是绑定了不同的事件钩子。1.通过post-command-hook监听光标移动事件，如果当前是web-mode，继续处理2.如果光标在Tag区域，找到匹配的光标，然后使用Overlay高亮匹配的标签3.如果光标不在Tag区域Area，隐藏标签高亮安装HighlightMatchingTag插件后，可以在用户设置中自定义匹配光标。除了一些好用的插件，还有一些实用的vscode快捷键，也可以提高工作效率——Ctrl+P：转到文件，可以移动到VisualStudioCode中打开的文件/文件夹中的任意文件。Ctrl+`:在VSCode中打开终端Alt+Down:向下移动一行Alt+Up:向上移动一行Ctrl+D:将选中的字符移动到下一个匹配的字符串Ctrl+Space:触发建议Shift+Alt+Down:向下复制一行Shift+Alt+Up:CopylineupCtrl+Shift+T：重新打开最近关闭的窗口
