VS Code 提升编码效率的技巧集

英文版请参考 VS Code Tips and Tricks

文中内容提到的快捷键操作有可能和最新版本有所出入，最新版本的键盘快捷键请参考这里

内容目录

基本
自定义
插件扩展
文件及文件夹管理
进阶编辑
智能提示
创建代码片段
Git 集成
调试
运行任务
其他资源

基本

VS Code 内部测试版本

Visual Studio Code 开发团队使用内测版用于测试 VS Code 最新功能及便于 bug 修复。内测版可以在这里下载。

对早期使用者而言 - 内测版的代码更新比较快可能会导致各种 bug。
频繁的版本更新 - 频繁更新开发版会修复最近的 bug 和提供新的功能尝鲜。
多版本共存安装 - 内测版和稳定版可以同步安装到系统并且独立使用互不影响。

准备开始

打开欢迎页面进入 VS Code 大门。帮助 > 欢迎。

欢迎页面有交互式演练场用于互动演示 VS Code 的一些功能

命令面板

命令面板可以基于当前输入的内容访问所有提供的命令入口

Mac: cmd+shift+p or f1

Windows / Linux: ctrl+shift+p or f1

组合键参考

在命令面板中的所有命令都有与之对应的快捷键（如果有的话）。如果你忘记快捷键是什么，可以打开命令面板来查看。

快捷开启

快速的打开文件和运行相关命令(操作如下)

Mac: cmd+p

Windows / Linux: ctrl+p

提示: 输入 "?" 查看帮助

在最近打开过的文件之间切换

重复按下快捷开启快捷键会重复在最近打开过的文件之间切换

使用快捷开启打开多个文件

你可以通过快捷开启方式按下键盘右键在后台打开当前项目的多个文件。

CLI 工具

Linux: 请参考这里。

Windows: 请参考这里。

Mac: 请参考以下

打开 命令面板 (F1) 输入 "shell command". 敲回车执行 Shell 指令: 安装 'code' 指令到环境变量.

# 在 VS Code 中打开当前目录 
code .

# 在最近使用过的 VS Code 窗口打开当前目录
code -r .

# 创建新的窗口
code -n

# 更改语言
code --locale=es

# 打开 diff 编辑器比较文件
code --diff <file1> <file2>

# 查看帮助选项
code --help

# 禁用所有扩展
code --disable-extensions .

.vscode 文件夹

工作区 .vscode 中的特殊文件。例如：Task Runner 的 tasks.json 和 debugger 的 launch.json。

状态栏

错误和警告

Mac: shift+cmd+m

Windows / Linux: ctrl+shift+m

快速跳转到项目出错和警告的位置,如果是 Markdown 文件按下 ctrl+shift+m 默认是把编辑器拆分成预览窗口。

重复切换定位错误 f8 或 shift+f8

你可以通过输入（'errors','warnings'）或匹配的文本来过滤筛选问题。

更换语言模式

Mac: cmd+k m

Windows / Linux: ctrl+k m

如果你想给文件存留成新的语言模式，可以在编辑器右下角通过**选择语言模式...**命令来关联一个已经安装好的语言到当前文件。

自定义

通过自定义 VS Code,你可以做更多事情

更换主题
更换键盘快捷键
调整设定
添加 Json 许可
创建代码片段
安装扩展

查看完整文档.

更改主题

打开 命令面板 输入"themes",你可以在扩展商店安装更多主题。

另外你可以安装更改文件图标的主题插件

更换键盘快捷键

键盘快捷键参考文档

对应·平台的快捷键参考文档 (macOS, Windows, Linux).

键映射

如果你习惯于某种编辑器的快捷键，可以安装快捷键扩展到 VS Code 来导入你常用的编辑器的快捷键。选择 首选项 > 键映射扩展 去扩展商店查看当前列表。比较流行的一些键迎神插件如下:

Vim
Sublime Text 键映射
Emacs 键映射
Atom 键映射

自定义键盘快捷键

打开 命令面板 输入"keyboard shortcuts" 现在可以在文件的右侧添加你自己的组合键了。

查看更多关于 Visual Studio Code 自定义快捷键内容。

自定义设置·

打开 settings.json

Mac: cmd+,

Windows / Linux: 文件 > 首选项 > 设置

Format on paste

"editor.formatOnPaste": true

更改字体大小

"editor.fontSize": 18

更改缩放等级

"window.zoomLevel": 5

font ligatures

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

提示: 你需要安装一个支持 font ligatures 的字体。 FiraCode 在 VS Code team 是一个比较受欢迎的字体。

自动保存

"files.autoSave": "afterDelay"

你也可以在最高级菜单文件 > 自动保存 开启自动保存。

Format on save

"editor.formatOnSave": true,

改变缩进的字符长度

"editor.tabSize": 4

空格还是缩进

"editor.insertSpaces": true

Render whitespace

"editor.renderWhitespace": "all"

忽略文件或者文件夹

从编辑器窗口移除这些文件或者文件夹

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

从搜索结果中移除这些文件或者文件夹。

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

还有许多其他的功能。

特定的语言设置

你可以只为某些特定的语言设置

"[languageid]": {

}

提示: 你可以在 命令面板 输入 "Configure language specific settings" 找到 language id

添加 JSON 认可

多数文件默认是启用的，在 settings.json 创建你自己的 schema 和 validation。

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

或者在你的工作区定义一个 schema

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

或者自定义一个 schema

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

查看更多文档.

插件扩展

查找扩展

在 VS Code 商店.
在 VS Code 内搜索
查看推荐的扩展
社区创建的扩张列表，例如 awesome-vscode.

安装扩展

点击编辑器左侧活动栏的扩展按钮，然后你可以通过搜索窗口或者点击更多 (...) 按钮来选择过滤和通过安装计数的排序方式安装想要的扩展。

扩展推荐

点击活动栏的扩展按钮，然后点击更多 (...) 按钮菜单选中显示推荐的扩展即可

创建自己扩展

如果你对创建自己的扩展感兴趣，可以看看这个文档。

configuration
commands
keybindings
languages
debuggers
grammars
themes
snippets
jsonValidation

文件及文件夹管理

集成终端

Windows / Linux / Mac: ctrl+`

进一步了解：

官方文档
精通 VS Code 终端的文章

自动保存

使用 cmd+, 打开 settings.json

"files.autoSave": "afterDelay"

你也可以在顶层菜单栏通过文件 > 自动保存 来触发自动保存功能。

触发侧边栏

Mac: cmd+b

Windows / Linux: ctrl+b

免打扰模式

Mac: cmd+k z

Windows / Linux: ctrl+k z

开启免打扰模式。

拆分编辑器

Mac: cmd+\ 或者 cmd 然后从文件管理器点击一个文件

Windows / Linux: ctrl+\

Linux: ctrl+2

你可以使用拖拽的方式来创建新的编辑器组以及在编辑器组之间移动

在编辑器标签页之间切换

Mac: cmd+1, cmd+2, cmd+3

Windows / Linux: ctrl+1, ctrl+2, ctrl+3

切换到资源管理窗口

Mac: cmd+shift+e

Windows / Linux: ctrl+shift+e

创建并打开一个文件

Mac: cmd+click

Windows / Linux: ctrl+click

关闭当前打开的标签页。

Mac: cmd+w

Windows / Linux: ctrl+k f

回溯操作历史

回溯上一个编辑过的文件 ctrl+tab

回溯历史操作。

Mac: ctrl+-

Windows / Linux: alt+left

向前回溯历史操作。

Mac: ctrl+shift+-

Windows / Linux: alt+right

回顾并切换到历史的某个文件

Mac: cmd+e 或 cmd+p

Windows / Linux: ctrl+e 或 ctrl+p

文件关联

为一些无法准确识别的文件创建语言关联（例如许多 JSON 配置文件）。

"file.associations": {
    ".database": "json"
}

进阶编辑

这里挑选了一些常见的提高编辑效率的技巧。如果键盘快捷键跟你习惯有冲突，可以考虑安装键映射扩展。

snippets 提示上下选择

Mac: control+n/control+p 或 up/down key

Windows: ctrl+n/ctrl+p 或 up/down key

Linux: ctrl+n/ctrl+p 或 up/down key

插入多光标编辑

Mac: opt+cmd+up 或 opt+cmd+down

Windows: alt+鼠标左键点选或 shift+alt+鼠标左键拖动

Linux: alt+shift+up 或 alt+shift+down

同时选中所有匹配

Mac: shift+cmd+l

Windows: ctrl+shift+l

Linux: ctrl+shift+l

选中下一个匹配

Mac: cmd+d

Windows: ctrl+d

Linux: ctrl+d

合并行

Mac: ctrl+j

Windows / Linux: 默认没有绑定。打开快捷方式绑定 editor.action.joinLines 到你选择的一个快捷键。

复制当前行到上/下一行

Mac: opt+shift+up 或 opt+shift+down

Windows / Linux(Issue #5363): shift+alt+down or shift+alt+up

收缩/展开选择区域

更多文档

Mac: ctrl+shift+cmd+left 或 ctrl+shift+cmd+right

Windows / Linux: shift+alt+left 或 shift+alt+right

转到文件中的符号

Mac: cmd+shift+o

Windows / Linux: ctrl+shift+o

你可以添加一个冒号@:来分组符号

转到工作区中的符号

Mac: cmd+t

Windows / Linux: ctrl+t

转到行

Mac: ctrl+g or cmd+p, :

Windows / Linux: ctrl+g

撤销光标位

Mac: cmd+u

Windows / Linux: ctrl+u

当前行向上或下移动

Mac: opt+up or opt+down

Windows / Linux: alt+up or alt+down

去除行尾空白

Mac: cmd+k cmd+x

Windows / Linux: ctrl+k ctrl+x

格式化代码

格式化当前选中的源代码

Mac: cmd+k, cmd+f

Windows / Linux: ctrl+k, ctrl+f

格式化当前文档代码

Windows / Linux: shift+alt+f

代码折叠

Mac: shift+cmd+[ 和 shift+cmd+]

Windows / Linux: ctrl+shift+[ 和 ctrl+shift+]

选中当前行

Mac: cmd+i

Windows / Linux: ctrl+i

光标跳至行尾

Mac: cmd+up 和 cmd+down

Windows: ctrl+up 和 ctrl+down

Linux: ctrl+home 和 ctrl+end

开启 Markdown 预览

在 Markdown 文件中使用

Mac: shift+cmd+v

Windows / Linux: ctrl+shift+v

Markdown 预览

在 Markdown 文件中使用

Mac: cmd+k v

Windows / Linux: ctrl+k v

智能感知

一个非常有用的语法高亮和自动完成功能，提供了基于变量类型、函数定义和导入模块的自动补全功能。无论何时，尝试按下 ctrl+space 来触发智能感知小部件功能。

你可以查看提供的方法，参数提示及短文档等。

一瞥

选择一个符号然后按下 alt+f12，或者你可以使用上下文菜单（Windows 右键菜单）。

转到定义

选择一个符号然后按下 f12，另外你也可以使用上下文菜单或者 ctrl+click (cmd+click on macOS)。

你可以返回到上一个的位置操作转到 > 后退指令或 alt+left (ctrl+- on macOS)。

查找所有申明

选择一个符号然后按下 shift+f12，或者可以使用环境菜单。

重命名 Symbol

选择一个 symbol 然后按下 f2，你也可以使用环境菜单。

.eslintrc.json

安装 ESLint 插件。配置你喜欢的 linter，具体请参考这里.

下面是使用 ES6 的配置

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "classes": true,
            "defaultParams": true
        }
    },
    "rules": {
        "no-const-assign": 1,
        "no-extra-semi": 0,
        "semi": 0,
        "no-fallthrough": 0,
        "no-empty": 0,
        "no-mixed-spaces-and-tabs": 0,
        "no-redeclare": 0,
        "no-this-before-super": 1,
        "no-undef": 1,
        "no-unreachable": 1,
        "no-use-before-define": 0,
        "constructor-super": 1,
        "curly": 0,
        "eqeqeq": 0,
        "func-names": 0,
        "valid-typeof": 1
    }
}

package.json

查看你 package.json 文件的智能提示

Emmet 语法

更多支持 Emmt 的语法.

代码片段

建立自定义代码片段

文件 > 首选项 > 用户代码片段，选择相关语言建立代码片段。

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "	render() {",
        "		return ($2);",
        " 	}",
        "",
        "}"
    ]
},

查看更多详细内容关于建立用户代码片段。

Git 集成

VS Code 默认内部集成 Git ，你也可以在扩展商店安装其他的源码版本管理系统。这一部分只作 VS Code 内部集成的 Git 介绍，其他源码版本管理工具也可参考，大同小异而已。

Diffs 代码差异比较

点击编辑器左侧活动栏上的源代码管理按钮(ctrl+shift+G)，然后点击列表上的 M 按钮可以并排查看文件修改的对比。

并排视图

默认是纵向并排比较代码差异

内联视图

在并排对比视图状态下可以通过点击右上角更多按钮选择**切换到内联视图*·*

如果你更喜欢内联视图，可以设置 "diffEditor.renderSideBySide": false。

Review Pane

在对比视图中通过 F7 和 Shift+F7 来切换到不同的代码区块，通过箭头键和 Enter 键可以定位行.

编辑暂存变更

你可以在比较视图中直接编辑暂存变更

分支

通过状态栏可以方便的切换 Git 分支。

暂存

暂存所有文件

鼠标悬停在有数字的文件上点击加号按钮。

暂存某个文件

在命令面板选择暂存所选范围暂存文件的一部分

撤消上次提交

查看 Git 输出

VS Code 可以方便的查看 Git 指令是否有效的执行，这对学习 Git 或调试困难的 issue 很有帮助。

Mac: shift+cmd+u

Windows / Linux: ctrl+shift+u

在输出窗口下拉菜单选择 Git 运行 toggleOutput。

Gutter 指示器

Gutter 指示器功能可以让你在编辑器编辑区看到源码被改动过的一些痕迹，详细内容请看这里。

一个红色三角形表示被删除的行
一个绿色的竖条表示新增的行
一个蓝色竖条表示修改过的行

解决合并冲突

在合并分支时，在活动栏点击源代码管理按钮

设置 VS Code 为默认合并分支工具

git config --global merge.tool code

调试

内置调试器可以通过添加断点和观察器进行调试，以帮助你加快编辑，编译等。

配置调试器

默认情况下，它支持 NodeJS ，并且可以调试任何可以被转换为 JavaScript （比如 TypeScript 等），但像 C++ 或 Python 这样的其他运行时则需要安装扩展才能进行调试。按 f1 选择 Debug: Open launch.json 环境，会产生一个 lanch.json 文件。具体内容请参考文档

断点和单步调试

紧挨着行号放置断点，点击调试小部件窗口的绿色前进三角按钮开始调试。

数据审查

在调试面板和调试控制台中检查变量

内联值

你可以通过设置 "debug.inlineValues": true 打开在调试器中来查看提供的值这个功能，这个功能还处于实验阶段所以默认是关闭的。

运行任务

自动获取任务

从顶部菜单栏选择任务 > 运行任务(R)...,然后选择你想运行的任务类型。这会产生一个如下内容的 task.json 文件，更多细节请参考任务文档。

{
    // See http://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "install",
            "args": ["install"]
        },
        {
            "taskName": "build",
            "args": ["run", "build"]
        }
    ]
}

有一些偶然的 issue 会自动产生，查阅文档可以让你事半功倍哦。

从任务菜单运行任务

从菜单栏选择任务，选择运行任务...命令，接着选择你想运行的任务。选择终止任务... 停止运行任务·。

其他资源

vscode 官方文档
react sample app
awesome vscode

Files

README.md

Latest commit

History