Visual Studio（VS） Code详解

1 介绍

1.1 简介

• Visual Studio Code（简称“VS Code” ）是Microsoft在2015年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
• 支持 markdown
• ide 能显示文件全部路径（近期接触到的代码，不同文件夹下同名文件太多）
• 主题好看点
• ide 上手快，配置简单，跨平台；
• 占用内存少，不卡。轻便灵活
• 支持调试代码。
• 支持跨平台使用，windows、ubuntu 等操作系统

1.3 发展历程

• 2015-04 发布
• 2015-11 开源
• 它是Github 2018年度最火的开源项目。
• 2019-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 架构师。2011 加入微软，在瑞士苏黎世组建团队开发基于 web 技术的编辑器，也就是后来的 monaco-editor。
• VSCode 开发团队从 10 来个人开始，早期成员大多有 Eclipse 开发团队的背景，混合老中新三代不同水平的程序员，在微软这个巨无霸的商业公司里面想要落地这样一个宏大的愿景是不容易的，团队一开始定下的思路就是像 start up 一样工作，每月每年都要 ship 东西。

1.5 与其他IDE对比

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

2 资料汇总

3 安装

3.1 下载

https://code.visualstudio.com/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 Palette
Ctrl + P				快速打开 Quick Open
Ctrl + Shift + N		新窗口/实例 New window/instance
Ctrl + 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/down
Shift+Alt + ↓ / ↑	向上/向下复制行 Copy line up/down
Ctrl+Shift+K		删除行 Delete line
Ctrl+Enter			在下面插入行 Insert line below
Ctrl+Shift+Enter	在上面插入行 Insert line above
Ctrl+Shift+\		跳到匹配的括号 Jump to matching bracket
Ctrl+] / [			缩进/缩进行 Indent/outdent line
Home				转到行首 Go to beginning of line
End					转到行尾 Go to end of line
Ctrl+Home			转到文件开头 Go to beginning of file
Ctrl+End			转到文件末尾 Go to end of file
Ctrl+↑ / ↓			向上/向下滚动行 Scroll line up/down
Alt+PgUp / PgDown	向上/向下滚动页面 Scroll page up/down
Ctrl+Shift+[		折叠（折叠）区域 Fold (collapse) region
Ctrl+Shift+]		展开（未折叠）区域 Unfold (uncollapse) region
Ctrl+K Ctrl+[		折叠（未折叠）所有子区域 Fold (collapse) all subregions
Ctrl+K Ctrl+]		展开（未折叠）所有子区域 Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0		折叠（折叠）所有区域 Fold (collapse) all regions
Ctrl+K Ctrl+J		展开（未折叠）所有区域 Unfold (uncollapse) all regions
Ctrl+K Ctrl+C		添加行注释 Add line comment
Ctrl+K Ctrl+U		删除行注释 Remove line comment
Ctrl+/				切换行注释 Toggle line comment
Shift+Alt+A			切换块注释 Toggle block comment
Alt+Z				切换换行 Toggle word wrap

6.3 导航 Navigation

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

6.4 搜索和替换 Search and replace

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

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

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

6.6 丰富的语言编辑 Rich languages editing

Ctrl + 空格				触发建议 Trigger suggestion
Ctrl + Shift + Space	触发器参数提示 Trigger parameter hints
Tab	Emmet 				展开缩写 Emmet expand abbreviation
Shift + Alt + F			格式化文档 Format document
Ctrl + K Ctrl + F		格式选定区域 Format selection
F12						转到定义 Go to Definition
Alt + F12				Peek定义 Peek Definition
Ctrl + K F12			打开定义到边 Open Definition to the side
Ctrl + .				快速解决 Quick Fix
Shift + F12				显示引用 Show References
F2						重命名符号 Rename Symbol
Ctrl + Shift + . /，	替换为下一个/上一个值 Replace with next/previous value
Ctrl + K Ctrl + X		修剪尾随空格 Trim trailing whitespace
Ctrl + K M				更改文件语言 Change file language

6.7 编辑器管理 Editor management

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

6.8 文件管理 File management

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

6.9 显示 Display

F11				切换全屏 Toggle full screen
Shift+Alt+1		切换编辑器布局 Toggle editor layout
Ctrl+ = / -		放大/缩小 Zoom in/out
Ctrl+B			切换侧栏可见性 Toggle Sidebar visibility
Ctrl+Shift+E	显示浏览器/切换焦点 Show Explorer / Toggle focus
Ctrl+Shift+F	显示搜索 Show Search
Ctrl+Shift+G	显示Git Show Git
Ctrl+Shift+D	显示调试 Show Debug
Ctrl+Shift+X	显示扩展 Show Extensions
Ctrl+Shift+H	替换文件 Replace in files
Ctrl+Shift+J	切换搜索详细信息 Toggle Search details
Ctrl+Shift+C	打开新命令提示符/终端 Open new command prompt/terminal
Ctrl+Shift+U	显示输出面板 Show Output panel
Ctrl+Shift+V	切换Markdown预览 Toggle Markdown preview
Ctrl+K V		从旁边打开Markdown预览 Open Markdown preview to the side

6.10 调试 Debug

F9				切换断点 Toggle breakpoint
F5				开始/继续 Start/Continue
Shift+F5		停止 Stop
F11 / Shift+F11	下一步/上一步 Step into/out
F10				跳过 Step over
Ctrl+K Ctrl+I	显示悬停 Show hover

6.11 集成终端 Integrated terminal

Ctrl+`				显示集成终端 Show integrated terminal
Ctrl+Shift+`		创建新终端 Create new terminal
Ctrl+Shift+C		复制选定 Copy selection
Ctrl+Shift+V		粘贴到活动端子 Paste into active terminal
Ctrl+↑ / ↓			向上/向下滚动 Scroll up/down
Shift+PgUp / PgDown	向上/向下滚动页面 Scroll page up/down
Ctrl+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。
此外2020年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 terminal
Ctrl+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快捷键（最全）