VS Code 从入门到放弃 IDE

SHOYUF

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

图标按键名称
Option Alt
Shift
Control ( ⌃ )

编辑器进化史

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

  • 根据文件和文件夹激活语言服务, 例如 .gittsconfig.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 | 极客时间

本站使用署名 4.0 国际 (CC BY 4.0) 创作共享协议,转载请署名,图片请转存。

提醒:本文最后更新于 148 天前,文中所描述的信息可能已发生改变,请谨慎使用。