2.3 代码编辑器（Visual Studio Code）

一款好用的编辑器能够显著提升开发人员的工作效率。本书示例使用的是微软开发的跨平台（支持Windows、Linux和Mac OS操作系统）开源代码编辑器Visual Studio Code。

和全功能的集成开发环境Visual Studio不同，Visual Studio Code的定位是一个轻量但又功能强大的代码编辑器，可帮助开发人员进行快速编码、编译和调试。

Visual Studio Code来源于微软的一款使用HTML、CSS和JavaScript开发的在线编辑器Monaco（用于Visual Studio Online、OneDrive等），在这个基础上利用基于io.js和Chromium的开源框架Electron进行包装（Electron可以让用户使用JavaScript调用操作系统的原生API来创造跨平台桌面应用），成为一款跨平台的桌面代码编辑器。

作为代码编辑器，Visual Studio Code支持多种编程语言，其中原生支持JavaScript、TypeScript、CSS和HTML。开发人员可以通过VS Code Marketplace下载扩展插件获得其他编程语言的支持。

Visual Studio Code支持调试。原生调试功能限于Node.js环境，可以调试JavaScript、TypeScript和其他能够被转译为JavaScript的编程语言。其他运行环境和编程语言（例如PHP、Ruby、Go、C#、Python）的调试支持也可以从VS Code Marketplace下载扩展插件获得。

Visual Studio Code内置了Git版本控制功能，支持用户自定义配置，例如改变主题颜色、键盘快捷方式、编辑器属性等。

2.3.1 安装Visual Studio Code

安装Visual Studio Code的方法是，先从官网https://code.visualstudio.com/下载安装文件包，双击VSCodeSetup-stable.exe启动安装程序，如图2-6所示。

然后单击Next，按安装向导指示使用默认设置安装即可。安装结束后可以直接启动Visual Studio Code，如图2-7所示。

2.3.2 初识Visual Studio Code

和Visual Studio不同，Visual Studio Code管理项目没有专门的项目文件，它是基于文件和目录的。用户可以用Visual Studio Code打开一个文件或文件夹。

Visual Studio Code的工作界面有着简单直观的布局，提供了最大化的编辑空间，同时为用户留下足够的空间来浏览和访问文件夹，如图2-8所示。

位于工作界面最左边的是视图栏，可用来在代码目录、全局搜索、Git、代码调试和扩展插件这5个视图间切换。

侧边栏根据视图栏的选择显示不同的视图。例如，当用户选择代码目录视图时，侧边栏显示资源管理器，用来浏览、打开、管理所有文件和文件夹。

状态栏用于显示打开的项目和编辑的文件的相关信息。

用户可以在编辑区域内编辑文件。Visual Studio Code同时支持3个可视编辑器，可以编辑或查看并排在一起的3个文件。在编辑区顶部区域，每个被打开的文件都有对应的选项卡（Tabs）。

Visual Studio Code同样支持大量键盘快捷键操作。使用快捷键Shift+Ctrl+P调出命令面板，在这里可以访问Visual Studio Code所有的功能，包含最常见的快捷键操作，如图2-9所示。