1.2.2 代码编辑器

“工欲善其事，必先利其器。”一款优秀的代码编辑器能够极大地提高程序的开发效率。常见的JavaScript代码编辑器有Visual Studio Code、Sublime Text、HBuilder等。本书选择基于Visual Studio Code代码编辑器进行讲解。

Visual Studio Code（简称VS Code）是由微软公司推出的一款免费、开源的代码编辑器。Visual Studio Code代码编辑器具有如下特点。

● 轻巧快速，占用系统资源较少。

● 具备代码智能补全、语法高亮显示、自定义快捷键和代码匹配等功能。

● 跨平台，可用于Windows、Linux和macOS操作系统。

● 主题界面设计人性化。例如，可以快速查找文件、分屏显示代码、自定义主题颜色、快速查看最近打开的项目文件，以及查看项目文件结构等。

● 提供丰富的扩展，用户可以根据需要自行下载和安装扩展，以增强代码编辑器的功能。

下面将讲解如何下载和安装Visual Studio Code代码编辑器、如何安装中文语言扩展、如何安装Live Server扩展以及如何创建项目文件夹。

1．下载和安装Visual Studio Code代码编辑器

打开浏览器并访问Visual Studio Code官方网站，如图1-4所示。

在图1-4所示的页面中，单击“Download for Windows”按钮可以下载Windows操作系统的Visual Studio Code安装包。如需下载其他操作系统的Visual Studio Code安装包，单击“”按钮，即可看到其他操作系统版本的下载选项，如图1-5所示。

Visual Studio Code安装包下载成功后，在下载目录中找到该安装包，双击启动安装程序，按照程序的安装向导提示操作，直到安装完成。

Visual Studio Code安装成功后，启动该编辑器，即可进入Visual Studio Code初始界面，如图1-6所示。

由图1-6可知，Visual Studio Code初始界面默认显示的语言是英文，如果要切换为中文，需要安装中文语言扩展。

2．安装中文语言扩展

为了提高Visual Studio Code代码编辑器的易用性，使其界面和提示信息显示为中文，需要安装中文语言扩展。单击Visual Studio Code初始界面左侧的第5个按钮“”进入扩展界面，在该界面的搜索框中输入关键词“Chinese”找到中文语言扩展，单击“Install”按钮进行安装即可。安装中文语言扩展界面如图1-7所示。

需要说明的是，中文语言扩展安装成功后，需要重新启动Visual Studio Code代码编辑器，该扩展才会生效。

3．安装Live Server扩展

Live Server 扩展用于搭建具有实时重新加载功能的本地服务器，可以实现保存代码后浏览器自动同步刷新，即时查看网页效果。单击Visual Studio Code初始界面左侧的第5个图标按钮“”进入扩展界面，在该界面的搜索框中输入关键词“Live Server”找到Live Server扩展，单击“安装”按钮进行安装即可。安装Live Server扩展界面如图1-8所示。

安装 Live Server 扩展后，可在编写好的网页文件中右击，在弹出的快捷菜单中选择“Open with Live Server”调用浏览器打开网页文件。

4．创建项目文件夹

在开发项目时，需要创建项目文件夹，以保存项目所需的文件。下面在本地创建一个文件夹Chapter01，创建好文件夹后，首先在Visual Studio Code代码编辑器的菜单栏中单击“文件”，然后单击“打开文件夹．..”并选择Chapter01文件夹。打开文件夹后的界面如图1-9所示。

在图1-9中，可以进行新建文件、打开文件夹等操作。