VS Code 从入门到放弃 IDE

本文键盘图标映射表 ( 括号内的为 Windows 下快捷键 ):

编辑器进化史

Eclipse ( 插件运行在主进程中,容易崩溃 )
Emacs ( 插件语言 Lisp )
Vim ( VimL )

为什么要 VS Code

自带的 JavaScript 和 TypeScript 支持, 开源和开放

编辑器的需求

• 多光标支持
• 智能提示
• 行操作
• 快速重构和提取
• 格式化代码
• 代码折叠
• 错误提示
• 语法片段
• 内置语言支持
• 类型检查

对编程语言的支持

• 语法高亮
• 自动补全
• 调试测试

编辑器生态环境

• 扩展插件
• 版本管理

学习路径

1. 快捷键、语言支持
2. 扩展组件
3. 插件编写

VS Code History

• Not IDE
• Monaco Editor
• MIT 协议开源
• Language Server Protocol & Code Debugging Protocol

版本

Insiders

Weekday Update

Stable

Monthly Update

使用

• 命令面板 ⌘ + ⇧ + P
• 界面概览
• 交互式演习场 (产品介绍)

双手不离键盘

光标移动

• ⌥ ( ⌃ ) + 左右方向键 : 移动单词
• ⌘ + 左右方向键 ( Home || End ): 行首行末移动
• ⌘ + ⇧ + \ ( ⌃ + ⇧ + \ ): 花括号首末移动
• ⌘ + 上下方向键 ( ⌃ + Home / End ): 文档首末移动

文本选择

• 在光标移动的基础上, 加上 ⇧ 按键可以实现选中
• 对于代码块的选择, 可以使用命令面板的 “选择括号所有内容” 实现, 并可绑定你喜欢的快捷键

删除操作

• 可以选中后删除
• ⌥ + delete ( ⌃ + Backspace ): 删除光标左侧单词内字符
• ⌥ + Fn + delete ( ⌃ + Delete ): 删除贯标右侧单词内字符

删除行、删除多行

• ⌘ + ⇧ + K ( ⌃ + ⇧ + K ): 删除当前行, 选中多行则删除多行

剪切行

• ⌘ + X ( ⌃ + X ): 剪切当前行, 选中多行则剪切多行

在当前光标的下一行另一起行

• ⌘ + Enter ( ⌃ + Enter ): 剪切当前行, 选中多行则剪切多行

在当前光标的上一行另一起行

• ⌘ + ⇧ + Enter ( ⌃ + ⇧ + Enter ): 剪切当前行, 选中多行则剪切多行

移动行、移动多行

• ⌥ + 方向键 ( Alt + 上下方向键 ): 移动当前行, 选中多行则移动多行, 制表符也会智能调整

复制行、复制多行

• ⌥ + ⇧ + 方向键 ( Alt + ⇧ + 上下方向键 ): 复制当前行到指定位置, 选中多行则复制多行

注释代码

• ⌘ + / ( ⌃ + / ): 单行注释代码
• ⌥ + ⇧ + A ( Alt + ⇧ + A ): 多行注释代码

格式化代码

• ⌥ + ⇧ + F ( Alt + ⇧ + F ): 格式化代码
• ⌘ + K & ⌘ + F ( ⌃ + K & ⌃ + F ): 格式化选中代码

调整缩进

• 使用命令面板的“重新缩进行”, 对选中代码进行自动缩进调整
• 使用 Tab / ⇧ + Tab 对选中代码进行前后缩进
• 使用 ⌃ + ] / ⌃ + [ ( ⌘ + ] / ⌘ + [ ) 对选中代码进行前后缩进

有趣的命令

• 调换字符的位置
• 调整字符的大小写
• 合并代码行
• 行排序 ( 升降序排序 )
• 撤销光标移动 ⌘ + U ( ⌃ + U )

多光标特性

创建多光标

• ⌥ ( Alt ) + 鼠标左键
• ⌘ + ⌥ + 方向键 ( ⌃ + Alt + 方向键 )
• ⌘ ( ⌃ ) + D 选中相同字符
• ⌥ ( Alt ) + ⇧ + I 在选中的每行最后创建光标

文件跳转

• ⌘ ( ⌃ ) + Tab 切换
• ⌘ ( ⌃ ) + PageUp/PageDown 切换前后文件
• ⌘ ( ⌃ ) + P 输入模糊文件名切换, 找到文件后使用 ⌘ ( ⌃ ) + Enter 可以在新编辑窗口打开

行跳转

• ⌘ ( Control ) + G 输入行号, 然后 Enter
• 也可以使用 ⌘ ( Control ) + P + :

符号跳转

• ⌘ ( ⌃ ) + ⇧ + O 跳转到文件内变量或函数, 后面跟一个 : 可对结果进行筛选分类

定义、实现跳转

• F12 跳转到函数、变量定义的位置
• ⌘ ( ⌃ ) + F12 跳转到函数、变量实现的位置

鼠标操作

鼠标左键

• 单击: 移动光标
• 双击: 选中单词
• 三击左键 / 单击行号: 选中当前行
• 四击: 选中整个文档
• 拖动行号: 选中多行
• 拖动选中文字: 移动文字
• 按住 ⌥ ( ⌃ ) 拖动选中文字: 复制移动文字
• 按住 ⌥ ( Alt ) 拖动文字: 创建多行多光标 ( 拖选文字 )
• 按住 ⌘ ( ⌃ ) 拖动文字: 创建多个选中区
• 按住 ⌘ ( ⌃ ) 单击超链接: 打开超链接

鼠标中键

• 按住拖动: 创建多行多光标 ( 拖选文字 )

鼠标悬停

• 悬停: 显示类型信息
• 按住 ⌘ ( ⌃ ) 悬停: 显示实现信息
• 显示信息后左键单击: 跳转实现

代码补全、快速修复、重构 ( 基于语言服务 )

代码补全

• ⌃ + 空格: 重新调用出语法提示
• ⌘ + ⇧ + Space ( ⌃ + ⇧ + Space ): 参数预览

快速修复

• ⌘ ( ⌃ ) + . : 修复代码错误

重构

• F2: 快速重构
• ⌘ ( ⌃ ) + ⇧ + R: 提取、重构函数代码

Code Snippet

Configure User Snippets: 建立代码片段

• $1 $2 ... : Tab Stop
• ${1:label}: Placeholder
• $1 $1: 多光标
• $CLIPBOARD: 预设变量

代码折叠、小地图和面包屑

代码折叠

• ⌘ + ⌥ + 方括号 ( ⌃ + ⇧ + 方括号 ): 在内层、可被折叠的折叠
• ⌘ ( ⌃ ) + K & ⌘ ( ⌃ ) + 方括号: 递归折叠、打开当前光标所在代码层
• ⌘ ( ⌃ ) + K & ⌘ ( ⌃ ) + 0: 一次性折叠当前光标最外代码层
• ⌘ ( ⌃ ) + K & ⌘ ( ⌃ ) + J: 一次性打开当前光标最外代码层
• //#region 和 //#endregion 和 //region 和 //endregion JavaScript / TypeScript 添加折叠指令关键字

小地图

• 可以在设置中控制渲染的文字数量和是否渲染实际文字

面包屑

• 现在阶段是默认关闭的

极速搜索

单文件搜索

• ⌘ ( ⌃ ) + F: 单文件搜索
• ⇧ + Enter: 在搜索结果中跳转
• ⌘ + G ( F3 ): 搜索结果中自上而下跳转
• ⇧ + ⌘ + G ( ⇧ + F3 ): 搜索结果中自下而上跳转
• 选区后 ⌘ ( ⌃ ) + F: 优先在选择区内进行搜索

搜索配置

• ⌘ + ⌥ + C ( Alt + C ): 大小写敏感 ( Case )
• ⌘ + ⌥ + W ( Alt + W ): 全字匹配 ( Work )
• ⌘ + ⌥ + R ( Alt + R ): 正则表达式匹配 ( Regex )

单文件替换

• ⌘ ( ⌃ ) + H: 替换文字

多文件搜索配置

• search.collapseResults 是否每次都展开所有搜索结果
• search.location 搜索试图的位置

优化编辑器设置

• 行号设置: editor.lineNumbers
• 参考缩进线: editor.renderIndentGuides
• 垂直标尺: editor.rulers
• 小地图: editor.minimap
• 光标设置: editor.cursor
• 行背景色: editor.renderLineHighlight
• 保存时格式化: editor.formatOnSave
• 输入时格式化: editor.formatOnType
• 默认文件语言: files.defaultLanguage

工作台和命令面板

工作台

命令面板

• > 显示所有命令
• @ 用于显示和跳转中的符号, 添加 : 可以把符号按类别归类
• # 用于显示和跳转工作区的符号
• : 用于跳转到当前文件的某一行
• edt 编辑当前打开文件
• ext 管理插件
• task
• debug
• term 打开 terminal
• view 打开各个组件

multi-root workspace

• 根据文件和文件夹激活语言服务, 例如 .git 和 tsconfig.json

.vscode folder

• settings.json 配置配置
• launch.json 调试配置
• tasks.json 任务设置

多文件夹工作区

在一个工作区打开多个文件夹

• 切换窗口
• 快速切换窗口
• 快速打开最近的文件夹 ⌘ ( ⌃ ) + R

版本管理

• ⌘ ( ⌃ ) + ⇧ + G

终端模拟器

• ⌘ ( ⌃ ) + ` 切换集成终端
• ⌘ ( ⌃ ) + ⇧ + ` 新建集成终端
• ⌘ ( ⌃ ) + \ 拆分终端
• terminal.integrated.shell: 配置启动的 Shell
• terminal.integrated.shellArgs: 配置启动 Shell 的参数
• terminal.integrated.env: 配置 Shell 的全局变量

为项目打造 Workflow

任务系统

执行任务

• 自动检测脚本任务配置( package.json / tsconfig.json ): 命令面板执行"运行任务"
• 自定义任务: tasks.json
  • type 执行的环境( process / shell )
  • script 脚本代码
  • label 标签
  • command 命令
  • windows / linux 系统特异性代码
  • group 分组( build / test / none )
    • isDefault 分组默认任务
    • kind 代表分组
  • presentation 是否自动调出运行界面窗口
  • options 执行任务配置, 环境变量和执行位置等
  • args 执行参数传入( 包括对参数的转义处理 )
  • problemMatcher 结果分析( 支持默认支持的和自定义问题分析器 )
  • taskName 任务名称
  • dependsOn 任务依赖

debugger

⌘ ( ⌃ ) + ⇧ + D: 打开调试界面

Debug Adapter Protocol (DAP)

launch.json

• type 调试器类型
• request 如何启动调试器
• name 配置名
• program 调试的文件
• stopOnEntry 是否在第一行代码处自动添加断点
• args 传入参数
• env 环境变量
• cwd 控制调试程序的工作目录
• port 调试使用的端口

工作区快捷键

• ⌘ ( ⌃ ) + \: 拆分编辑器
• ⌘ ( ⌃ ) + Number: 在分栏中跳转
• ⌘ + ⌥ + 0 ( ⇧ + Alt + 0 ): 切换水平/垂直分栏布局
• ⌘ + ⌥ + Left/Right (⌃ + PageDown/PageUp ): 在编辑器 Tab 之间跳转
• ⌘ + + / -: 缩放字体大小

专注模式

• ⌘ ( ⌃ ) + B: 打开/关闭侧边栏
• ⌘ ( ⌃ ) + J: 打开/关闭面板 ( 该命令现被合并行占用 )

配置

配置种类

• 编辑器配置
• 键绑定配置

配置方式

• UI 配置
• JSON 配置

项目配置

• 工作区文件夹内 .vscode / settings.json 的设置项目会被应用待项目中

键绑定配置

• key 命令的快捷键
• command 执行的命令 ( 删除的话在命令前加一个 - )
• when 处在什么状态下生效 ( 支持正则表达式和运算符 )

语言支持

1. Intellisense
2. Formatter
3. Linting
4. Execute
5. Debug

JSON

• VS Code JSON with Comments 支持写注释
• JSON Schema: 通过此功能对 JSON 文件的编写提供 Intellisense 功能

Markdown

• Markdown: Open Preview to the side: 打开侧边栏预览 Markdown
• Markdown: Open Preview: 同编辑器预览 Markdown
• markdown.styles 支持以 CSS 文件方式控制预览效果
• Markdown 同时支持内容折叠功能

JavaScript

• 转到定义
• 格式化文件
• 符号跳转
• 函数建议列表和参数建议

类型提示

• JSDoc JS 文档
• ts-check 在 JS 中手动地申明开启代码审核

模块引用

• 相对地址引用
• 引用地址配置 compilerOptions.module
• 自动模块引用
• 自动模块更新

Node.js

• 代码调试 Auto Attach ( Toggle Auto Attach ): 运行 node --inspect-brk file.js
• 记录点 Logpoints 直接输入 log 而不用打断点和输入 console.log

Go

• 安装设置 go-path
• 语言服务支持: 官方维护

Java

• 实现:Language Support for Java™ by Red Hat
• 调试功能: Debugger for Java

Python

• Mac 默认版本的 Python 不受支持
• 语言支持

C

• 支持不是特别完备

插件

• 取色器 Color Picker
  在 HTML / CSS / JSON 中可以进行取色操作

• CSS 选择器预览
  鼠标悬浮到 CSS 选择器上可以看到选择器对应的标签实例

• Emmet

  1. 子节点操作符 >
  2. 兄弟节点操作符 +
  3. 乘法操作符 *
  4. Class ID . #
  5. 数字替代符 $
  6. 展开缩写 mt15
  7. 缩写包围 (支持多光标) Wrap with Abbreviation
  8. 转到匹配对 Go To Matching Pair
  9. 移除标签 Remove Tag

• GitLens
  查看某个 commit 中的代码改动, 查看某行代码最近改动信息

• RemoteHub
  不用下载在本地查看 Github 代码

• Github Pull Request
  在 VS Code 中查看和审核 Github 上的 Pull Request

• Settings Sync
  使用 Github secret gist 存储 VS Code 个人配置,并可在其他计算机上下载配置

• Project Manager
  使用另一种方式管理项目, 在不同的项目中切换

• VSCodeVim / amVim
  针对 Vim 粉丝和狂热爱好者

• Rainbow Brackets
  彩虹色花括号渲染, 能一眼识别花括号

• Indent Rainbow
  彩虹色缩进

• Pigment
  在 CSS 等有颜色的文件, 颜色字符位置的字符上显示颜色

• Import Cost
  在 npm 库的引用位置上提示包的大小

• Rest Client
  直接在 VS Code 中发送请求

• Code Runner
  直接在 VS Code Output 中执行和输出代码执行结果

• Live Share
  通过微软的 Live Share Service 将本地工作区直接分享给你的同伴

• Debugger for Chrome
  使用 Chrome 调试代码

主题

• 检查文本颜色 Inspect TM Scopes
  • comments 注释的颜色
  • functions 函数的寒色
  • keywords 关键字的颜色
  • numbers 数字的颜色
  • strings 字符串的颜色
  • types 类型的颜色
  • variables 变量的颜色
  • textMateRules 作用域内配置

Docker

1. Images
2. Containers
3. Registries
4. Dockerfile
   • docker build
   • docker run
   • docker run interactive
5. Docker Compose
6. Docker: Add docker files to workspace
7. Docker: Debug

Tips & Tricks

• 跳转上一个光标: ⌃ + - ( Alt + Left )
• 跳转下一个光标: ⌃ + ⇧ + - ( Alt + Right )
• 转到上一编辑位置
• 粘贴格式默认包括代码高亮及背景
• 复制当前行: ⌘ ( ⌃ ) + V
• 打开定义变量为新窗口: ⌘ + ⌥ + 鼠标左键 ( ⌃ + Alt + 鼠标左键 )
• 减少代码提示的等待时间 (更耗电): editor.quickSuggestionsDelay
• 文件删除规则: file.trash
• 创建多层子文件夹和文件: 创建文件名中书写路径 folderName/fileName
• 工作区配置不同标题栏颜色: workbench.colorCustomizations
• 复制搜索结果: 搜索结果中 全部复制

插件开发

插件结构

• 主进程 ( Main Process )
• 渲染进程 ( Renderer Process )
• 插件宿主 ( Extension Host )
• 调试进程 ( Debug Adapter process )
• yeoman 脚手架工具
  • 插件功能
  • 主题
  • 语言支持
  • 代码片段
  • 快捷键
  • 多个插件组合

参考资料:

1. 玩转 VS Code | 极客时间