Visual Studio（VS） Code详解

1 介绍1.1 简介1.2 特色1.3 发展历程1.4 开发人员背景1.5 与其他IDE对比 2 资料汇总3 安装3.1 下载3.2 ubuntu下安装3.3 windows下安装 4 功能模块的菜单栏介绍4.1 左侧菜单介绍 5 基本使用流程6 快捷键6.1 常用6.2 基础编辑 Basic editing6.3 导航 Navigation6.4 搜索和替换 Search and replace6.5 多光标和选择 Multi-cursor and selection6.6 丰富的语言编辑 Rich languages editing6.7 编辑器管理 Editor management6.8 文件管理 File management6.9 显示 Display6.10 调试 Debug6.11 集成终端 Integrated terminal 7 插件7.1 插件商场 8 代码及技术路线8.1 代码（已经开源）8.2 技术路线8.3 Electron简单介绍 9 高级功能9.1 终端9.2 diff1 基本文件比对2 当前仓库文件变动（相对于Head） 9.3 命令窗口9.4 多人协作9.5 写作1 LaTeX2 Markdown3 AsciiDoc 9.6 作为 XFtp 默认编辑器9.7 git graph 10 注意事项10.1 代码跳转 | 上下文无关模式 参考

1 介绍

1.1 简介

Visual Studio Code（简称“VS Code” ）是Microsoft在4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它是一款免费开源的现代化轻量级、可高定制化的代码编辑器。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。它支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。它可以写文档，可以看PDF，可以编辑数学公式，可以编写样式css文件，可以生成图片，网页和pdf。

1.2 特色

Markdown可以编辑和展示双窗口，和Typora比虽然不能所见即所得，但是相对有道笔记的md比较友好。编辑，编译，运行，调试集成，当然还有其他集成插件了。支持多语言，比如 C++、JAVA、PYTHON、JS、PHP 等等；基本日常用到的希望不用开多种 IDE 就能解决；支持 vim、sublime、emacs、eclipse 等各种其他编辑器的快捷键。支持多种编码方式。代码有 gbk 和 utf8 两种，希望 ide 能自动识别。代码自动补全、函数列表、函数引用、函数定义、查到、函数跳转、函数跳回 都比较好用。支持上传到 sftp支持 svn、git支持 markdownide 能显示文件全部路径（近期接触到的代码，不同文件夹下同名文件太多）主题好看点ide 上手快，配置简单，跨平台；占用内存少，不卡。轻便灵活支持调试代码。支持跨平台使用，windows、ubuntu 等操作系统

1.3 发展历程

-04 发布-11 开源它是Github 度最火的开源项目。-05 发布 VSCode Remote Development重要转折，伴随微软整个的开放开源跨平台风潮，Erich Gamma 敏锐的决定将产品从 Browser Based IDE 转向跨平台的 Desktop IDE，但仍然使用 Web 技术，于是 electron 完美契合，VSCode 团队花了六个月使用 Electron 将 Web 编辑器桌面化，又花了六个月将整个 IDE 插件化，最终 VSCode 成为一个流行的产品同时也成为一个典型的 Electron 客户端开源项目。

1.4 开发人员背景

团队负责人：Erich Gamma . JUnit 作者之一，《设计模式》作者之一， Eclipse 架构师。 加入微软，在瑞士苏黎世组建团队开发基于 web 技术的编辑器，也就是后来的 monaco-editor。VSCode 开发团队从 10 来个人开始，早期成员大多有 Eclipse 开发团队的背景，混合老中新三代不同水平的程序员，在微软这个巨无霸的商业公司里面想要落地这样一个宏大的愿景是不容易的，团队一开始定下的思路就是像 start up 一样工作，每月每年都要 ship 东西。

1.5 与其他IDE对比

sourceinsight，不支持 gbksourceinsight + beyond compare.sourceinsight 上述功能在 4 支持不好，对于长路径会被省略掉。对于同名文件很多的项目，看代码很困难。vim 对于大规模写代码，需要很熟悉才行，这导致学习成本很高。eclipse 等虽然也能配置 C++，JAVA，但太过笨重，多开几个窗口后，机器基本就废了。

2 资料汇总

3 安装

3.1 下载

/Download

3.2 ubuntu下安装

命令安装

sudo dpkg -i code_***.deb

3.3 windows下安装

4 功能模块的菜单栏介绍

4.1 左侧菜单介绍

5 基本使用流程

6 快捷键

官网给出的快捷键如下图，不熟悉时，可以如下操作，然后做提示。

文件->首选项->键盘快捷方式，打开后选择 固定。

6.1 常用

Ctrl + Shift + P，F1显示命令面板 Show Command PaletteCtrl + P快速打开 Quick OpenCtrl + Shift + N新窗口/实例 New window/instanceCtrl + Shift + W关闭窗口/实例 Close window/instance

6.2 基础编辑 Basic editing

Ctrl+X剪切行（空选定） Cut line (empty selection)Ctrl+C复制行（空选定）Copy line (empty selection)Alt+ ↑ / ↓向上/向下移动行 Move line up/downShift+Alt + ↓ / ↑向上/向下复制行 Copy line up/downCtrl+Shift+K删除行 Delete lineCtrl+Enter在下面插入行 Insert line belowCtrl+Shift+Enter在上面插入行 Insert line aboveCtrl+Shift+\跳到匹配的括号 Jump to matching bracketCtrl+] / [缩进/缩进行 Indent/outdent lineHome转到行首 Go to beginning of lineEnd转到行尾 Go to end of lineCtrl+Home转到文件开头 Go to beginning of fileCtrl+End转到文件末尾 Go to end of fileCtrl+↑ / ↓向上/向下滚动行 Scroll line up/downAlt+PgUp / PgDown向上/向下滚动页面 Scroll page up/downCtrl+Shift+[折叠（折叠）区域 Fold (collapse) regionCtrl+Shift+]展开（未折叠）区域 Unfold (uncollapse) regionCtrl+K Ctrl+[折叠（未折叠）所有子区域 Fold (collapse) all subregionsCtrl+K Ctrl+]展开（未折叠）所有子区域 Unfold (uncollapse) all subregionsCtrl+K Ctrl+0折叠（折叠）所有区域 Fold (collapse) all regionsCtrl+K Ctrl+J展开（未折叠）所有区域 Unfold (uncollapse) all regionsCtrl+K Ctrl+C添加行注释 Add line commentCtrl+K Ctrl+U删除行注释 Remove line commentCtrl+/切换行注释 Toggle line commentShift+Alt+A切换块注释 Toggle block commentAlt+Z切换换行 Toggle word wrap

6.3 导航 Navigation

Ctrl + T显示所有符号 Show all SymbolsCtrl + G转到行... Go to Line...Ctrl + P转到文件... Go to File...Ctrl + Shift + O转到符号... Go to Symbol...Ctrl + Shift + M显示问题面板 Show Problems panelF8转到下一个错误或警告 Go to next error or warningShift + F8转到上一个错误或警告 Go to previous error or warningCtrl + Shift + Tab导航编辑器组历史记录 Navigate editor group historyAlt + ←/→返回/前进 Go back / forwardCtrl + M切换选项卡移动焦点 Toggle Tab moves focus

6.4 搜索和替换 Search and replace

Ctrl + F查找 FindCtrl + H替换 ReplaceF3 / Shift + F3查找下一个/上一个 Find next/previousAlt + Enter选择查找匹配的所有出现 Select all occurences of Find matchCtrl + D将选择添加到下一个查找匹配 Add selection to next Find matchCtrl + K Ctrl + D将最后一个选择移至下一个查找匹配项 Move last selection to next Find matchAlt + C / R / W切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word

6.5 多光标和选择 Multi-cursor and selection

Alt +单击插入光标 Insert cursorCtrl + Alt +↑/↓在上/下插入光标 Insert cursor above / belowCtrl + U撤消上一个光标操作 Undo last cursor operationShift + Alt + I在选定的每一行的末尾插入光标 Insert cursor at end of each line selectedCtrl + I选择当前行 Select current lineCtrl + Shift + L选择当前选择的所有出现 Select all occurrences of current selectionCtrl + F2选择当前字的所有出现 Select all occurrences of current wordShift + Alt + →展开选择 Expand selectionShift + Alt + ←缩小选择 Shrink selectionShift + Alt + （拖动鼠标）列（框）选择 Column (box) selectionCtrl + Shift + Alt +（箭头键）列（框）选择 Column (box) selectionCtrl + Shift + Alt + PgUp / PgDown列（框）选择页上/下 Column (box) selection page up/down

6.6 丰富的语言编辑 Rich languages editing

Ctrl + 空格触发建议 Trigger suggestionCtrl + Shift + Space触发器参数提示 Trigger parameter hintsTabEmmet 展开缩写 Emmet expand abbreviationShift + Alt + F格式化文档 Format documentCtrl + K Ctrl + F格式选定区域 Format selectionF12转到定义 Go to DefinitionAlt + F12Peek定义 Peek DefinitionCtrl + K F12打开定义到边 Open Definition to the sideCtrl + .快速解决 Quick FixShift + F12显示引用 Show ReferencesF2重命名符号 Rename SymbolCtrl + Shift + . /，替换为下一个/上一个值 Replace with next/previous valueCtrl + K Ctrl + X修剪尾随空格 Trim trailing whitespaceCtrl + K M更改文件语言 Change file language

6.7 编辑器管理 Editor management

Ctrl+F4, Ctrl+W关闭编辑器 Close editorCtrl+K F关闭文件夹 Close folderCtrl+\拆分编辑器 Split editorCtrl+ 1 / 2 / 3聚焦到第1，第2或第3编辑器组 Focus into 1st, 2nd or 3rd editor groupCtrl+K Ctrl+ ←/→聚焦到上一个/下一个编辑器组 Focus into previous/next editor groupCtrl+Shift+PgUp / PgDown向左/向右移动编辑器 Move editor left/rightCtrl+K ← / →移动活动编辑器组 Move active editor group

6.8 文件管理 File management

Ctrl+N新文件 New FileCtrl+O打开文件... Open File...Ctrl+S保存 SaveCtrl+Shift+S另存为... Save As...Ctrl+K S全部保存 Save AllCtrl+F4关闭 CloseCtrl+K Ctrl+W关闭所有 Close AllCtrl+Shift+T重新打开关闭的编辑器 Reopen closed editorCtrl+K输入保持打开 Enter Keep OpenCtrl+Tab打开下一个 Open nextCtrl+Shift+Tab打开上一个 Open previousCtrl+K P复制活动文件的路径 Copy path of active fileCtrl+K R显示资源管理器中的活动文件 Reveal active file in ExplorerCtrl+K O显示新窗口/实例中的活动文件 Show active file in new window/instance

6.9 显示 Display

F11切换全屏 Toggle full screenShift+Alt+1切换编辑器布局 Toggle editor layoutCtrl+ = / -放大/缩小 Zoom in/outCtrl+B切换侧栏可见性 Toggle Sidebar visibilityCtrl+Shift+E显示浏览器/切换焦点 Show Explorer / Toggle focusCtrl+Shift+F显示搜索 Show SearchCtrl+Shift+G显示Git Show GitCtrl+Shift+D显示调试 Show DebugCtrl+Shift+X显示扩展 Show ExtensionsCtrl+Shift+H替换文件 Replace in filesCtrl+Shift+J切换搜索详细信息 Toggle Search detailsCtrl+Shift+C打开新命令提示符/终端 Open new command prompt/terminalCtrl+Shift+U显示输出面板 Show Output panelCtrl+Shift+V切换Markdown预览 Toggle Markdown previewCtrl+K V从旁边打开Markdown预览 Open Markdown preview to the side

6.10 调试 Debug

F9切换断点 Toggle breakpointF5开始/继续 Start/ContinueShift+F5停止 StopF11 / Shift+F11下一步/上一步 Step into/outF10跳过 Step overCtrl+K Ctrl+I显示悬停 Show hover

6.11 集成终端 Integrated terminal

Ctrl+`显示集成终端 Show integrated terminalCtrl+Shift+`创建新终端 Create new terminalCtrl+Shift+C复制选定 Copy selectionCtrl+Shift+V粘贴到活动端子 Paste into active terminalCtrl+↑ / ↓向上/向下滚动 Scroll up/downShift+PgUp / PgDown向上/向下滚动页面 Scroll page up/downCtrl+Home / End滚动到顶部/底部 Scroll to top/bottom

7 插件

7.1 插件商场

Extensions for the Visual Studio family of products

8 代码及技术路线

8.1 代码（已经开源）

github–vscode

8.2 技术路线

基于Electron，Electron本身挺大的，像vs code这种强大团队应该做过很好的剪裁优化。

基于Electron开发的桌面APP知名的有很多：自己用过的有vs code、GitKraken、Postman。

此外5月SpaceX发射的Dragon 2载人航天飞船，使用了Chromium和JavaScript来构建用户界面。

8.3 Electron简单介绍

1、Chromium： 作为google推出的开源浏览器内核，大规模应用在了Chrome浏览器、360浏览器、QQ浏览器、微信内嵌网页等应用场景。

2、NodeJS: 把JavaScript技术栈延伸到了服务器和操作系统(文件操作、异步读写、进程/线程管理等)领域，让前端技术的可应用场景进一步丰富和下沉。

3、Native API: 对Window、Linux和IOS的跨平台做了兼容处理，把窗口操作、弹窗消息、操作系统信息等API封装了一遍, 使得Web界面和Native功能完美结合到一起。

9 高级功能

9.1 终端

Ctrl+`显示集成终端 Show integrated terminalCtrl+Shift+`创建新终端 Create new terminal

9.2 diff

1 基本文件比对

对于基准文件，右键-选择进行比较

对于目标文件，右键-与已选项目进行比较

2 当前仓库文件变动（相对于Head）

9.3 命令窗口

Ctrl + Shift + P 打开命令窗口

> 默认接口。可匹配到并快捷执行 VSCode 提供的所有的接口。这些接口中包括自己安装的插件提供的接口；: 跳转到指定行号；@ 跳转到指定符号；符号（Symbol），包括函数、变量、字段、结构等；@: 依然是跳转到指定符号，但区别在于所有符号归类显示；：跳转到指定文件。没错，删除首字符，直接输入文件的名字！能直接跳转到文件！

9.4 多人协作

VS Live Share，一个下载量接近千万的插件，能允许实时地同别人一同编辑及调试文件。与只注重结果的 Git 相比，VS Live Share 能展示同伴编辑的过程。

9.5 写作

1 LaTeX

2 Markdown

3 AsciiDoc

9.6 作为 XFtp 默认编辑器

9.7 git graph

之前使用GitKraken，打开一个仓库很慢。直接使用git graph，很香！

10 注意事项

10.1 代码跳转 | 上下文无关模式

代码跳转功能，在默认情况下，当 include 头文件失败时，VSCode 的代码感知引擎会自动切换到「上下文无关」的模式。该模式下，代码跳转的结果会显得乱。

若要阻止代码感知引擎切换到「上下文无关」的模式，修改扩展的设置即可。

参考

1、Visual Studio Code官网

2、Visual Studio Code百科

3、Visual Studio Code 文档

4、Visual Studio Code开发环境配置

5、Ubuntu 16.04 安装VSCode

6、Extensions for the Visual Studio family of products

7、从 VSCode 看大型 IDE 技术架构

8、github–vscode

9、electron官网

10、awesome-electron

11、Electron介绍(一)

12、Visual Studio Code 菜鸟教程：从入门到精通

13、万字长文把 VSCode 打造成 C++ 开发利器

14、vs code 官网快捷键

15、VScode快捷键（最全）