Visual Studio Code 配置指南 #14

kaiye · 2016-04-15T15:12:40Z

Visual Studio Code （简称 VS Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器。在我看来它是「一款完美的编辑器」。

本文是有关 VS Code 的特性介绍与配置指南，相关设置主要针对 Mac OS X 平台。在快捷键部分， ⌘ 指 Command 键，⇧ 指 Shift 键，⌃ 指 Control 键，⌥ 指 Option/Alt 键。

1. Visual Studio Code 特性简介

1.1 Git 集成

如上图所示，VS Code 默认集成了 Git 版本管理。

切换至 Git 面板，点击左侧被修改的文件，即可进行版本对比。默认为左右窗口对比视图（Side by Side View），点击编辑器窗口右上方「…」图标可切换至行内对比视图（Inline View）。

鼠标移至 Git 面板中的文件列表上时，会出现「+」图标，点击后即可将文件添加至暂存区（Stage），点击右上方的「…」图标可以完成常用的 pull/commit 操作。

点击窗口左下角的 git 分支信息，即可快速切换至其他分支。

更多 Git 参考资料请阅读《Git 进阶指南》和 VS Code 官方文档《Version Control》章节。

1.2 多窗口实时编辑与预览

VS Code 最多可同时开启三个子窗口。若多个子窗口中打开的文件为同一文件时，则修改其中任意窗口内容，其他窗口都可以实时同步变更。

如上图，左侧子窗口是一个 Markdown 文件，右侧子窗口是该文件的 Markdown 预览模式（快捷键 ⇧⌘V），如此即可实现类似 MacDown/Mou 等软件的编写体验。

1.3 代码提示与引用分析

虽然是一款轻量级编辑器，但 VS Code 却有着 IDE 级别的代码高亮、语法检测、引用分析功能，十分适合编程初学者和大型项目开发。在其官网上列出了它默认支持的语言列表。

借助 Typings ，VS Code 还支持了 Node.js、ES6、AngularJS、ReactJS，十分适合前端开发人员。为了能更好的和其他开源框架融合，VS Code 有意削弱了原有的 JavaScript 语法校验功能，建议用户使用 ESLint 来定制个性化代码校验需求。

除此之外，VS Code 的 Debug 功能也是十分强大。以下是其 Node.js Debug 的演示：

借助「Debugger for Chrome」插件，还可以直接在编辑器中打断点调试 web。

1.4 命令行调用

VS Code 提供了一个 code 命令，用来在 shell 环境下调用编辑器。使用快捷键 ⇧⌘P（或 F1）唤起命令面板，输入以下命令即可完成安装。

code 命令后可接多个路径或文件：

code pro6.js pro6.scss ../

文件对比：

code -d new-file.js old-file.js

打开文件并跳至指定行：

code -g source/cn/static/global/tracker.js:15

更多 code 命令行使用方法，参见《Additional Command line arguments》。

1.5 更聪明的 Emmet

VS Code 内置了 Emmet，且在其基础之上做了进一步增强，极大的提升了 CSS、HTML 编写效率。
例如，在一个 CSS 选择器中书写以下属性后，按下 tab 键，均可自动补全为 overflow:hidden：

ov:h
ove:h
of:h

更多 Emmet 缩写，请参考《Emmet Cheat Sheet》。

2. 快捷键与插件配置

2.1 所有快捷键列表

注：VS Code 的快捷键有很多是 Fn 功能键，不符合 Mac 用户习惯，建议各位通过 Preferences -> Keyboard Shortcuts 重设快捷键。

所有快捷键列表请参见《Key Bindings for Visual Studio Code》，其中较为常用的快捷键有以下这些：

文本选择

⌃⇧⌘→ - AST (Abstract Syntax Tree) 抽象语法树选择展开一级
⌃⇧⌘← - 抽象语法树选择缩小一级
F2 - 重命名当前对象，或使用鼠标右键菜单
⌘F2 - 重命名当前字符串（包含作为子字符串的情况），或使用鼠标右键菜单
⌥→ - 以单词为单位向后移动光标
⌥⇧→ - 以单词为单位向后选中文本

单行编辑

⇧⌘K - 单行操作，删除光标所在行
⇧⌥↓ - 复制光标所在行到下一行
⌥↓ - 将光标所在行移至下一行

多行编辑

⌥⌘↓ - 向下插入一个光标，或者使用 ⌥ + Click
⇧⌥ + 鼠标拖动 - 多列区块选择，再配合 ⇧⌘→ 可选中至结尾处
⇧⌘L - 选择相同文本
⌘F2 - 选择相同单词，或者使用 ⌘D 依次加入选中

代码定位

⇧⌘\ - 跳转至对应匹配括号处
⇧⌘O - 跳转至对象、属性、方法
⌃G - 跳转至指定行
⌘↓ - 跳转至文件结尾
⇧⌘M - 显示当前文件的错误与警告信息
F12 - 跳转至定义行
⌥F12 - 浮窗打开定义行（可直接修改）
⌥⌘ + Click - 新开侧边窗口跳转至定义行
⇧⌘G - 选中上一次的查找结果

代码展示

⌥Z - 开启/关闭代码自动换行，还可通过 editor.wrappingColumn 配置单行最大字符数
⌥⌘[ - 代码折叠，⌘K ⌘0 为全部折叠
⌥⌘] - 代码展开，⌘K ⌘J 为全部展开
⇧⌥F - 代码格式化

窗口操作

⌘1 ⌘2 ⌘3 - 切换至对应的子窗口
⌃Tab - 切换当前子窗口的标签页
⌃` - 打开内置 Terminal 窗口
⌘⇧U - 打开/关闭 Output 窗口，可查看 Extensions/Git/Task 输出
⌘0 - 焦点进入侧边栏项目目录，进入使用快捷键 J 向上、K 向下、H 折叠、L 打开
⌘K E - 焦点进入侧边栏当前文件列表，进入后使用快捷键同上

2.2 插件推荐

Dark Dark - 猫哥基于默认 Dark 主题修改的增强主题
EditorConfig for VS Code - 用于支持 .editorconfig 配置规范
ESLint - 用于支持 JavaScript 实时语法校验
Git History - 可查看文件的 git log 并进行对比
HTML Snippets - 能修复默认 HTML Emmet 的一些问题
Material Icon Theme - 左侧文件导航栏 Icon 主题
Settings Syncs - 用于同步 VS Code 的配置到个人 gist 仓库
stylefmt - 用于格式化 SCSS 文件
stylelint - 用于支持 CSS/SCSS/Less 实时语法校验

3. 常见问题

3.1 如何支持 PHP Smarty Template 语法

VS Code 能识别大部分主流代码文件，当需要进行关联语法设置时，可通过 Preferences -> Workspace Settings （或 User Settings）配置文件进行设置。

例如，以下代码可以将后缀为 .tpl 的 Smarty 模板文件关联成 PHP 语法：

"files.associations":{
	"*.tpl": "php"	
}

3.2 如何在 sidebar 隐藏编译后文件

设置 Preferences -> Workspace Settings （或 User Settings）配置文件，将需要隐藏的文件按 glob 匹配模式进行配置，例如以下是 Angular2 TypeScript 项目中隐藏 .js 与 .js.map 文件的配置：

{
    "files.exclude": {
        "**/._*": true,
        "node_modules/": true,
        "app/*.js.map": true,
        "app/*.js": true
    }
}

3.3 如何搜索 node_modules 文件夹中的文件

VS Code 的默认搜索规则中会排除 **/.git, **/.DS_Store, **/bower_components, **/node_modules 目录，可以在用户配置文件（User Settings）中加入以下配置，来关闭或启用这些规则：

{
	"search.exclude": {
		"**/node_modules": false,
		"**/bower_components": true
	}
}

3.4 使用 VIM 插件有哪些注意事项？

如果你熟悉 VIM ，可以尝试 VIM for VS Code 插件。插件安装后，通过 Toggle VIM Mode 命令可以开启/关闭 VIM 模式。

长按 hjkl 方向键无法响应的问题，解决方法终端运行

defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false

如何让 VIM yank 至剪切板的内容通过 ⌘V 粘贴出来，配置如下 setting：
```
"vim.useSystemClipboard": true,
```
系统默认的 ⌘D 向后删除键失效了。在 Keyboard Shortcuts 中清除掉 extension.vim_ctrl+d 的按键绑定即可
ctrl+f, ctrl+b 等方向键失效。在 settings 中增加以下配置，让这些快捷键不被 vim 插件复写
```
"vim.handleKeys": {
    "<C-a>": false,
    "<C-e>": false,
    "<C-b>": false,
    "<C-f>": false
},
```

The text was updated successfully, but these errors were encountered:

dearlordchen · 2016-04-17T14:39:49Z

try a try 感谢猫哥。

JerryC8080 · 2016-04-21T02:54:04Z

找到猫哥Github了 🙈

kylezhang · 2016-07-01T03:39:00Z

请问如何配置在新建一个js或者其他文件时，可以直接在文件的头部加上相关信息，或者function之前的注释信息；

Niefee · 2016-07-12T02:40:45Z

写HTML标签时尖括号有一个矩形边框，怎样可以去掉啊？

tangkunyin · 2016-08-29T02:45:48Z

然而代码只能提示一笔带过，表示不太好配置！

fff89 · 2016-09-12T09:56:59Z

您好，请问如何取消鼠标提示呢

vsxen · 2016-10-31T01:15:03Z

vscode的 emmet自动补全不是Tab吗？那是什么？

kevingo · 2016-12-28T02:24:02Z

感謝分享

osdu · 2017-01-16T08:46:18Z

@Niefee

重置下bracket-match样式，然后去掉checksums校验

diff -ruN a/VSCode/resources/app/out/vs/workbench/electron-browser/bootstrap/index.html b/VSCode/resources/app/out/vs/workbench/electron-browser/bootstrap/index.html
--- a/VSCode/resources/app/out/vs/workbench/electron-browser/bootstrap/index.html	2016-12-19 22:50:04.664845100 +0800
+++ b/VSCode/resources/app/out/vs/workbench/electron-browser/bootstrap/index.html	2017-01-16 16:26:04.841823300 +0800
@@ -9,6 +9,10 @@
 			.monaco-shell.vs-dark {
 				background-color: #1E1E1E;
 			}
+			.monaco-editor.vs-dark .bracket-match {
+				border: none !important;
+				border-bottom: 1px solid #888 !important;
+			}
 		</style>
 
 	</head>
diff -ruN a/VSCode/resources/app/product.json b/VSCode/resources/app/product.json
--- a/VSCode/resources/app/product.json	2017-01-16 16:42:22.186320200 +0800
+++ b/VSCode/resources/app/product.json	2017-01-16 16:42:30.266342600 +0800
@@ -130,7 +130,6 @@
 	"checksums": {
 		"vs/workbench/electron-browser/workbench.main.js": "uHtzOl7WkRf0/hR2UKx5LA",
 		"vs/workbench/electron-browser/workbench.main.css": "YsaYQGKKlZWkFVz94zKSCg",
-		"vs/workbench/electron-browser/bootstrap/index.html": "A7FcwiFQwy0ydQR6MrrRrQ",
 		"vs/workbench/electron-browser/bootstrap/index.js": "bL+9Rt0dxNnczUt7DNuBBg"
 	}
 }

SnailOwO · 2017-09-25T03:11:43Z

想问下。VS code 如何在使用PHP编程的时候，让其提示没定义的变量！~~现在就差这个插件了~~

zhenghuahou · 2017-10-24T08:38:36Z

文本选中那一块
⌃⇧→ - 以单词为单位向后选中文本，现在的默认快捷键是⌥ ⇧→

kaiye · 2017-10-25T02:41:01Z

@zhenghuahou 感谢提醒，已修改！

yanlee26 · 2017-11-14T02:38:36Z

有高亮git diff的包吗

caimaoy · 2018-05-30T15:38:39Z

你好，我想问一下在 vim 模式下如何切换窗口？ h 还有 l 吗？感觉不是很方便，还有打开新窗口快捷键又是什么？我没有找到，谢谢

kaiye · 2018-07-19T07:50:26Z

@caimaoy vscode 中 vim 快捷键只用于当前窗口的操作。
如果是切换窗口，使用 vscode 的快捷键，例如 ⌘1、⌘2、⌘3 可以切换窗口，⌘\ 可以切分新窗口，⌘W 关闭当前窗口。
所有快捷键列表见本文 2.1 里的链接。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Visual Studio Code 配置指南 #14

Visual Studio Code 配置指南 #14

kaiye commented Apr 15, 2016 •

edited

Loading

dearlordchen commented Apr 17, 2016

JerryC8080 commented Apr 21, 2016

kylezhang commented Jul 1, 2016

Niefee commented Jul 12, 2016

tangkunyin commented Aug 29, 2016

fff89 commented Sep 12, 2016

vsxen commented Oct 31, 2016

kevingo commented Dec 28, 2016

osdu commented Jan 16, 2017 •

edited

Loading

SnailOwO commented Sep 25, 2017

zhenghuahou commented Oct 24, 2017 •

edited

Loading

kaiye commented Oct 25, 2017

yanlee26 commented Nov 14, 2017

caimaoy commented May 30, 2018

kaiye commented Jul 19, 2018

Visual Studio Code 配置指南 #14

Visual Studio Code 配置指南 #14

Comments

kaiye commented Apr 15, 2016 • edited Loading

1. Visual Studio Code 特性简介

1.1 Git 集成

1.2 多窗口实时编辑与预览

1.3 代码提示与引用分析

1.4 命令行调用

1.5 更聪明的 Emmet

2. 快捷键与插件配置

2.1 所有快捷键列表

文本选择

单行编辑

多行编辑

代码定位

代码展示

窗口操作

2.2 插件推荐

3. 常见问题

3.1 如何支持 PHP Smarty Template 语法

3.2 如何在 sidebar 隐藏编译后文件

3.3 如何搜索 node_modules 文件夹中的文件

3.4 使用 VIM 插件有哪些注意事项？

dearlordchen commented Apr 17, 2016

JerryC8080 commented Apr 21, 2016

kylezhang commented Jul 1, 2016

Niefee commented Jul 12, 2016

tangkunyin commented Aug 29, 2016

fff89 commented Sep 12, 2016

vsxen commented Oct 31, 2016

kevingo commented Dec 28, 2016

osdu commented Jan 16, 2017 • edited Loading

SnailOwO commented Sep 25, 2017

zhenghuahou commented Oct 24, 2017 • edited Loading

kaiye commented Oct 25, 2017

yanlee26 commented Nov 14, 2017

caimaoy commented May 30, 2018

kaiye commented Jul 19, 2018

kaiye commented Apr 15, 2016 •

edited

Loading

osdu commented Jan 16, 2017 •

edited

Loading

zhenghuahou commented Oct 24, 2017 •

edited

Loading