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

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

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

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

修改语言

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

重新载入

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

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

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

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

你可能说:骗人,刚才就是这么操作的,并没有代码高亮啊?

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

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

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

纯文本

点击它,会看到编辑器中央上部弹出一个菜单(黄色框内的部分):

语言选择器

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

HTML

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

【本章助记卡片:卡片 for 第六章

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

{ "locale": "zh-CN" }

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

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

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