VisualStudioCode使⽤⼿册
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 集成
如上图所⽰，VS Code 默认集成了 Git 版本管理。
切换⾄ Git ⾯板，点击左侧被修改的⽂件，即可进⾏版本对⽐。默认为左右窗⼝对⽐视图（Side by Side View），点击编辑器窗⼝右上⽅「…」图标可切换⾄⾏内对⽐视图（Inline View）。
⿏标移⾄ Git ⾯板中的⽂件列表上时，会出现「+」图标，点击后即可将⽂件添加⾄暂存区（Stage），点击右上⽅的「…」图标可以完成常⽤的pull/commit 操作。
点击窗⼝左下⾓的 git 分⽀信息，即可快速切换⾄其他分⽀。
1.2 多窗⼝实时编辑与预览
多窗⼝实时编辑与预览
VS Code 最多可同时开启三个⼦窗⼝。若多个⼦窗⼝中打开的⽂件为同⼀⽂件时，则修改其中任意窗⼝内容，其他窗⼝都可以实时同步变更。
如上图，左侧⼦窗⼝是⼀个 Markdown ⽂件，右侧⼦窗⼝是该⽂件的 Markdown 预览模式（快捷键 ⇧⌘V），如此即可实现类似
MacDown/Mou 等软件的编写体验。
1.3 代码提⽰与引⽤分析
虽然是⼀款轻量级编辑器，但 VS Code 却有着 IDE 级别的代码⾼亮、语法检测、引⽤分析功能，⼗分适合编程初学者和⼤型项⽬开发。在其官⽹上列出了它默认⽀持的语⾔列表。
图：VS Code ⽀持的编程语⾔种类
图：VS Code Node.js Debugging
1.4 命令⾏调⽤
VS Code 提供了⼀个code命令，⽤来在 shell 环境下调⽤编辑器。使⽤快捷键⇧⌘P（或 F1） 唤起命令⾯板，输⼊以下命令即可完成安装。
图：安装 code 命令⾏
code 命令后可接多个路径或⽂件：
codepro6.jspro6.scss../
⽂件对⽐：
code-d new-file.jsold-file.js
打开⽂件并跳⾄指定⾏：
code -gsource/cn/static/global/tracker.js:15
1.5 更聪明的 Emmet
VS Code 内置了 Emmet，且在其基础之上做了进⼀步增强，极⼤的提升了 CSS、HTML 编写效率。
例如，在⼀个 CSS 选择器中书写以下属性后，按下tab键，均可⾃动补全为overflow:hidden：
ov:hove:hof:h
2. 快捷键与插件配置
2.1 所有快捷键列表
注：VS Code 的快捷键有很多是 Fn 功能键，不符合 Mac ⽤户习惯，建议各位通过 Preferences -> Keyboard Shortcuts 重设快捷键。⽂本选择
⌃⇧⌘→ - AST (Abstract Syntax Tree) 抽象语法树选择展开⼀级
⌃⇧⌘← - 抽象语法树选择缩⼩⼀级
F2 - 重命名当前对象，或使⽤⿏标右键菜单
⌘F2 - 重命名当前字符串（包含作为⼦字符串的情况），或使⽤⿏标右键菜单
单⾏编辑
⇧⌘K - 单⾏操作，删除光标所在⾏
⇧⌥↓ - 复制光标所在⾏到下⼀⾏
⌥↓ - 将光标所在⾏移⾄下⼀⾏
多⾏编辑
⌥⌘↓ - 向下插⼊⼀个光标，或者使⽤ ⌥ + Click
⇧⌥ + ⿏标拖动 - 多列区块选择，再配合 ⇧⌘→ 可选中⾄结尾处
⇧⌘L - 选择相同⽂本
⌘F2 - 选择相同单词，或者使⽤ ⌘D 依次加⼊选中
代码定位
⇧⌘\ - 跳转⾄对应匹配括号处
⇧⌘O - 跳转⾄对象、属性、⽅法
⌃G - 跳转⾄指定⾏
⌘↓ - 跳转⾄⽂件结尾
⇧⌘M - 显⽰当前⽂件的错误与警告信息
F12 - 跳转⾄定义⾏
⌥F12 - 浮窗打开定义⾏（可直接修改）
⌥⌘ + Click - 新开侧边窗⼝跳转⾄定义⾏
代码展⽰
⌥Z - 开启/关闭代码⾃动换⾏，还可通过 editor.wrappingColumn 配置单⾏最⼤字符数
visual studio和vs code的区别⇧⌘[ - 代码折叠，⇧⌥⌘[ 为全部折叠
⇧⌘] - 代码展开，⇧⌥⌘] 为全部展开
⇧⌥F - 代码格式化
窗⼝操作
⌘1 ⌘2 ⌘3 - 切换⾄对应的⼦窗⼝
⌃Tab - 切换当前⼦窗⼝的标签页
⌃` - 打开内置 Terminal 窗⼝
⌘⇧U - 打开/关闭 Output 窗⼝，可查看 Extensions/Git/Task 输出
2.2 插件推荐
3. 常见问题
3.1 如何⽀持 PHP Smarty Template 语法
Preferences -> Workspace Settings（或 User Settings）VS Code 能识别⼤部分主流代码⽂件，当需要进⾏关联语法设置时，可通过Preferences -> Workspace Settings
配置⽂件进⾏设置。
例如，以下代码可以将后缀为 .tpl 的 Smarty 模板⽂件关联成 PHP 语法：
"files.associations":{"*.tpl":"php"}
3.2 如何在 sidebar 隐藏编译后⽂件
Preferences -> Workspace Settings（或 User Settings）配置⽂件，将需要隐藏的⽂件按 glob 匹配模式进⾏配置，例如以下是设置Preferences -> Workspace Settings
Angular2 TypeScript 项⽬中隐藏 .js 与 .js.map ⽂件的配置：
{"lude": {"**/._*":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）中加⼊以下配置，来关闭或启⽤这些规则：
{"lude": {"**/node_modules":false,"**/bower_components":true}}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。