menu_book
description
VSCode 是在宁皓独立开发者训练营中选择使用的代码编辑器,在训练营中编写的 65000 行代码都是通过这款编辑器完成的。
VSCode 是一款代码编辑器,开源、免费、跨平台、可定制、可扩展。
在 VSCode 官方网站下载合适的版本,然后将其安装在系统上,无需单独练习编辑器的使用技巧,可在实际开发中不断地积累。
命令面板(command palette) 是比较常用的功能,在编辑器里能做的大部分的事情都可以在命令面板里找到并执行。
打开命令面板的快捷键
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 可以自动排版(格式化)编写的代码,在训练营中,我们会用它排版编写的 JavaScript / TypeScript、CSS 与 Vue 组件的代码。
官方网站:https://prettier.io
打开 VSCode 扩展,搜索 prettier,安装一下 Prettier - Code formatter 这个扩展。
在 VSCode 扩展搜索 prettier 关键词
Prettier 扩展提供了一些配置选项,你可以在 VSCode 编辑器的设置里去修改这些选项的值。
在开发的项目的根目录下面,可以提供一个 Prettier 的配置文件,名字是 .prettierrc,文件内容的格式是 JSON,在这个文件里可以设置 Prettier 排版代码时用的一些规则。比如将 singleQuote 设置成 true,意思是在格式化代码时将双引号自动转换成单引号。
项目根目录里的 Prettier 配置文件
Prettier 扩展可以作为 VSCode 编辑器的一种 Formatter(格式化工具),在命令面板搜索并执行 Format Document... ,这会弹出一个格式化工具列表菜单,可以进一步选择使用 Prettier,这样就会使用 Prettier 格式化当前文件里的代码了。
在命令面板搜索 format document
我们可以勾选 VSCode 编辑器的 Format on save 这个配置选项,然后可以配置让指定类型的文件默认使用 Prettier 作为格式化代码用的工具, 这样当保存文件时,就会自动使用 Prettier 格式化被保存的这个文件里的代码。
Vetur 这个扩展提供了开发 Vue 应用时需要的一些功能。在训练营中开发 Vue 应用时会用到这个扩展提供的功能。
打开编辑器的扩展,搜索并安装 Vetur 扩展。
在 VSCode 扩展搜索 vetur 关键词
Flutter 这个扩展提供了开发 Flutter 应用时需要的功能。在训练营中开发 Flutter 移动端应用时会用到这个扩展提供的功能。
打开编辑器的扩展,搜索并安装 Flutter 扩展。
VSCode 支持定制界面颜色主题与文件图标主题,这些主题也属于编辑器的扩展,所以你可以在编辑器的扩展商店里搜索并安装新的主题。
文件图标主题可以改变在编辑器边栏上显示的文件与目录列表所使用的小图标。
Material Icon Theme 是在训练视频中出现的 VSCode 编辑器使用的文件图标主题。
打开编辑器的扩展,搜索并安装 Material Icon Theme,完成安装以后 VSCode 默认会将其设置为当前使用的文件图标主题。这款主题有几种网格,训练视频中使用的是 Classic 风格的主题。
在 VSCode 扩展里搜索 material icon theme
打开命令面板,搜索并执行 File Icon Theme,这会列出编辑器里可选的文件图标主题,你可以选择想要使用的主题。
在命令面板搜索 file icon theme
VSCode 编辑器的颜色主题可以改变编辑器界面与代码高亮的样式。
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 > Preferences: Import Module Specifier 这个配置选项,将选项的值设置成 relative(相对)。
打开命令面板,搜索并执行 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 代码文件里导入模块时会使用相对的路径。
编写应用时,输入几个字母按下 tab 键就可以快速插入事先定义好的代码块,这就是在 VSCode 编辑器里的代码片断提供的功能。将经常要在项目里编写的,具有同样模式的代码块定义成代码片断。代码片断可以区分语言,也就是我们可以为某种特定的程序语言定义代码片断。代码片断可以在全局范围定义,也可以在项目级别定义。
在训练营里编写应用时,我们会使用项目级别的代码片断,这些代码片断会包含在项目的初始仓库里,所以准备好项目以后,你可以直接使用在项目里定义的代码片断。
定义项目级别的代码片断,可以将定义代码片断的文件放在项目根目录下的 .vscode 这个目录里面,代码片断的文件名需要 .code-snippets 后缀,比如 nid-nest.code-snippets,VSCode 会自动获取在项目里定义的代码片断。
定义代码片断的文件的内容格式是 JSON,每个代码片断需要设置它的标题,前缀(prefix)代码主体(body),在编写应用时输入代码片断的前缀字符时,VSCode 会提示可用的代码片断,按下 tab 以后就会插入当前选择的代码片断。
在定义代码片断的时候可以在设置一些编辑点,每个编辑点都有编号,还可以设置可选的占位符文字,比如 ${1:Name} ,指的就是在插入代码片断以后,第一个要编辑的地方。完成编辑以后按下 tab 会跳转到下一处编辑点,也就是 ${2}。
示例
.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
在编写项目的时候,输入代码片断的前缀(prefix),VSCode 就会列出相关的代码片断,选择要插入的代码片断,然后按下 tab 键就可以插入对应的代码片断了。
在项目文件里输入 ec 这个前缀,会显示可以使用 CQRS: Execute command 这个代码片断,按下 tab 键可以在当前位置插入这个代码片断。
插入代码片断以后,可以编辑代码片断里的第一个编辑点,完成编写以后按下 tab 键可以跳转到下一处编辑器继续修改这个代码片断。