kaiye.github.com
kaiye.github.com copied to clipboard
kaiye
Visual Studio Code 配置指南
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 },
@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"
}
}
@caimaoy vscode 中 vim 快捷键只用于当前窗口的操作。 如果是切换窗口，使用 vscode 的快捷键，例如 ⌘1、⌘2、⌘3 可以切换窗口，⌘\ 可以切分新窗口，⌘W 关闭当前窗口。 所有快捷键列表见本文 2.1 里的链接。