先换主题——SynthWave ‘84

安装了VSCode，第一步是干什么。大部分人都会选择去汉化，但是我的第一步，是换主题。

之前在网上看到这个主题： SynthWave '84，就用了一下，从此一直没换过。

路径自动补全——Path Intellisense

这是一个非常实用的插件，我们经常引用文件路径时，如果没有自动补全，我们就需要一层一层去寻找，这样不仅效率低，而且容易出错。使用这个插件，可以在输入斜线的时候，自动匹配到对应的目录。

代码运行——Code Runner

这个插件也是我非常喜欢的。有时候我们为了测试自己的代码，经常会把代码复制到浏览器上去运行，或者直接在浏览器的控制台上去写一些代码，这样很麻烦。有了这个插件，我们可以在项目中新建一个测试用的JS文件，然后直接在VSCode上面运行。

在浏览器中打开——open in browser

上面我们讲到了Code Runner这个插件，在这里运行的代码，只能是JS的方法，不能进行DOM操作。我们也经常写一些测试用的HTML文件，但是我们发现，我们无法直接在VSCode中打开HTML文件，只能找到对应点文件，手动打开。为此，我们可以使用这个插件，只需要右键，就能在指定浏览器中打开HTML文件。

预览Markdown——Markdown Preview Enhanced

我们经常要写一些Markdown的说明文档。我们知道，使用特定的标识，就会有特定的展示效果。我们需要在编辑的时候预览，所以就用到了这个插件。这个插件运行方式，就是在Markdown文件上右键，支持源文件和效果同时展示。

代码校验——ESLint

我们知道，一般在Vue或者React的脚手架里面，都会内置Webpack，有时候也会自带ESLint。但是，脚手架里面的ESLint有一个不好的地方，就是只要你有不符合规范的地方，比如多一个空格，编译都直接报错。所以，ESLint这个插件解决了这个问题。我们使用这个插件，会在VScode底部看到报错信息，并且项目也能正常运行。

HTML标签自动修改——Auto Rename Tag

顾名思义，自动完成另一侧标签的同步修改。几个字就能概括出这个插件的实用性。

CSS兼容利器——Autoprefixer

如果我们的项目已经用webpack之类的工具配好了Autoprefixer，我们就可以放弃这个插件。如果我们的项目没有关于CSS兼容的配置，Autoprefixer这个插件是一个极好的选择。这个插件的用法很简单，保存的时候，对那些需要加前缀的样式，就会自动生成了。

格式化利器——Beautify

其实有很多种格式化代码的插件，但是我选择了Beautify，主要是因为这个插件的格式化标准，和ESLint的检查方式是一样的。

区块的区分——Bracker Pair Colorizer

我在很久之前用过一个代码编辑器，叫HBuilder，这个编辑器只要双击花括号，就能选中花括号范围内的代码。其实多数情况下，我们不需要选中，我们需要清楚地看到花括号里面有哪些代码，尤其是代码逻辑复杂，很长的时候。Bracker Pair Colorizer这个插件就能很好地解决这个问题。

To Be Continued!