第六章 编辑器

从小就被教育，工欲善其事，必先利其器。那我们说了这么久“写”代码，究竟用什么去写呢？

既然它是文本，就可以用任何文本编辑器进行编辑，包括电脑里最不起眼的记事本。当然，这一点儿都不好用，就好像用 Windows 的画图也能做图，但却远没有 Photoshop 用的舒适。所以我们也需要选择一款足够强大而且舒适的编辑器。在以前这个需求有一些不可兼得，现在感谢微软，我们有了 VSCode（https://code.visualstudio.com/），很漂亮，很简单易用，又很强大的编辑器。

请大家点击上面链接，从官方网站进行下载。安装过程中，如果不懂，就按默认设置，放心安装吧，一点也不流氓的。

正常情况下，安装后会直接显示为中文。如果不是，也没什么，点击左侧这个图标，在里面搜索 Chinese，第一个就是中文语言包，安装就可以了。

安装完成之后需要点击 Reload 进行重新载入，总之点击之后就是中文了。^[1]

在初期，我们不需要进行什么设置，直接使用就可以。你可以把它理解为长得好看的一些的记事本。事实上，这款编辑器十分强大，多积累一些对他的使用技巧，在日后也能够极大的提高自己的工作效率。

编辑器安装好了，也许你已经迫不及待的把我们前面所学的代码写了进去，但你发现一点儿也不好看，并不像我文章里的这些代码，花花绿绿的，看起来就那么杀马特。那么现在我来教大家如何设置代码高亮。

你没猜错，这种让代码看起来花花绿绿的效果就叫做代码高亮，他把代码中不同的东西，用不同的颜色进行标示，方便我们快速的进行分辨，使代码变得更加容易理解。这就好像家里的老人们在蒸豆包的时候，喜欢在上面放一个枣，于是馋嘴的你，很容易就找到了豆包。

首先我们新建一个文档，每次从菜单栏新建太麻烦了，所以记一下快捷键，反正新建文档这个快捷键基本上在所有软件中都是通用的：Ctrl+N。之后便是把我们前面所学的代码写进去，注意标签的尖括号（<>），以及尖括号里面的标点，都要用英文。

你可能说：骗人，刚才就是这么操作的，并没有代码高亮啊？

那么现在我们再按一下保存文件的快捷键：Ctrl+S，首先选择一个你能找得到的位置，然后记得文件名的扩展名^[2]写成 htm，或者 html，比如就叫：index.html。保存之后再回来看编辑器里面，是不是代码就已经高亮了呢？

这是什么道理呢？你最初写下一段文字，但编辑器并不知道你用的是什么语言，所以，它默认的当作纯文本进行处理，当然就没有高亮了。你保存的时候因为设定了扩展名，编辑器便知道了这个文件所使用的语言，就可以正确的对代码进行高亮了。

既然告诉编辑器当前所使用的语言，它便可以正确的进行高亮，那么我们还有一种方法可以使用。比如说，我只是临时想查看一段代码，并没有保存的需求，但是既然是查看代码，自然是进行高亮之后看起来更舒服。我们新建文档、粘入代码。然后注意编辑器的右下角，有一个“纯文本”^[3]字样。如下图：

点击它，会看到编辑器中央上部弹出一个菜单（黄色框内的部分）：

它顶部是一个搜索框，下面列出来编辑器支持的各种语言，我们现在当然用不到那么多，所以只要搜索：html，然后在下面的列表中选中即可（当然，你也可以不进行搜索，直接在列表中选择）：

我们通过这种方式，十分直接的告诉编辑器，当前这个文档使用的语言是 HTML，所以他也能够正确的对代码进行高亮。

>注释 1: 正常情况下，这时候一定是中文界面了，如果不是，尝试以下操作：退出编辑器在打开，依旧不行则按下 Ctrl+Shift+P 或者 F1，在弹出的输入框内搜索 language ，找到 Configure Display Language，点击进去，背心打开的文件内容替换为：

{ "locale": "zh-CN" }

然后退出再重新打开编辑器。

>注释 2: 文件的扩展名是指在文件名最后一个点后面的内容，如果你在文件夹中看到的文件，只有文件名，而没有扩展名，可以在文件夹“查看”选项卡中，勾选“文件扩展名”选项。

>注释 3: 如果编辑器的语言是英文，那么显示的可能是：Plain Text。