你还在用IDE？快来看看VSCode吧

最新推荐文章于 2025-10-18 19:04:52 发布

原创最新推荐文章于 2025-10-18 19:04:52 发布 · 864 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sublime text #visual studio code #eclipse #webstorm #intellij idea

开发工具锦集专栏收录该内容

4 篇文章

订阅专栏

本文介绍了几种主流的HTML编辑器，包括WebStorm、VSCode、Sublime和HBuilderX，对比了它们的特点和适用场景，并详细讲解了VSCode的下载、安装及基本使用方法。

书接上文，上回书咱们了解了 HTML 是谁，能做什么，还有 HTML 的前世今生。那么接下来，咱们先不继续学习 HTML，转而介绍一下编写 HTML 的编辑器。

为什么要介绍编辑器呢？咱们总不能一直使用普通的文本编辑器来编写 HTML 吧？！这样做既不方便，也显不出咱们的逼格。

编辑器都有哪些

废话不多说，咱们单刀直入，直接来说一说现在都有哪些编辑器吧。其实，能编写 HTML 的编辑器还是挺多的，毕竟 HTML 并不需要太多的专业能力就可以编写。

那咱就主流以及我个人比较喜欢的几款编辑器来介绍一下吧。

在这里插入图片描述

要介绍的第一款编辑器叫做 WebStorm。这款编辑器的功能是异常强大的，但缺点是比较耗电脑资源，而且价格不菲。如果你不差钱儿，电脑配置也比较好的话，可以选择这款编辑器。

接下来要介绍的 Visual Studio Code 是我个人比较喜欢的，一般咱们简称为 VSCode。这款编辑器是微软公司出品的，不仅好用，最最重要的是免费的。所以，你懂的！

第三个要介绍的同样是一款免费编辑器，叫做 Sublime。VSCode 中很多功能都是参考了 Sublime 编辑器的，这么说你就应该知道这款编辑器的厉害之处了。不过随着 VSCode 的使用者越来越多，Sublime 的使用者也慢慢在减少。

最后要介绍的是一款国产的免费编辑器，叫做 HBuilderX。这款编辑器是 DCloud 公司推出的，功能也是很强大的，提供了很多独有的功能。

以上几款编辑器都是同时支持 Windows、MacOS 和 Linux 操作系统的。好了，编辑器就介绍这几款吧！看你自己喜欢，想用哪个就用哪个吧。不过，接下来我要说说 VSCode 这款编辑器的一些基本用法。

VSCode 下载和安装

VSCode 是 Microsoft 公司在 2015 年 4 月 30 日 Build 开发者大会上推出的一款运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

VSCode 官网上给了一些简单介绍，有兴趣你可以自己去看看。咱们访问 VSCode 官网主要是下载 VSCode 编辑器的安装包。

在这里插入图片描述

VSCode 编辑器的官网会自动识别我们当前的操作系统，并且提供相应的安装包。我们需要做的就是下载对应版本的安装包到本地电脑，再进行安装即可。

关于具体的下载和安装过程，我就不细说了，因为实在是很简单！

VSCode 设置中文界面

一般情况下，安装好的 VSCode 编辑器的界面就是中文的。但也不妨有特殊情况出现，如果你安装完 VSCode 打开后发现界面是英文（或者是任何其他语言）不要担心，咱们可以通过【扩展】安装中文语言插件来解决。

安装插件首先需要你的电脑必须能联网才行，因为插件的安装是在线联网安装的！

打开 VSCode 编辑器之后，咱们可以看到在最左边有 5 个图标，其中最后一个就是【扩展】，是用来安装插件的。

在这里插入图片描述

在【扩展】界面的搜索框中，输入【Chinese】关键字来搜索中文语言插件包。搜索结果中的第一个结果一般就是咱们要找的中文语言插件包：

在这里插入图片描述

点击第一个结果中的【Install】按钮，来安装对应的插件包就行了。

安装成功之后 VSCode 编辑器会弹出让你重启编辑器的提示框，这时点击提示框中的【Restart Now】按钮，来重启 VSCode 编辑器。

在这里插入图片描述

重启之后，VSCode 编辑器的界面就成功地改为了中文。

VSCode 新建文件

VSCode 编辑器新建文件有两种方式进行操作，一种是通过 VSCode 的菜单完成，一种是通过快捷键完成的。

那么，咱们先来说一说怎么通过菜单来新建文件吧。点击 VSCode 编辑器顶部菜单中的【文件】，在弹出的菜单中选择【新建文件】选项，完成新建文件的操作。

在这里插入图片描述

简单吧？其实快捷键新建文件更简单的。如果你的操作系统是 Windows 的话，可以通过 Ctrl+N 快捷键直接创建一个新的文件。如果你的操作系统是 Mac OS 的话，可以通过 Command+N 快捷键直接创建一个新的文件。

不过，有个事儿你得注意一下，新建的文件在没有保存的情况下，是没有任何扩展名的。也就是说，新建的文件不属于任何文件类型。

VSCode 保存文件

说完怎么新建文件，咱们再来说说 VSCode 编辑器怎么来保存文件吧。VSCode 编辑器保存文件也有两种方式进行操作，和新建文件有点类似，一种是通过 VSCode 的菜单完成，一种是通过快捷键完成的。

那么，咱们还是先来说一说怎么通过菜单来新建文件吧。点击 VSCode 编辑器顶部菜单中的【文件】，在弹出的菜单中选择【保存】选项，完成保存文件的操作。

在这里插入图片描述

咱们再来说说快捷键的操作吧。如果你的操作系统是 Windows 的话，可以通过 Ctrl+S 快捷键完成保存文件的操作。如果你的操作系统是 Mac OS 的话，可以通过 Command+S 快捷键完成保存文件的操作。

刚才咱已经说了，没保存的文件是没有扩展名的。所以，保存文件的时候一定要指定文件的扩展名。如果不指定文件的扩展名的话，这个文件将不属于任何文件类型，并且会影响内容的编写。