下载掌阅APP，畅读海量书库
立即打开
Visual Studio Code（简称VS Code）是由微软公司推出的一款免费、开源的代码编辑器，一经推出便受到开发者的欢迎。对于前端开发人员来说，一个强大的编辑器可以使开发变得简单、便捷、高效。本书选择使用VS Code编辑器作为开发工具。
VS Code编辑器具有如下特点。
（1）轻巧极速，占用系统资源较少。
（2）具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。
（3）跨平台。不同的开发人员为了工作需要，会选择不同平台来进行项目开发，这在一定程度上限制了编辑器的使用范围。VS Code编辑器不仅是跨平台的（支持Mac、Windows和Linux），而且使用起来也非常简单。
（4）主题界面的设计比较人性化。例如，可以快速查找文件并直接进行开发，可以分屏显示代码、自定义主题颜色（默认为黑色），并可以快速查看最近打开的项目文件和查看项目文件结构。
（5）提供丰富的插件。VS Code提供了插件扩展功能，用户可根据需要自行下载和安装插件，只需在安装配置成功后重新启动编辑器，即可使用此插件提供的功能。
通过前面的学习，我们了解了VS Code编辑器的特点。下面将讲解VS Code编辑器的下载和安装过程。
打开浏览器，登录VS Code官方网站。在网站的首页可以看到软件下载按钮，如图1-2所示。
图1-2 VS Code官方网站
在图1-2所示的页面中，单击“Download for Windows”按钮，该页面会自动识别当前的操作系统并下载相应的安装包。如果需要下载其他系统的安装包，可以单击按钮右侧的小箭头，然后在弹出的菜单中就会看到其他系统版本的下载列表。
将VS Code编辑器下载完成后，双击安装包启动安装程序，然后按照程序的提示一步一步进行操作，直到安装完成。
将VS Code编辑器安装成功后，启动编辑器，主界面如图1-3所示。
图1-3 VS Code编辑器主界面
需要注意的是，VS Code默认语言是英文，如果想要切换为中文，请单击左边栏中的第5个图标按钮“Extensions”（扩展），然后输入关键词“chinese”即可找到中文语言扩展，单击“Install”按钮进行安装即可。
小提示：
VS Code默认的主题为黑色背景，如果想要更换主题，请单击左下角齿轮形状“Manage”（管理）按钮，然后在弹出的菜单中选择“Color Theme”（颜色主题）。图1-3使用的主题为明亮背景的Light+(default light)。
在VS Code编辑器的“欢迎使用”界面中，单击“打开文件夹…”，就可以选择某个文件夹来作为项目的根目录。
打开文件夹后，创建一个简单的网页，进入到代码编辑环境，如图1-4所示。
图1-4 代码编辑环境
在图1-4中，左侧有一个资源管理器。在资源管理器中，可以查看项目的目录结构。在资源管理器中任意选择一个文件，即可在右侧的代码编辑区域对该文件进行编辑。
在代码编辑区域，可以同时打开多个文件并通过标签页进行切换，标签页的标题“index.html”表示文件名。如果未对代码进行更改，当切换到其他文件进行编辑时，将会替代当前的标签页。如果不希望替换此标签页，可以双击此标签页的标题。
代码编辑区域的下半部分是一个带有“问题”“输出”“调试控制台”“终端”选项卡和各种按钮的面板。在“终端”选项卡中可以很方便地执行命令。