代码编辑器

VSCode 是在宁皓独立开发者训练营中选择使用的代码编辑器，在训练营中编写的 65000 行代码都是通过这款编辑器完成的。

VSCode

VSCode 是一款代码编辑器，开源、免费、跨平台、可定制、可扩展。

官方网站：https://code.visualstudio.com/
下载地址：https://code.visualstudio.com/Download

安装与使用

在 VSCode 官方网站下载合适的版本，然后将其安装在系统上，无需单独练习编辑器的使用技巧，可在实际开发中不断地积累。

使用命令面板

命令面板（command palette）是比较常用的功能，在编辑器里能做的大部分的事情都可以在命令面板里找到并执行。

打开命令面板的快捷键

macOS：command + shift + p
Windows：ctrl + shift + p

使用 code 命令

code 是 VSCode 编辑器自带的一个命令行工具，在命令行界面下，使用这个命令可以方便地打开文件与目录。

在 PATH 中添加 code 命令

如果想在终端使用 code 命令，需要将其添加到 PATH 这个环境变量里。先打开命令面板，然后搜索并执行 install code command in PATH（在 PATH 中添加 code 命令），完成以后就可以在终端执行 code 这个命令了。

使用 code 命令打开目录

在终端执行 code 命令，后面可以加上要打开的目录或文件。

code ~/desktop/nid-node

执行上面的命令，会用 VSCode 编辑器打开桌面上的 nid-node 这个目录。

扩展

中文语言包

默认 VSCode 编辑器界面上的文字是英文的，我们可以给编辑器安装额外的语言包，这样就可以改变界面上显示的文字使用的语言了。

安装中文语言包

打开扩展，搜索 chinese，安装中文简体或中文繁体扩展，完成以后重启编辑器，界面上就会使用中文语言了。

在 VSCode 扩展搜索 chinese 关键词

配置显示语言

推荐大家先熟悉一下英文界面，了解一下在编辑器里出现的各种东西的英文名，这样以后遇到问题的时候可以方便使用英文去搜索。改变界面显示的语言，可以打开命令面板，搜索并执行 Configure Display Language，选择要使用的语言，比如 en（英文）或 zh-cn（简体中文），重新启动编辑器即可生效。

在命令面板搜索 display language 命令

Prettier

Prettier 可以自动排版（格式化）编写的代码，在训练营中，我们会用它排版编写的 JavaScript / TypeScript、CSS 与 Vue 组件的代码。

官方网站：https://prettier.io

安装 Prettier 扩展

打开 VSCode 扩展，搜索 prettier，安装一下 Prettier - Code formatter 这个扩展。

在 VSCode 扩展搜索 prettier 关键词

配置 Prettier

Prettier 扩展提供了一些配置选项，你可以在 VSCode 编辑器的设置里去修改这些选项的值。

在开发的项目的根目录下面，可以提供一个 Prettier 的配置文件，名字是 .prettierrc，文件内容的格式是 JSON，在这个文件里可以设置 Prettier 排版代码时用的一些规则。比如将 singleQuote 设置成 true，意思是在格式化代码时将双引号自动转换成单引号。

项目根目录里的 Prettier 配置文件

使用 Prettier

Prettier 扩展可以作为 VSCode 编辑器的一种 Formatter（格式化工具），在命令面板搜索并执行 Format Document... ，这会弹出一个格式化工具列表菜单，可以进一步选择使用 Prettier，这样就会使用 Prettier 格式化当前文件里的代码了。

在命令面板搜索 format document

我们可以勾选 VSCode 编辑器的 Format on save 这个配置选项，然后可以配置让指定类型的文件默认使用 Prettier 作为格式化代码用的工具，这样当保存文件时，就会自动使用 Prettier 格式化被保存的这个文件里的代码。

Vetur

Vetur 这个扩展提供了开发 Vue 应用时需要的一些功能。在训练营中开发 Vue 应用时会用到这个扩展提供的功能。

安装 Vetur 扩展

打开编辑器的扩展，搜索并安装 Vetur 扩展。

在 VSCode 扩展搜索 vetur 关键词

Flutter

Flutter 这个扩展提供了开发 Flutter 应用时需要的功能。在训练营中开发 Flutter 移动端应用时会用到这个扩展提供的功能。

安装 Flutter 扩展

打开编辑器的扩展，搜索并安装 Flutter 扩展。

主题

VSCode 支持定制界面颜色主题与文件图标主题，这些主题也属于编辑器的扩展，所以你可以在编辑器的扩展商店里搜索并安装新的主题。

文件图标主题

文件图标主题可以改变在编辑器边栏上显示的文件与目录列表所使用的小图标。

安装 Material Icon Theme

Material Icon Theme 是在训练视频中出现的 VSCode 编辑器使用的文件图标主题。

打开编辑器的扩展，搜索并安装 Material Icon Theme，完成安装以后 VSCode 默认会将其设置为当前使用的文件图标主题。这款主题有几种网格，训练视频中使用的是 Classic 风格的主题。

在 VSCode 扩展里搜索 material icon theme

设置文件图标主题

打开命令面板，搜索并执行 File Icon Theme，这会列出编辑器里可选的文件图标主题，你可以选择想要使用的主题。

在命令面板搜索 file icon theme

颜色主题

VSCode 编辑器的颜色主题可以改变编辑器界面与代码高亮的样式。

安装 Ninghao Color Theme

Ninghao Color Theme 在训练视频中出现的 VSCode 编辑器使用的颜色主题。

打开扩展，搜索 ninghao，然后安装 Ninghao Color Theme 这个扩展，完成以后选择使用 Ninghao Dark 这款颜色主题。

在 VSCode 扩展搜索 ninghao

设置颜色主题

打开命令面板，搜索并执行 Color Theme，这会列出编辑器里的颜色主题，你可以选择自己要使用的颜色主题。

在命令面板搜索 color theme

配置

VSCode 支持全局范围与项目级别的配置，配置以 JSON 格式保存，放在 settings.json 文件里。

全局配置

打开命令面板，搜索并执行 Open Settings UI，这会打开设置界面，通过这个界面可以修改编辑器的全局范围的一些设置。

保存文件时格式化代码

在配置搜索 format on save，勾选一下 Editor:Format On Save 这个选项，这样编写了代码文件的内容并保存文件后，就会自动格式化编写的代码。

TypeScript 导入模块时使用相对路径

在训练营中，我们会使用 TypeScript 语言编写应用，编辑器自动导入模块时可以使用模块的相对路径。打开编辑器的配置，然后找到 TypeScript > Preferences: Import Module Specifier 这个配置选项，将选项的值设置成 relative（相对）。

settings.json

打开命令面板，搜索并执行 Open Settings JSON，这会打开一个 settings.json 文件，文件里存放的就是 VSCode 编辑器在全局范围的配置。通过编辑器的设置界面修改的配置选项都会记录在这个文件中。

示例

"editor.formatOnSave": true

在 settings.json 文件中搜索 formatOnSave，你会发现它的值应该是 true，因为之前通过图形界面的配置，勾选了 Editor:Format On Save 这个选项。

项目配置

VSCode 编辑器支持设置项目级别的配置，这些配置只会影响到当前项目。

设置项目级别的配置

要设置 VSCode 编辑器的项目级别的配置，可以在项目的根目录的下面新建一个 .vscode 目录，在个目录里再新建一个 settings.json 文件。

示例

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "typescript.preferences.importModuleSpecifier": "relative"
}

如果在项目中添加上面这个 VSCode 编辑器配置文件，编辑器会在保存文件时格式化代码，在 TypeScript 代码文件里导入模块时会使用相对的路径。

示例

.vscode/nid-nest.code-snippets

{
  "CQRS: Execute command": {
    "prefix": "ec",
    "body": [
      "${3}this.commandBus.execute(",
      "  new ${1:Name}Command(${2})",
      ");"
    ]
  }
}

在上面的代码片断文件里定义了一个代码片断，标题是 CQRS: Execute command，前缀是 ec，在这个代码片断的主体里设置了三处编辑点。

参考

https://github.com/ninghao/nid-nest-starter/blob/master/.vscode/nid-nest.code-snippets