您的位置:首页 - 教程 - Visual Studio - 正文
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 面板,点击左侧被修改的文件,即可进行版本对比。使用快捷键 ?P 打开快捷窗口,可直接使用 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》,其中较为常用的快捷键有以下这些:



主命令框

最重要的功能就是F1或Ctrl+Shift+P打开的命令面板了,在这个命令框里可以执行VSCode的任何一条命令,甚至关闭这个编辑器。
按一下Backspace会进入到Ctrl+P模式里
在Ctrl+P下输入>又可以回到Ctrl+Shift+P模式。
在Ctrl+P窗口下还可以

直接输入文件名,跳转到文件? 列出当前可执行的动作! 显示Errors或Warnings,也可以`Ctrl+Shift+M: 跳转到行数,也可以Ctrl+G直接进入@ 跳转到symbol(搜索变量或者函数),也可以Ctrl+Shift+O直接进入@:根据分类跳转symbol,查找属性或函数,也可以Ctrl+Shift+O后输入:进入# 根据名字查找symbol,也可以Ctrl+T
常用快捷键

编辑器与窗口管理

同时打开多个窗口(查看多个项目)
打开一个新窗口: Ctrl+Shift+N关闭窗口: Ctrl+Shift+W
同时打开多个编辑器(查看多个文件)
新建文件 Ctrl+N 文件之间切换 Ctrl+Tab 切出一个新的编辑器(最多3个)Ctrl+\,也可以按住Ctrl鼠标点击Explorer里的文件名左中右3个编辑器的快捷键Ctrl+1 Ctrl+2 Ctrl+33个编辑器之间循环切换 Ctrl+` 编辑器换位置,Ctrl+k然后按Left或Right
代码编辑

格式调整
代码行缩进Ctrl+[ Ctrl+]Ctrl+C Ctrl+V如果不选中,默认复制或剪切一整行代码格式化:Shift+Alt+F,或Ctrl+Shift+P后输入format code上下移动一行: Alt+Up 或 Alt+Down向上向下复制一行: Shift+Alt+Up或Shift+Alt+Down在当前行下边插入一行Ctrl+Enter 在当前行上方插入一行Ctrl+Shift+Enter
光标相关
移动到行首:Home移动到行尾:End移动到文件结尾:Ctrl+End移动到文件开头:Ctrl+Home移动到定义处:F12定义处缩略图:只看一眼而不跳转过去Alt+F12移动到后半个括号 Ctrl+Shift+] 选择从光标到行尾Shift+End 选择从行首到光标处Shift+Home删除光标右侧的所有字Ctrl+DeleteShrink/expand selection: Shift+Alt+Left和Shift+Alt+RightMulti-Cursor:可以连续选择多处,然后一起修改,Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up同时选中所有匹配的Ctrl+Shift+LCtrl+D下一个匹配的也被选中(被我自定义成删除当前行了,见下边Ctrl+Shift+K) 回退上一个光标操作Ctrl+U
重构代码
找到所有的引用:Shift+F12同时修改本文件中所有匹配的:Ctrl+F12重命名:比如要修改一个方法名,可以选中后按F2,输入新的名字,回车,会发现所有的文件都修改过了。跳转到下一个Error或Warning:当有多个错误时可以按F8逐个跳转查看diff 在explorer里选择文件右键 Set file to compare,然后需要对比的文件上右键选择Compare with 'file_name_you_chose'.
查找替换
查找 Ctrl+F查找替换 Ctrl+H整个文件夹中查找 Ctrl+Shift+F
匹配符:* to match one or more characters in a path segment? to match on one character in a path segment** to match any number of path segments ,including none{} to group conditions (e.g. {**/*.html,**/*.txt} matches all html and txt files)[] to declare a range of characters to match (e.g., example.[0-9] to match on example.0,example.1, …
显示相关

全屏:F11zoomIn/zoomOut:Ctrl + =/Ctrl + -侧边栏显/隐:Ctrl+B侧边栏4大功能显示:Show Explorer Ctrl+Shift+E Show SearchCtrl+Shift+F Show GitCtrl+Shift+G Show DebugCtrl+Shift+D Show OutputCtrl+Shift+U
其他

自动保存:File -> AutoSave ,或者Ctrl+Shift+P,输入 auto
修改默认快捷键

File -> Preferences -> Keyboard Shortcuts

修改keybindings.json,我的显示在这里C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json

 

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

评论: