Visual Studio（VS） Code详解
2024-04-05 10:54:58
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 editing
- 6.3 导航 Navigation
- 6.4 搜索和替换 Search and replace
- 6.5 多光标和选择 Multi-cursor and selection
- 6.6 丰富的语言编辑 Rich languages editing
- 6.7 编辑器管理 Editor management
- 6.8 文件管理 File management
- 6.9 显示 Display
- 6.10 调试 Debug
- 6.11 集成终端 Integrated terminal
- 7 插件
- 7.1 插件商场
- 8 代码及技术路线
- 8.1 代码（已经开源）
- 8.2 技术路线
- 8.3 Electron简单介绍
- 9 高级功能
- 9.1 终端
- 9.2 diff
- 1 基本文件比对
- 2 当前仓库文件变动（相对于Head）
- 9.3 命令窗口
- 9.4 多人协作
- 9.5 写作
- 1 LaTeX
- 2 Markdown
- 3 AsciiDoc
- 9.6 作为 XFtp 默认编辑器
- 9.7 git graph
- 10 注意事项
- 10.1 代码跳转 | 上下文无关模式
- 参考
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快捷键（最全）
Visual Studio（VS） Code详解相关推荐
- Visual Studio TFS安装详解
团队资源管理器Visual Studio安装与使用. 下载: 百度云盘下载地址(2013版离线安装):链接:https://pan.baidu.com/s/19y9oRxDyiSnyqfntVSuVU ...
- Visual Studio 2019安装详解
目录 windows10安装Visual Studio 前言 安装过程 1.首先去官网下载. 2.双击下载下来的exe 3.选择要安装的库 4. 全改成D盘 5.等待中... 6.VS的使用 wind ...
- gitlab中文_ASP.NET实战010：Visual Studio使用GitLab详解
什么是GitLab GitLab是一个类似于Github的仓库管理系统的开源项目,是基于Git代码管理工具实现的在线代码仓库托管web服务,支持版本管理.任务管理.项目管理.团队管理.代码浏览.持续集 ...
- Visual Studio调试方式详解
目录 1.概述 2.Debug下的调试 3.Release下的调试 4.附加到进程调试 5.总结
- RAD Studio 11.2详解其务实改进(Delphi C++ Builder)-Alexandria
RAD Studio 11.2详解其务实改进(Delphi & C++ Builder)-Alexandria 目录 RAD Studio 11.2详解其务实改进(Delphi & C ...
- 在linux安装编译vscode,Linux中安装 Visual Studio Code 详解
一起来学习如何在 Linux 发行版中安装 Visual Studio Code.Visual Studio Code 是基于 Electron 优化代码后的编辑器,后者是基于 Chromium 的一 ...
- [译]Visual Studio 2008 Code Metrics
代码度量(Code Metrics)是用来测量专业标准的软件特性. 在某些方面,它提供了量化的有用反馈给开发者. 查看代码度量值很简单:在项目或解决方案上按右键,选择"Calculate C ...
- gray code java_格雷码Gray Code详解
格雷码简介 在一组数的编码中,若任意两个相邻的代码只有一位二进制数不同,则称这种编码为格雷码(Gray Code),另外由于最大数与最小数之间也仅一位数不同,即"首尾相连",因此又 ...
- 如何无代码快速制作AR特效和滤镜？Lens Studio官方案例详解之Paper Head
我首先在这个网页看了一下Lens Studio的总体介绍,然后想跟着Templates提供的模板快速上手,其中第一个模板就是Paper Head.但是我发现,模板看着简单,但是其背后的很多概念.逻辑还 ...
最新文章
- 【Fibonacci-PEG，LDPC】基于Fibonacci-PEG算法的LDPC码校验矩阵的构造
- 【渝粤题库】广东开放大学 信息安全数学基础 形成性考核 (2)
- Python更改数据类型——astype()方法和to_numeric()函数
- hdu 5748(LIS) Bellovin
- 善解人意，改善您的在线关系
- 之江天枢正式开源！一文详解天枢核心优势
- 计算机怎么查看网络连接,怎么查看自己的
- 如何降低软件项目的风险 -- 包括客户的风险，软件提供商的风险
- 史上最全40道dubbo面试题
- 谷歌浏览器插件之广告净化器
- 创建简单vue项目 / Webpack创建vue项目
- linux iso镜像安装工具,教你制作属于自己的CentOS 6.4一键自动化安装ISO镜像光盘...
- python提高for循环速度_提升Python运行效率的小窍门
- AdobeFlashPlayer.资料
- Excel表格转换为布尔表
- 楼宇能效控制器真的有用吗
- 教师资格证查询找不到服务器怎么办,教师资格证成绩查询页面打不开怎么办？...
- android开发笔记之Retrofit
- 【Access to XMLHttpRequest at ‘http://localhost:8080/test/doLogin.do?id=1414pwd=4141code=4141‘ 】
- 一个精明主妇写的省钱过日子的好贴！