「VS Code」Visual Studio Code 菜鸟教程:从入门到精通

2023-11-18

「VS Code」Visual Studio Code 教程:从入门到精通

日志

  1. 「2020-04-26」介绍如何配置 LaTeX 环境;
  2. 「2019-09-06」更新了选择默认终端的方法;在胶片中补全列选方式;
  3. 「2019-05-26」补全了全文的剩余部分,并引入了对 Remote Development 插件的介绍;
  4. 「2019-03-25」提交了本文的 PPT 框架。

作者按:Visual Studio Code,或简称为 VSCode,是我最喜欢的代码编辑器,我希望能有更多人享受到 VSCode 的便捷与强大。在希望学习一门新技术的时候,我们往往会想着去搜索一份教程。根据二八定律,我们往往只需了解一门技术的部分最常用的功能,就足以应对大多数开发场景,因此介绍最常见功能的教程,而非介绍全部特性的手册,成了我们的学习技术的首选。然而已存教程不足以成为我们了解 VSCode 的窗口,很多具有广泛使用场景的功能,比如命令窗口和终端,这些教程都没有涉猎。该种情况促成了本文的诞生。本文的愿景是,哪怕是从未使用过 VSCode 的读者,也能在阅读本文后便精通 VSCode 的使用。


大纲

2

本文照例以一份 PPT 展开。Markdown 直接贴图太丑了,还是组织成 PPT 之后直接贴上来吧。本文所有文字介绍都在图片下方。

简介

3

Visual Studio Code 是微软出品的轻量级跨平台编辑器。数据显示,Visual Studio Code 系 Github 2018 年年度最火开源项目(传送门)。虽然社区的建设并不能代表绝对使用人数,但至少说明 VSC 真的是一个集百千宠爱于一身并不断成长的软件。

基本操作

快捷键

4

VSCode 首先是一个代码编辑器。因此介绍 VSCode 的时候自然应该从文本编辑功能开始。在使用文本编辑功能的时候,我们必然是重度依赖快捷键的。这是很显然的道理。所以我们通过介绍编辑快捷键介绍 VSCode 的文本编辑功能。

对于一个普通的文本而言,一般操作的最大粒度也就是行了。VSCode 支持的行操作主要包括:

  • 行复制:Ctrl + c。当你没有选中行中任意字符时,复制出来的实际上是整行的内容;
  • 行移动:Alt + ↑/↓。想整体移动一行怎么办?剪切粘贴?Alt 加方向键轻松移动一行!注意,如果你扩选多行时,相应地会移动多行;
  • 行复制:Shift + Alt + ↑/↓。想在某行的基础上修改?复制粘贴?Shift 加 Alt 加方向键一步到位!

当然,对于受支持的代码文件,一般还会支持别的操作,比如:

  • 行注释:Ctrl + /
  • 块注释:Alt + Shit + A
  • 格式化:Alt + Shit + F

注意: 你能在 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf 中找到本文提及的大多数快捷键。

5

对于缩进,VSCode 也有相应的快捷键。相信写 Python、markdown 的同学和有强迫症的同学都会无比感激这个设定。在 VSCode 中进行缩进操作很简单:

Ctrl + ]/[ 即可完成整行的向右缩进一个单位 / 向左缩进一个单位。缩进完成后,会显示列对齐线帮助你把握缩进信息。同样地,选择多行的时候,可以同时对多行进行缩进。

6

在开发中我们经常会有这样的需求:跳到工程中某个文件的某个位置之后再回到之前的位置。按照一般的操作逻辑,我们会思考之前打开了哪个文件,然后打开它,再找到之前的位置。这样的事情做一次两次还好,多了就让人心烦了。所以编辑器为什么不在光标位置「大幅度改变」时记录光标的位置呢?这些位置记录成队列,让我们可以自由地从从这些位置中切换。

因着这样的需求而出现的功能就叫做「编辑点回退」,上面所说的位置就是「编辑点」。

我们使用 Alt + → / ← 切换到下一个 / 上一个编辑点。

7

在阅读代码时,我们常常会希望跳过一些不需要关注的分支。遇到一些不规范的代码时,我们为了找到相应的括号可能会翻上百、甚至上千行。回想一下,我们是怎么找到另一个括号的?我们在点击其中一个括号时,代码编辑器会高亮相应的括号!

代码编辑器能够解析代码!它已经知道了另一个括号的位置!那它为什么不提供给我们接口,让我们直接跳到另一个括号那里去??

这就是 Ctrl + Shift + \ 了。点击一个括号,在使用这个快捷键后,光标就能跳转到相应括号位置。

有时候你可能会想眼不见为净,要是编辑器能直接把这一堆东西折叠了该多好。

这就是 Ctrl + Shift + [ 了。这个快捷键不记也没关系,看 PPT 里的第三张图,第一个花括号旁边是不是有个加/减号?点击它就可以打开/折叠代码区域。

8

发散一下思维,要是我们能一次性折叠所有代码就好了。这样我们无需任何插件,就能很快地了解代码的布局了。这些快捷键都在 PPT 里注明了,自己尝试一下就好了。

9

很多朋友更多时候是在用代码编辑器看代码,在看代码的时候怎么离得开查看定义呢?在 VSCode 里查看代码定义的方法主要有两种:

  • Alt + F12:代码定义以浮窗的形式覆盖在当前页面上;
  • F12:直接跳转到代码定义的位置。

实际上,我个人更喜欢的方式是后者,我宁愿在跳转后回退编辑点,也不愿意忍受浮窗带来的视觉割裂感。但为了说明前者具体是什么,我还是配了一张图。图中函数的定义以浮窗的形式出现了在函数下方,并标注了位置。

注意: 很多朋友在阅读 c/c++ 代码时会觉得 VSCode 的代码跳转功能十分垃圾,找变量函数等的定义位置时瞎鸡儿跳。其实你可能冤枉它了。在默认情况下,当 include 头文件失败时,VSCode 的代码感知引擎会自动切换到「上下文无关」的模式。这在某些情况下十分有用,但如果你不知道这一点,那么代码跳转的结果可能会令你十分困惑。

若要阻止代码感知引擎切换到「上下文无关」的模式,修改扩展的设置即可。如 PPT 所示,你只需在设置中关闭 C_Cpp: Intelli Sense Engine Fallback 即可。修改设置的方法见后文。

列选、检索与替换

10
提到现代文本编辑器,怎么能不提到列选呢?列选是为了解决多行编辑的问题。列选的方式的打开方式有多种:

  • 鼠标中键框选:摁住鼠标左键画矩形,矩形相交及包含的字符均被选中;
  • Alt + Shit + 左键:一定程度上等同上一条,区别在于初始光标位置作为矩形的一角,而点击位置作为矩形的对角;
  • Alt + 左键:实际上这个才是我们最常使用的方式,它提供了最大的灵活性。长按 Alt 后,每个点击的位置都是编辑点。注意,这些编辑点是有序的!

值得一提的是,这个功能可以搭配 Insert Numbers 插件。这个插件可以在选中的位置上生成格式化的字符串组。如上图所示,我们在一份代码的 19~22 行分别插入了 0~3。发散一下思维,我们怎么插入 2 3 1 0 这样的序列?依次让第四、三、一、二处成为编辑点就好了。

具体怎么安装插件这里,我觉得 VSCode 的插件功能做得很棒,不必介绍大家都应该懂。唯一需要注意的是,有一些特殊的插件,需要额外安装一些工具包,然后在 VSCode 的插件配置里给定路径。相信有 Linux 开发经验的朋友都不会对此感到陌生。

11

好了,终于到了使用频率爆炸的检索与替换了。与最基本的检索替换相比,VSCode 支持正则查找/替换,相信用过的人都懂得它的好。图中我们给出了一个例子,利用正则表达式查找所有以 CBGet 开头的符号名,并将前缀替换为 CBSet。那么如何在 VSCode 中使用查找/替换呢?

  • Ctrl + F / H 文件内查找 / 替换;
  • Ctrl + Shift + F / H 工作区内查找 / 替换。

前者很容易理解,后者是什么意思?这难道不就是全局替换吗?实际上在执行工作区内查找时,可以在「包含的文件」一项填写「文件夹的路径」,从而仅从某文件夹内查找。这在某些情况下,将会是很好用的技巧。

对了,匹配栏上有三个图标,激活后分别代表:

  • 区分大小写;
  • 开启全词匹配;
    • 基于 VSCode 的分词(试试 Ctrl + Shift + → / ← 选中一个单词)技术,匹配项应能与一个单词完全匹配;
    • VSCode 的分词技术目前仍十分基本,大概原理是将半角符号处理为单词的边界,所以并不支持中文的分词;
      • 我能做什么? 为 ISSUE(传送门) 点赞,提高问题的解决优先级。
  • 开启正则表达式。

12

比较神奇的是 VSCode 还支持代码的运行和调试。由于调试是 VSCode 左侧栏提供的四大功能之一,因此这里把它作为了 VSCode 中的基本操作。相关的快捷键有:

  • F5 运行;
  • Ctrl + Shift + D 打开调试面板。调试面板就是图中左边的那一栏。

但快捷键不是使用这个特性的主要难点,主要难点在于环境的搭建。PPT 中以较为简单的 Python 为例,我已经预先配置好了 Python 的环境变量,并在一个 python 文件的第二行加了断点。断点的添加方式十分简单,和大多数 IDE 相似地,在行号左边的空列点一下就好了。运行之后所有变量都被打印了出来,并且提供了控制调试进度的浮窗。

终端

13

终于!终于到终端了!在我心里,终端完全是化腐朽为神奇的东西!恩,腐朽的是 WSL。单独的 WSL(Windows Subsystem for Linux)似乎并没有什么存在的必要(但是还是可以用 VS2017 + WSL 调试 Linux 代码,传送门),如有可能,我更愿意选择 xshell。毕竟每次光 cd /mnt/d/xxx 进入当前目录就能阻止我打开 WSL 了。但 VSCode 的终端可以配置成 WSL 后事情变得有些不一样了。

举一个很简单的例子,我在 VSCode 里唤起终端(配制成 WSL 了),编译并运行当前编辑的 C 文件。终端打开时的当前目录就是工作区目录!当 VSCode 打开目录时,这个目录就称为工作区。不仅仅是编译,make、ping、gdb、git,想用什么用什么,就很开心了。

默认情况下 VSCode 唤起的终端是 Poweshell,这可能是因为 WSL 是需要用户安装的,而 Powershell 则是每个 windows10 用户都有的。将内置终端修改为 WSL 的方法有两种,这里推荐前者:

  • 唤起终端并在终端选项卡的菜单界面直接选择默认终端;
  • 修改配置文件:"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\wsl.exe"

修改设置的方法依然见后文。

高级操作

个性化

14

几乎每个程序猿都有自己倾向的审美及编码风格。

宋体好看还是微软雅黑好看?用 TAB 还是空格?TAB 长两个字符还是四个字符?文件的换行符是 windows 风格的 \r\n 还是 *nix 风格的 \n?文件结尾要不要空新行?代码的格式化风格是用自己的格式化器,还是预设的 LLVM、Google、Chromium?这些都是可以定制的。

作为新手,可以通过 GUI 的 导航栏 → 文件 → 首选项 → 设置 找到修改这些设置的接口。不得不说这些年里 VSCode 的 GUI 做得越来越好了,早年 VSCode 还只能通过修改 json 文件进行设置,而且有些设置的含义只能靠名字猜。而现在 VSCode 已经提供了完备的 GUI,帮助用户点选了。

另外在使用任何一款软件时,我们往往都会试着找一下自己喜欢的皮肤或主题。VSCode 也不例外。我们主要关注两种主题:

  • 颜色主题:有人喜欢暖色调(我最喜欢的就是 Quiet Light 主题)、有人喜欢冷色调、还有人喜欢暗色调,更有人不得不选择高对比度方案。这些当然是可以定制的;
  • 文件图标主题:当我们在浏览一个陌生的项目时,我们可能想着要去找其中某种特定类型的文件,一般而言,我们的判断方式是用肉眼逐一搜索文件后缀,当然后面还会介绍更高级的方法。但文件图标可能是更好的方案。图形这种信息呈现方式能比文本提供更多的信息量,有利于快速检索。这同样是可以定制的。

需要定制这些主题的话,作为新手,我仍推荐 导航栏 → 文件 → 首选项 → 设置 → 颜色主题 / 文件图标主题

15

相信大多数人都有过这样的编程体验,也即输入一小段我们字符串,然后这些字符可以展开成一大段模板。这样的特性称之为 snippet,也即代码段。作为新手,你使用别人提供好的 snippet 插件就好了。如果你实在想定制属于自己的 snippet 的话,可以参考笔者另外的博客(传送门:[VS Code]跟我一起在Visual Studio Code 添加自定义snippet(代码段),附详细配置)。

Diff

16

有时候我们会有这样的需求:手上拿到了两份相差无几的文件,想要了解到底改了哪些地方。VSCode 内置了很好的解决方案,称之为 diff。操作的方法也很简单,首先 右键 → 选择进行比较 选择要比较的基准文件,然后 右键 → 与已选项目进行比较 选择要比较的目标文件。然后就会在界面中展示两份文件的异同。不一样的地方会被高亮出来。

17

在更一般的情况下,我们会想与 git 仓储的 head 比较,对自己所作的修改形成较为全面的把握。这时候只需在活动栏(界面中最左边的竖栏)中点选源代码管理,并单选更改过的文件即可。只要你 PC 中安装过 git,并且工作区中包含仓储、你也曾进入过仓储所在文件夹,源代码管理就会自动启用。

命令窗口

18

这一部分是 VSCode 的精髓。可以说掌握了这个,才算真正掌握了 VSCode。众所周知,随着软件功能的增长,检索软件功能的接口成了必需品。VSCode 也提供了这样的接口,但更高级。

我们通过 Ctrl + Shift + P 打开命令窗口,命令窗口时根据首字符的不同,能提供截然不同的功能:

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

进阶操作

多人协作

19

VSCode 提供了丰富的插件,这里介绍其中的部分。

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

写作

20

LaTeX,可能是最流行的重量级文本标记语言了。对于很多科研工作者来说,LaTeX 可能是第一款让他们去思考,有哪些排版上的细节需要注意的工具。

这里分享一个在 VSCode 中快速配置 LaTeX 环境的技巧:

  1. 通过 Remote-WSL 插件连接 WSL
  2. 安装插件 LaTeX Workshop
  3. 唤起终端
    1. 将源换为清华的(传送门
    2. sudo apt install texlive-full
  4. 在插件 LaTeX Workshop 中构建项目并预览生成的 PDF

21

Markdown,可能是最流行的轻量级文本标记语言了。当大家都是 Git Noob 的时候,应该都接触过一个神奇的文件:readme.md。这也可能是大多数人与 markdown 的初次相会。同样地,这里不介绍相关特性,这里只是提供一种可能。

虽然 VSCode 内置了对 Markdown 的支持,直接点击文本右上角的「打开侧边预览」就可以查看 Markdown 渲染的模样。但这里还是建议诸位尝试一下一下 「Markdown Preview Enhanced」。推荐的理由在于,该插件能支持 TOC、脚注等扩展语法,而且渲染效果更好,行间距等处理得更好。

22

AsciiDoc 作为 LaTeX 及 Markdown 之间的一种文本标记语言,不似 LaTeX 过于繁琐,也不像 Markdown 一样过于简单。很多人可能只是想找一种能在 Git Readme 中插入目录并自动标注序号的方法,却意外地爱上了这个语言。同样地,这里不介绍相关特性,这里只是提供一种可能。

作为 XFtp 默认编辑器

23

VSCode 能替换成 XFtp 的默认编辑器,使得能基于 VSCode 强大的特性去编辑云端上的单个文件。文件一经保存即自动同步到云端上。设置方法很简单,工具 → 选项 → 高级 中,你很快就能找到相关选项。

直接开发云端项目

24

最后谈一下 VSCode 于 2019-05-02 发布的最新特性,Remote Development。通过 Remote Development 插件连接上云端,然后打开云端上的文件夹作为 workspace。作为结果,你无需将云端上的各种头文件和源码拷贝到本地上,就能使用包括 IntelliSense (completions)、code navigation 及 debugging 在内的各种功能。最后,我们还能使用编辑器内置的终端操纵云端,去做一些 build、release 这样的事情。笔者专门为此写了一篇图文并茂的教程,帮助你在最短时间内上手该插件。(传送门:「VS Code」如何在 Visual Studio Code 中通过跳板机连接远程服务器:Remote-SSH 篇

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

「VS Code」Visual Studio Code 菜鸟教程:从入门到精通 的相关文章

随机推荐

  • jenkins教程菜鸟_菜鸟 jenkins自动化测试构建实战

    之前写了一个karate框架的接口自动化项目 一直想通过jenkins定时跑起来 这样就方便实时监控接口运行动态了 于是乎我决定在本地下载docker搭建个jenkins容器来构建该项目 对于docker和jenkins我完全是小白一枚 用
  • windows python kafka 初级使用

    今天花了点时间在这个kafka上 因为我们工作中也用到了kafka 我这边对于kafka的理解是能用或者知道基本原理就行 实现在自己的windows环境搭建一次kafka 然后使用python进行数据的生产和消费 如果之后工作中对于kafk
  • WGS84坐标与Web墨卡托坐标互转

    在WebGIS的开发中经常用到的地图投影为Web墨卡托和WGS84 故歌地图 bingmaps 百度地图 mapabc mapbar 以及ArcGIS online上的大部分地图为Web墨卡托地图 ArcGIS online上最开始发布的地
  • vue eslint 报错:Component name “xxxxx“ should always be multi-word.eslintvue/multi-word-component-name

    报错代码 vue cli 全新创建项目 并建立组件时提示报错 VSCode 会标红提示 如图 npm run serve yarn serve也会报错 Ctrl Shift M 问题面板出现 原因 新手在组件命名的时候不够规范 根据官方风格
  • 憨批的语义分割6——制作语义分割数据标签

    憨批的语义分割6 制作语义分割数据集 学习前言 制作工具Labelme Labelme的使用 标签文件内容 学习前言 有些小伙伴问怎么制作数据集 其实我也没有去制作过 所以也要学学啦 制作工具Labelme 这里要用到Labelme工具 在
  • 2023华为笔试机考题库 Java【无向图染色】

    题目 你有一个无向图 需要给它上色 只有两种颜色供你选择 红色和黑色 但有一个条件 两个相邻的节点 即直接相连的节点 不能同时被染成红色 现在的问题是 有多少种不同的上色方案满足这个条件 输入 第一行包含两个整数M和N 其中M表示图中的节点
  • java和android程序员使用web3j进行区块链以太坊开发详解

    如何使用web3j为Java应用或Android App增加以太坊区块链支持 教程内容即涉及以太坊中的核心概念 例如账户管理包括账户的创建 钱包创建 交易转账 交易与状态 智能合约开发与交互 过滤器和事件等 同时也详细说明如何使用web3j
  • 密码提取神器 mimikatz 现已支持Windows 10 RS2

    本文讲的是 密码提取神器 mimikatz 现已支持Windows 10 RS2 昨天稍早 安全研究者 gentilkiwi 在推特上宣布 知名密码提取工具mimikatz推出v2 1 1新版 正式支持Windows 10 RS2 1707
  • 卷首语:我决定从零开始,用C++手写自己的键值数据库

    2023年5月1日 周一下午 我为什么要自己写一个 今天中午 我在CSDN上提出了一个关于如何学习C 的观点 通过用C 造东西来学习C 于是为了实践这个观点 我决定用C 手写一个简单的属于自己的键值数据库 我会把这个键值库写到什么程度 只要
  • 双色球笔记2--保存所有双色球号码到MySQL

    双色球笔记2 保存所有双色球号码到MySQL 1 功能 本代码主要将双色球所有数据保存到mysql数据库 双色球总种类为17721088 笔者8G I7笔记本大约插入了10天 下面代码中包含两中方法 Insert SSQ 和Insert S
  • springcloud集成apollo

    apollo 配置中心 官网 Apollo 官网有设计 部署说明 系统架构图 github开源官网https github com apolloconfig apollo releases releases上下载后发现有这4个文件 apol
  • Docker学习笔记(二):Docker镜像原理、Docker数据卷(挂载)作用和使用

    Docker镜像详解 1 镜像是什么 镜像是一种轻量级 可执行的独立软件包 用来打包软件运行环境和基于运行环境开发的软件 它包含运行某个软件所需的所有内容 包括代码 运行时 库 环境变量和配置文件 所有应用打包成docker镜像 就可以直接
  • 少儿创意学编程(Scratch基础篇):第4课——聊天机器人

    少儿创意学编程 Scratch基础篇 参考了英国公益组织发起的 code club 代码俱乐部 少儿免费学编程活动 愿为中国的少儿创意编程教育尽微薄之力 对国内的家长 信息教师和相关教育机构有所帮助 共同促进软件素质教育的发展 本课程以Sc
  • Qt4.8.2 QPushButton按钮贴图以及实现按钮的几种常用状态

    一 继承自QPushButton 不改变图片本身 而是通过改变按钮背景的透明度 myPushButton h cpp view plain copy ifndef MYPUSHBUTTON H define MYPUSHBUTTON H i
  • 支持向量机类实现

    import os import jieba import numpy as np from sklearn model selection import train test split cross val score from skle
  • 5分钟带你了解写博客的重要性——博客的大门为你敞开

    文章目录 前言 为什么要写博客 写博客有什么用 1 检验自己对知识是否真的理解 2 积累知识并让自己变成合规的 卷王 3 讨论反思 收获新认知 4 提升思维逻辑力和文字组织力
  • Docker运行MySQL容器

    目录 一 宿主机与容器之间的文件拷贝 1 利用MySQL镜像安装MySQL服务 2 容器中怎么上传项目 文件 3 从容器中拷贝文件到宿主机 4 从宿主机拷贝文件到容器 二 数据卷 三 数据卷容器 四 Dockerfile 本次目标 数据卷
  • TCP发送数据流程详解

    B S通信简述 整个计算机网络的实现体现为协议的实现 TCP IP协议是Internet的核心协议 HTTP协议是比TCP更高层次的应用层协议 HTTP HyperText Transfer Protocol 超文本传输协议 是互联网上应用
  • Eclipse 版本和JDK对应关系

    1 JDK最新版本下载地址 http www oracle com technetwork java javase downloads index html 2 JDK历史版本下载地址 http www oracle com technet
  • 「VS Code」Visual Studio Code 菜鸟教程:从入门到精通

    VS Code Visual Studio Code 教程 从入门到精通 日志 2020 04 26 介绍如何配置 LaTeX 环境 2019 09 06 更新了选择默认终端的方法 在胶片中补全列选方式 2019 05 26 补全了全文的剩