点此查看所有教程、项目、源码导航

本文目录

1. 编辑器2. 编辑器是干啥的3. VSCode编辑器的特长4. VSCode下载与安装5. VSCode安装6. 小结

1. 编辑器

在之前的章节中，我们一直使用最原始的记事本进行代码的编辑。然后将文件拓展名修改为.html后，通过浏览器进行查看。

随着我们学习的标签种类越来越多，大家可能已经发现了，用记事本写一段网页代码是非常费劲的。

所以本篇，我们就来给大家介绍一款超好用的代码编辑器，也是现今前端开发领域最流行的编辑器——VSCode。

2. 编辑器是干啥的

注意，如果是同样的一段代码，使用记事本编写，或者使用VSCode等编辑器进行编写，其实写出来的东西是一模一样的，都是代码。

但是，编辑器可以让代码显示得更加清晰、直观。例如可以用颜色区分代码的不同部分，帮助大家理解代码；可以自动补全代码，提高大家的编写效率；可以自动为代码进行格式化，让代码更加井井有条。

所以编辑器，实际上是一种提高效率的工具。

3. VSCode编辑器的特长

网页编辑器有很多，为何VSCode能够独领风骚？

我认为VSCode成功的一个关键是插件机制，就是可以通过安装各种插件来拓展VSCode的功能。

例如VSCode默认是英文版本的，可以安装一个中文插件，就能显示中文版本了。

通过插件机制，VSCode具备了无限可能性！

4. VSCode下载与安装

说了半天，我们来下载并安装VSCode，其实VSCode也是一个软件，下载后双击安装包安装就是了。

首先打开下载地址：VSCode下载地址，然后选择Windows版本下载，如下图：

点击上图中圈出的下载链接，然后稍等一会就会启动下载。

5. VSCode安装

下载完毕后，我们得到了一个安装包，它是一个exe可执行程序。双击这个程序，即可开始安装VSCode。

接下来，我通过截图的方式，详细给大家描述下安装过程，以便让大家明白我们安装过程的细节。

第1步，是要同意安装协议，相当于你要使用人家这个软件，就得同意人家的一些条件，这个嘛同意就行，然后点击下一步。

第2步，选择红线标出的两个复选框，创建桌面快捷方式很好理解，就是在桌面上放一个图标，可以双击打开VSCode；添加到PATH的意思是将VSCode添加到系统环境变量，这样我们在使用命令行等工具的时候，可以轻松调用到VSCode。注意添加到PATH这个如果不理解的话，也没啥影响，感兴趣的同学可以自己再去搜索了解。

第3步，直接点击安装就OK了。

最后，安装完毕后，可以双击桌面上的VSCode图标启动VSCode进行使用。

6. 小结

本篇介绍了VSCode的特点及安装过程，下一篇讲解下VSCode的常见用法。