Visual Studio Code 配置图文教程

admin

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 面板，点击左侧被修改的文件，即可进行版本对比。使用快捷键 &#8984 打开快捷窗口，可直接使用 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 环境下调用编辑器。使用快捷键 ⇧&#8984（或 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 编写效率。
0 n, J) V3 G$ w/ v& N; `例如，在一个 CSS 选择器中书写以下属性后，按下 tab 键，均可自动补全为 overflow:hidden：

ov:hove:hof: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) 抽象语法树选择展开一级
• ⌃⇧⌘← – 抽象语法树选择缩小一级
  

单行编辑

• ⇧⌘K – 单行操作，删除光标所在行
• ⇧⌥↓ – 复制光标所在行到下一行
  3 L8 O/ y- j7 v; u. D7 |  V

多行编辑

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

代码定位

• ⇧⌘O – 跳转至对象、属性、方法
• ⇧⌥F – 代码格式化
• ⇧⌘M – 显示当前文件的错误与警告信息
• F12 – 跳转至定义行
• ⌥F12 – 浮窗打开定义行（可直接修改）
• ⌥⌘ + Click – 新开侧边窗口跳转至定义行
• ⇧⌘\ – 跳转至对应匹配括号处
    y1 B; {- M7 B) d: p5 T

代码展示

• ⌥Z – 开启/关闭代码自动换行，还可通过 editor.wrappingColumn 配置单行最大字符数
• ⇧⌘[ – 代码折叠，⇧⌥⌘[ 为全部折叠
• ⇧⌘] – 代码展开，⇧⌥⌘] 为全部展开
  6 E0 a; U# Q, Q

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    }}

via kaiye