VScode 基本使用和操作技巧

Basics

Welcome and interactive playground

在菜单栏中的 Help 中存在 Welcome 和 interactive playground。

其中 Welcome 是 VScode 的欢迎界面，interactive playground 包含了一些交互的方式。

Command Palette

在命令面板中可以访问基于当前上下文中的所有可用命令，快捷键为 Ctrl+Shift+P。

如果相关的命令在命令面板中存在快捷键的话，也会在该命令最后显示。

Keyboard reference sheets

不同平台可能有所差别。

Quick open files

键盘快捷键：ctrl+p

Navigate between recently opened files

重复quick open键盘快捷键能够在最近打开的文件之间进行快速循环。

Open multiple files from Quick Open

使用quick open时，通过右方向键可以打开多个文件。

Navigate between recently opened folders and workspaces

快捷键：ctrl+r

Command lines

VS code 具有强大的命令行接口 (Command Line Interface,CLI)，可以通过该接口与外界交互或者更改软件内部设置。

# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# see help options
code --help

# disable all extensions
code --disable-extensions

Status bar

Errors and warnings

快速跳转至工程错误和警告处：ctrl+shift+m。
在错误中进行循环：F8/shift+F8
也可以通过类型或者文本匹配对问题进行过滤。

Change language mode

键盘快捷键：ctrl+k m。

Customization

在VS code中也可以进行用户自定义：

• Change your theme
• Change your keyboard shortcuts
• Tune your settings
• Add JSON validation
• Create snippets
• Install extensions

Change your theme

键盘快捷键：ctrl+k ctrl+t。
可以在VS code扩展marketplace中下载安装多种主题，也可以安装和改变文件的图标主题。

Keymaps

如果需要采用其它编辑器的键盘快捷键，需要安装键盘映射扩展。通过preferences > keymap extensions可以在marketplace中看到当前的键盘映射列表。一些比较流行的键盘映射为：

• Vim
• Sublime Text Keymap
• Emacs Keymap
• Atom Keymap
• Eclipse Keymap

Customize your keyboard shortcuts

键盘快捷键：ctrl+k ctrl+s

可以通过编辑 keybindings.json 文件自定义键盘快捷键。

[ { "
key":"cmd+y",
"command":"redo",
"when":"editorTextFocus"
}]

Tune your settings

默认情况下，VS Code 显示 settings 编辑器，可以在搜索栏中找到列出的 settings，但仍可以使用 “open settings(JSON)” 命令编辑settings.json 文件或通过使用 workbench.settings.editor 设置修改默认的 settings 编辑器。
打开用户 settings.json 键盘快捷键为：ctrl+,
改变不同 UI 元素下的字体大小：

// Main editor
"editor.fontSize": 18,
// Terminal panel
"terminal.integrated.fontSize": 14,
// Output panel
"[Log]": {
    "editor.fontSize": 15
}

改变缩放水平：

"window.zoomLevel": 5

改变字体连字：

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

改变字体连字需要提前安装有支持字体连字的字体，firacode 是 VS code 中的流行字体。

自动保存：

"files.autoSave": "afterDelay"

也可以通过 File > Auto Save 实现自动保存。

保存格式：

"editor.formatOnSave": true

粘贴格式：

"editor.formatOnPaste": true

改变Tab字符的缩进距离：

"editor.tabSize": 4

空格或者Tabs：

"editor.insertSpaces": true

空白渲染：

"editor.renderWhitespace": "all"

文本选择中空白字符默认会渲染。

忽略文件/文件夹：

从编辑器窗口移除文件/文件夹：

"files.exclude": {
    "somefolder/": true,
    "somefile": true
}

从搜索结果移除文件/文件夹：

"search.exclude": {
    "someFolder/": true,
    "somefile": true
}

Language specific settings

如果只需要特定语言，可以按语言标识符确定设置的范围。也可以在 “language identifiers” 参考中找到常用语言 ID 列表。

"[languageid]": {

}

也可以通过configure language specific settings命令创建特定语言设置。

Add JSON validation

默认对许多文件类型都启用。在settings.json中创建自己的架构和验证。

"json.schemas": [
    {
        "fileMatch": [
            "/bower.json"
        ],
        "url": "http://json.schemastore.org/bower"
    }
]

或者在自己的工作空间中定义架构：

"json.schemas": [
    {
        "fileMatch": [
            "/foo.json"
        ],
        "url": "./myschema.json"
    }
]

或者是用户架构：

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    },

Extensions

键盘快捷键：ctrl+shift+x。

Find extensions

在 “extensions” 视图中， 可以通过搜索栏进行搜索， 安装，也可以创建自己的 extension。

Files and folders

Integrated terminal

键盘快捷键：ctrl+`。

Toggle sidebar

键盘快捷键：ctrl+b。

Toggle Panel

键盘快捷键：ctrl+j。

Zen mode

键盘快捷键：ctrl+k z。

Esc键退出。

Side by side editing

键盘快捷键：Ctrl+\。

Switch between editors

键盘快捷键：Ctrl+1，Ctrl+2，Ctrl+3。

Move to Explorer window

键盘快捷键：Ctrl+Shift+e。

Create or open a file

键盘快捷键：Ctrl+click。

Close the currently opened folder

键盘快捷键：Ctrl+F4。

Navigation history

导航全部历史	Ctrl+Tab
向后	Alt+Left
向前	Alt+Right

Preventing dirty writes

• 尝试保存由于磁盘更改而无法保存的文件时，VS Code将显示一条错误消息。VS Code阻止保存文件，以防止覆盖在编辑器之外进行的更改。
• 为了解决保存冲突，在错误消息中单击“compare”操作以打开diff编辑器，该编辑器将显示磁盘上的文件内容(左侧)与VS Code中的内容(右侧)。
• 使用编辑器工具栏中的操作来解决保存冲突。可以接受更改并覆盖磁盘上的所有更改，也可以还原为磁盘上的版本。

Editing hacks

Multi cursor selection

在任意位置添加光标：用鼠标选择一个位置，然后使用Alt+Click。

将光标设置在当前位置之上或之下：Ctrl+Alt+Up/Ctrl+Alt+Down。

向当前选择的所有实例中添加光标：Ctrl+Shift+L。

如果不需要对所有当前选择添加游标，可以改用Ctrl+D。这只会选择下一个事件，因此可以一个一个地添加选择。

Column (box) selection

也可以在拖动鼠标时按住Shift+Alt来选择文本块。

Vertical rulers

可以使用editor.rulers设置将垂直列标尺添加到编辑器中，该设置需要想要放置垂直标尺的位置列表。

{
  "editor.rulers": [20, 40, 60]
}

Fast scrolling

按Alt键可在编辑器和资源管理器中快速滚动。默认情况下，快速滚动使用5X速度，但是也可以使用“editor.fastScrollSensitivity”设置来控制。

Copy line up/down

键盘快捷键：shift+alt+up/shift+alt+down。

在Linux上，Copy line up/down 命令未绑定，因为VS Code的默认键绑定将与Ubuntu键绑定发生冲突。但可以通过命令

editor.action.copyLinesUpAction 和 editor.action.copyLinesDownAction 设置为自己的首选键盘快捷键。

Move line up and down

键盘快捷键：alt+up/alt+down。

Shrink/expand selection

键盘快捷键：Shift+Alt+Left/ Shift+Alt+Right。

Go to Symbol in File

键盘快捷键：Ctrl+Shift+O。

可以通过添加@:来对符号进行分组。

Go to Symbol in Workspace

键盘快捷键：Ctrl+T。

Outline view

File explorer中的“outline”视图(默认折叠在底部)显示了当前打开文件的符号。

可以按符号名称，类别和文件中的位置进行排序，并可以快速导航到符号位置。

Navigate to a specific line

键盘快捷键：Ctrl+G。

Undo cursor position

键盘快捷键：Ctrl+U。

Trim trailing whitespace

键盘快捷键：Ctrl+K Ctrl+X。

Transform text commands

使用Command Palette中的“transform”命令将选定的文本更改为大写，小写和标题。

Code formatting

当前选择的源代码：Ctrl+K Ctrl+F。

整个文档格式：Shift+Alt+F。

Code folding

键盘快捷键：Ctrl+Shift+[ Ctrl+Shift+]。

折叠/打开编辑器中的所有区域：fold all(Ctrl+K Ctrl+0)，unfold all(Ctrl+K Ctrl+J)。

折叠所有块注释：Fold All Block Comments (Ctrl+K Ctrl+/)。

Select current line

键盘快捷键：Ctrl+L。

Navigate to beginning and end of file

键盘快捷键：Ctrl+Home/Ctrl+End。

Open Markdown preview

在Markdown文档中，键盘快捷键为：Ctrl+Shift+V。

Side by side Markdown edit and preview

在Markdown文档中，键盘快捷键为：Ctrl+K V。

IntelliSense

Ctrl+Space触发建议部件。

Peek

选择一个符号，然后键入Alt+F12。或者使用上下文菜单。

Go to Definition

选择一个符号，然后键入F12。或者使用上下文菜单或按Ctrl键并单击。

可以使用Go > Back命令或Alt+Left返回到先前的位置。

将鼠标悬停在类型上时，如果按Ctrl键，也可以看到类型定义。

Go to References

选择一个符号，然后键入Shift+F12。或者使用上下文菜单。

Find All References view

选择一个符号，然后按Shift+Alt+F12打开“references”视图，在专用视图中显示文件的所有符号。

Rename Symbol

选择一个符号，然后键入F2。或者使用上下文菜单。

Search and modify

除了搜索和替换表达式之外，还可以使用带有捕获组的正则表达式搜索和重用匹配的部分。通过单击Use Regular Expression .*按钮（Alt + R），在搜索框中启用正则表达式，然后编写正则表达式并使用括号定义组。然后可以通过在替换字段中使用$1，$2等来重复使用每个组中匹配的内容。

Debugging

Configure debugger

打开Command Palette(Ctrl+Shift+P)，然后选择“Debug: Open launch.json”，选择与项目匹配的环境(Node.js，Python，C++等)。这将生成一个launch.json文件。Node.js支持是内置的，其他环境要求安装适当的语言扩展。

Breakpoints and stepping through

在行号旁边放置断点。使用调试小部件向前导航。

Data inspection

在“run”面板和控制台中检查变量。

Inline values

设置"debug.inlineValues": true，以在调试器中内联查看变量值。此功能可能减慢步进速度，因此默认情况下禁用此功能。

Logpoints

日志点的行为很像断点，但是它们不会在命中时暂停调试器，而是在控制台中记录一条消息。日志点对于调试无法修改或暂停的生产服务器时特别有用。

使用左侧编辑器装订线中的Add Logpoint命令添加日志点，该日志点将显示为菱形的图标。日志消息是纯文本，但可以包含要在花括号（'{}'）中计算的表达式。

Task runner

Auto detect tasks

从顶层菜单栏中选择Terminal，运行命令Configure Tasks，然后选择要运行的任务类型。这将生成一个task.json文件，其内容如下：

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "install",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

但自动生成有时会出现问题。

Run tasks from the Terminal menu

从顶层菜单栏中选择Terminal，运行命令“Run Task”，然后选择要运行的任务。通过运行命令Terminate Task终止正在运行的任务。

Define keyboard shortcuts for tasks

可以为任何任务定义键盘快捷键。从Command Palette(Ctrl+Shift+P)中，选择Preferences: Open Keyboard Shortcuts File，将所需的快捷方式绑定到workbench.action.tasks.runTask命令，然后定义Task为args。

例如，要将Ctrl+H绑定到Run tests，需要添加以下内容：

{
  "key": "ctrl+h",
  "command": "workbench.action.tasks.runTask",
  "args": "Run tests"
}