准备

区分编辑器、编译器、IDE： 作者：C语言教学

• 编辑器就是处理文本（源码）的程序，写代码写的就是文本，编辑器可能提供智能提示、代码高亮等辅助功能，但不负责源码到二进制文件的操作；

• 编译器就是负责将源码文本翻译成计算机能够理解和执行的二进制文件的程序；

• 集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，包括了代码编辑器、编译器、调试器和图形用户界面工具。集成了代码编写、分析、编译、调试等一整套工具链。

什么是搭建环境：

• vscode定位代码编辑器，不是IDE，不包含编译功能，因此需要我们自己安装编译器、调试器等编译器套件，并使两者有效的配合起来，以实现快捷操作。把这一整套工具链整合到一起的过程就是我们所说的搭建环境。
• ok,到这里，我们就清楚要做什么了：获取编辑器 -> 获取编译套装(编译器、调试器、头文件库等) -> 做好两者之间的沟通工作(配置文件)

两个东西：编辑器和编译套装

• 编辑器： VSCode
• 编译套装：win10：mingw-w64安装教程

下载&&安装

下载

• https://code.visualstudio.com/
  

• Stable：每个月会发布一个新的稳定版本
• Insiders：
  • 每天都会更新一次
  • 可以和Stable共存，而且用户配置、颜色主体等都是相互独立的

VS Code 安装完之后就会自动更新，你并不需要前往官网重新下载

安装

（1） ubuntu

• 官网上下载.deb，然后执行如下命令：

sudo apt install ./xxx.deb

（2） windows

直接下一步

中文显示

打开vscode，发现全是英文，我们先装个汉化插件：

• 在插件视图中，搜索并安装Chinese (Simplified) Language Pack插件
• Ctrl + Shift + P打开命令面板，输入并执行Configure Display Language命令
• 选择zh-cn选项
• 重启

完全卸载

如果大家之前有安装过VSCode，然后只是简单卸载的话，再次安装之后，是还出现之前的配置信息，包括打开的文件夹、安装过的扩展等，这是因为之前并没有完全将VSCode卸载干净。如果想干净卸载掉VSCode再重新安装的话，就需要在卸载之后再删除掉两个目录的内容。分别是：

• C:\Users$用户名.vscode
• C:\Users$用户名\AppData\Roaming\Code

安装C/C++必备的插件

• C/C++
  
• 安装C/C++ Project Generator

vscode配置文件

示例一

• 在vscode中 ctrl+shift+p 打开菜单，在其中输入 create c
  

• 这时会弹出一个窗口，让你选中将源码放到哪个工作空间上，这个我选择C_Mutile，此时它会显式如下：
  

• 其.vscode显示如下：

这两个东西是啥呢？

先了解几个概念：

• 命令行：命令行 或 命令行界面，是一种基于文本的用来查看、处理、和操作计算机上的文件和程序的工具。
• 终端/控制台：可以输入命令行并显示程序运行过程中的信息以及程序运行结果的窗口。 不必要严格区分这两者的差别。
• shell：终端自身并不执行用户输入的命令，它只是负责把输入的内容传送到主机系统，并把主机系统返回的结果呈现给用户。负责解释执行用户输入的命令并返回结果的，正是Shell，它是沟通用户和系统内核的中间桥梁。

我们写完代码之后，可以通过命令行去编译运行：

• 打开一个cmd终端
• 进入文件夹位置，然后gcc -o hello hello.c

但是每次都用命令行太麻烦了，怎么样才能更快捷呢？可以通过.vscode文件夹下的json配置文件来配置实现。这些json文件怎么写是由vscode开发团队规定的（感兴趣可以去看官方的文档），

• task是任务的意思，我们的编译和运行就是我们想要vscode执行的任务，为此我们要在tasks.json里写两个task：Build和Run(这里为什么不是Compile呢？是因为从源码到可执行的过程中不仅是编译(Compile),还有预编译、链接等过程，用构建(Build)来表述更合适)。除了编译和运行，我们还需要进行调试(Debug)，这个就不是通过task来实现的了，而是通过launch.json文件来实现。

运行

• 方法一：按F5调试运行
• 方法二，图形界面

遇到的错误

g++ : 无法将“g++”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

解决：

• 将MinGW配置到环境变量中，注意配置完之后要重启vscode

检查MinGW是否配置好：

• gcc --version
• g++ --version
• gdb --version

VSCode与终端

终端启动VSCode

打开一个终端，然后运行code命令即可启动终端。

运行code --help可以打印出VS Code命令行支持的所有参数

打开一个文件夹

• 在一个新窗口中打开这个文件或文件夹： code 文件夹/文件名
• 在一个已经打开的窗口来打开文件： code -r 文件夹/文件名
  

比较两个文件的内容

• 比较两个文件的内容：
  • code -d 文件a 文件b。
  • 比如：code -r -d a.txt b.txt

其他

VS Code 命令行除了支持打开磁盘上的文件以外，也接受来自管道中的数据。这样你就可以将原本在命令行中展示的内容，实时地展示在 VS Code 里，然后在编辑器中搜索和修改。比如，你可以把当前目录下所有的文件名都展示在编辑器里，此时只需使用ls | code -命令。

关闭当前项目

• file → close Folder

从资源管理器里调出系统终端

打开和创建一个集成终端：

• 打开终端的方法：
  • 菜单栏：View–>Terminal
  • 快捷键：Ctrl + `，按一下打开，再按一下关闭
  • 命令面板：搜索并执行“切换集成终端”（Toggle Integrated Terminal）
• 具体效果：
  • 如果还没有任何集成终端存在，那么它将创建一个新的，然后显示出来；
  • 如果已经有几个集成终端了，那么就把终端面板调出来；
  • 如果我们的光标就在集成终端里，那么这个命令会将终端面板隐藏。

若我们希望创建出一个新的终端来，而不是切换终端：

• 快捷键：Ctrl + Shift + `
• 命令面板：搜索并执行 “新建集成终端”（Create New Intergrated Terminal）

如果我们的电脑屏幕足够大，或者我们希望在同一界面上看到多个运行的脚本，我们也可以把一个终端面板进行切分。我们只需按下 Cmd + \ 或者运行 “拆分终端”（Split Terminal），就能够将当前的终端一分为二；如果再次按下这个快捷键，就能够将当前的面板平均分为三份……

界面概览

最上面一行是状态栏：

侧边栏：在默认设置下 VS Code 的左侧侧边栏有五个组件，它们分别是：

• 资源管理器，主要用于浏览和管理文件和文件夹。
• 跨文件搜索，用于在当前文件夹内进行跨文件的搜索。
• 源代码管理，用于对当前文件夹下的代码进行版本管理，默认 VS Code 支持的版本管理软件是 Git。
• 启动和调试，用于对当前文件夹下的项目进行运行和调试。
• 插件管理，用于下载和管理 VS Code 里的插件。
  

在侧边栏的最下角还有一个齿轮形状的按钮

• 它提供了一些 VS Code 系统管理常用的快捷键，点击打开后，你可以看到命令面板、设置、键盘快捷方式、管理扩展等等一系列快速入口。

界面的最下面一行则是状态栏：

• 这个组件的作用就是将当前文件夹、编辑器状态、代码版本、代码错误等的简略讯息呈现给你。除此之外，很多插件也会选择将信息呈现在状态栏上。
  

面板（Panel）

• 不过“界面概览”并没有覆盖所有的组件，其中一个非常重要的部分就是面板（Panel），你可以在命令面板中执行“切换面板”命令来打开它。
• 打开后，你会看到面板的四个组件：问题面板、输出面板、调试控制台和终端。
  • 问题面板（Problems Panel）的作用是展示当前文件夹下代码里的所有问题和警告，比如你的代码有语法错误、格式问题、拼写错误等
  • 输出面板（Output Panel）的作用就是将核心命令和插件的运行状态和结果输出来，比如你使用 Git 来管理你的代码版本，你的每个 UI 上的版本操作，你都能在输出面板里看到这个操作对应的 Git 命令行以及它的运行结果。这样即使意外发生了， VS Code 无法完成指定的 Git 命令，你依然可以通过阅读输出面板找到问题所在，然后自行修复。
  • 调试控制台主要是在调试代码时使用
  • 终端是开发工作中不可或缺的一个工具，VS Code 则更进一步，把终端直接集成了进来。集成终端的存在，使得 VS Code 保持轻量级成为了可能性。

命令面板

• 设计目的：是 VS Code 快捷键的主要交互界面，这样不用鼠标，使得所有的操作都可以通过键盘进行
• 如何打开：Ctrl + Shift + P

打开之后，命令面板的输入框里已经有一个字符：

• 如果第一个字符是>（默认） ，当你继续输入字符时，VS Code 就会在所有命令里进行搜索。
  • VS Code 的绝大多数命令都可以在命令面板里搜到
  • 所以熟练使用命令面板，你就可以摆脱鼠标，完全通过键盘操作来完成全部编码工作。
• 如果第一个字符是@，那么就扫描当前文件，提供所有的符号。）
• 如果第一个字符是？，就可以看到十几条选项，分别代表着你能在命令面板里使用的不同的功能
  • >（大于号） ，用于显示所有的命令。
  • @ ，用于显示和跳转文件中的“符号”（Symbols），在@符号后添加冒号：则可以把符号们按类别归类。
  • # 号，用于显示和跳转工作区中的“符号”（Symbols）
  • ：（冒号）， 用于跳转到当前文件中的某一行。
• 如果输入框里没有任何的字符时，命令面板提供的功能是访问最近使用的文件
  • edt 是 edit（编辑）的缩写，输入 edt 和一个空格，命令面板就会显示所有已经打开的文件；而edt active则只会显示当前活动组中的文件。
  • ext 是 extension（插件）的缩写，输入 ext 和一个空格，就可以进行插件的管理；ext install 则可以在命令面板中搜索和安装插件。
  • task和debug 分别对应于任务和调试功能。
  • term 是 terminal（终端）的缩写，你可以用这个命令来创建和管理终端实例。
  • view 则是用于打开 VS Code 的各个 UI 组件。

下面是一些常用命令的快捷键：

• Ctrl + P ：文件跳转
• Ctrl + Shift + Tab：在所有打开的文件中跳转
• Ctrl + Shift + Tab：跳转到文件中的符号
• Ctrl + G：跳转到文件中的某一行

如下图，在输入框中输入文号，就能列出所有可用的相关命令

键盘操作

自定义快捷键

• 打开键盘快捷方式：Ctrl+K ，Ctrl+S
• 搜索"select to bracket"（选择括号内所有内容），双击
• 按下”Cmd + Shift + ]”，回车
  

删除快捷键

• 在搜索框内搜索你使用的快捷键
• 通过右键选择删除该快捷键的绑定

针对单词的光标移动

• 一个字符一个字符的移动：方向键
• 一个单词一个单词的移动：Option（Windows 上是 Ctrl 键）和方向键

对于代码块的光标移动

• if、for 语句会使用花括号将代码块包裹起来，可以在{}始末快速跳转： Cmd + Shift + \（Windows 上是 Ctrl + Shift + \）

选中文本

• 把光标到单词开头之间的所有字符全部选中：Option（Windows 上是 Ctrl 键） + 左方向键+ Shift 键
• 将光标到第一行，或者最后一行之间的字符选中：Cmd、Shift 和上下方向键

操作一行代码

• 删除一行代码：“ Cmd + Shift + K ” (Windows 上是 “Ctrl + Shift + K”)
• 剪切一行代码：“ Cmd + x ” (Windows 上是 “Ctrl + x”)
• 在当前行的下面开始新一行：“Cmd + Enter” （Windows 上是 “Ctrl + Enter”）
• 在当前行的上面开始新一行：“Cmd + Shift + Enter” （Windows 上是 “Ctrl + Shift + Enter”）

撤销光标移动

• 撤销光标移动：“Cmd + U”（Windows 上是 “Ctrl + U”）

调整字符大小写

• 在命名面板里搜索：transf， 来变换字符的大小写。

代码格式化

前提：VS Code已经安装了相关插件。

• 对整个文档进行缩进： “Option + Shift + F” （Windows 上是 Alt + Shift + F）
• 对选中代码进行缩进：“Cmd + K Cmd + F” （Windows 上是 Ctrl + K Ctrl + F）

将代码注释掉：

• Cmd + / （Windows 上时 Ctrl + /）

代码缩进

• 打开命令面板（快捷键“Cmd + Shift + P”），搜索 “reind”，然后使用 “重新缩进行” 将整个文档的缩进进行调整，但更多时候，你只需要运行 “重新缩进选中行” 来调整部分选中代码行的缩进。

行排序

• 无论是你在写代码，还是写 Markdown，你都可以把代码行按照字母序进行重新排序。不过这个命令比较小众，VS Code 并没有给这个命令指定快捷键，你可以调出命令面板，然后搜索 “按升序排列行” 或者 “按降序排列行” 命令执行。

合并代码行

• 有的时候你可能会为了避免代码看起来过于冗余，就会把比较短小的几行代码合并到一行里面去。这时，你只需要按下 “ Ctrl + j ” （Windows 上未绑定快捷键，可以打开命令面板，搜索 ”合并行“）就可以了，而不需要不断地调整光标、删除换行符。

修改函数或者变量的名字

• 只需把光标放到函数或者变量名上，然后按下 F2，这样这个函数或者变量出现的地方就都会被修改。

把一段长代码抽取出来转成一个单独的函数

• 只需选中那段代码，点击黄色的灯泡图标，然后选择对应的重构操作即可
• 要注意的是，并不是每个语言服务都支持重构的操作。如果你选中一段代码后，但没有看到那个黄色的灯泡图标，那么也就是说你使用的这门语言可能还没有支持快速重构。

代码跳转

• 跳转到了 函数的定义处：
  • 将鼠标移动到foo 上
  • 然后按下 Cmd 键，这时候 foo下面出现了一个下划线。
  • 然后当我们按下鼠标左键，就跳转到了 函数的定义处。
• 跳转到函数定义的位置：F12
• 跳转到函数的实现的位置：“Cmd + F12” （Windows 上是 Ctrl + F12）
• 找到函数/类在哪里被引用
  • 将光标移动到函数或者类上面
  • 按下Shift+ F12

文件跳转

• 按下 “Cmd + P” （Windows 上是 Ctrl + P）时，跳出一个搜索框。
• 搜索你想要的文件
• 打开
  • 直接打开：“Enter” 键
  • 一个新的编辑器窗口中打开： “Cmd + Enter ” （Windows 上是 Ctrl + Enter）组合键

行跳转

将光标快速地移动到某一行

• 按下 “Ctrl + g”，调出行输入框
• 这个输入框的第一个字符就是 “ : ”，在这之后输入数字

将光标快速移动的某个文件的某一行：

• 按下 “Cmd + P”
• 在搜索框输入： 文件名:指定行，比如 a.txt:3

在一个文件里的符号之间跳转

• 按下 “Cmd + Shift + O” （Windows 上是 Ctrl + Shift + O），就能够看到当前文件里的所有符号。
• 使用方向键，或者搜索，找到你想要的符号后，按下回车，就能够立刻跳转到那个符号的位置。

• 输入框里有一个 “@”符号，这时，如果你输入 “:”，就可以将当前文件的所有符号，进行分类，这样搜索符号也就更加方便。

在多个文件里的符号之间跳转

• “Cmd + T” （Windows 上是 Ctrl + T），搜索这些文件里的符号

面包屑

• 怎么打开面包屑功能：“打开设置”（Open Settings），搜索 “breadcrumbs.enabled”，找到后将它打开。

• 怎么用？从左到右，我们能够看到一层一层文件夹的名字，然后是当前文件名，最后则是光标所在的函数的名字。我们可以通过点击这个工具栏上的文字，然后进行文件夹、文件或者是函数的跳转。

搜索

”Cmd +F”搜索，按下 Enter 键在搜索结果当中快速跳转

• 把光标放在编辑器当中
• 按下 “Cmd + F” （Windows 上是 Ctrl + F），就能够快速地调出搜索窗口
• 调出搜索窗口的时候，编辑器就会把当前光标所在位置的单词自动填充到搜索框中。与此同时，当前文件里和搜索关键词相同的单词都会被高亮出来。
• 我们可以在在搜索框中搜索，然后按下Enter 键在搜索结果当中快速跳转
  

代码片段

• 打开命令面板，搜索“配置用户代码片段”（Configure User Snippets）并且执行
• 这时候我们会看到一个列表，让我们选择语言。我们选中JavaScript
• 选择完语言后，我们就能看到一个 JSON 文件被打开了，这个文件里的内容，现在都是被注释掉的。我们可以选中第七行到第十四行，按下 Cmd+ / 取消注释。
• 这个就是代码片段了。
  • 它是一个 JSON 文件，它的根对象下面的所有子节点都是一个单独的代码片段，并能够被我们调用和插入编辑器。
  • 这个代码片段对象的键（key）是这个代码片段的名字，我们在书写时只要保证这个名字跟当前文件里的其他代码片段不冲突就可以了。
  • 下面例子中：
    • 这个代码片段的名字叫做 Print to console
    • 这个代码片段对象的值，也就是花括号里的代码，必须要包含 “prefix” 前缀和 “body” 内容这两个属性。
    • 同时，这个值还可以包含 “description” 描述这个属性，但这个属性不是必须的。
    • “prefix” 的作用是，当我们在编辑器里打出跟 “prefix” 一样的字符时，我们就能在建议列表里看到这个代码片段的选项，然后我们按下 Tab 键，就能够将这个代码片段的 “body” 里面的内容插入到编辑器里。如果这个代码片段有 “description” 这个属性的话，那么我们还能够在建议列表的快速查看窗口里看到这段 “description”。

{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}

• 此时，我们可以打开一个 JavaScript 文件（还以之前的一段代码为例），然后输入 log，你就能够在建议列表里看到 Print to console 这个建议。然后再按下回车或者 Tab 键，就能够将这个代码片段插入编辑器了。
  

主题

设置颜色主题

（1）打开编辑器

• windows/linux：file—>perferences----> color theme
• macOS：code —>perferences----> color theme

（2）使用方向键上下移动，选择不同的主题预览

（3）选择一个颜色主题，按下enter键，马上生效

设置文件图标主题

（1）打开编辑器

• windows/linux：file—>perferences----> File Icon theme
• macOS：code —>perferences---->File Icon theme

（2）使用方向键上下移动，选择不同的主题预览

（3）选择一个颜色主题，按下enter键，马上生效

• None：禁用文件图标
  

快捷键

VSCode 如何管理文件和文件夹

首先需要说明的是，VS Code 的各个功能，都是基于当前打开的文件或者文件夹的。该怎么去理解这个概念呢？

• 如果你使用过 IDE 的话， 你应该记得在第一次打开 IDE 的时候，它们往往需要你创建一个工程，这个工程会生成一个特殊的工程文件。这个工程文件记载了这个项目有哪些相关的文件、项目的配置、构建脚本等等。这个文件记录着 IDE 管理工程的元信息，开发团队也能够通过共享这个工程文件保证成员工作环境的一致性。但是工程文件对用户体验就不太友好了，比如说项目文件可能对 IDE 的版本有所要求，项目文件损坏了 IDE 读取不了但是我们也不知道如何修复，等等。
• VS Code 则选择了一种相对轻量，而且大家都易于理解的方式，那就是所有的操作都基于文件和文件夹。当你打开一个文件夹，VS Code 的核心功能就会对这个文件夹进行分析，并提供对应的功能。比如，在打开的文件夹下检测到有 .git 文件，就加载 Git 插件来提供版本管理的功能；或者发现文件夹下有 tsconfig.json ，就会激活 TypeScript 插件提供语言服务。

VSCode 资源管理器

• 当你打开一个文件夹之后，你就能在工作台的最左侧看到资源管理器。资源管理器将当前文件夹下的文件和子文件夹，以树形结构的形式呈现出来。每一个文件的前面还会有一个小图标，用于反映文件的类型。

• 在资源管理器的最上方，你可以看到一个列表，叫做 “打开的编辑器”。这个很好理解，就是指这里面列出的都是当前已经被打开的文件。

参考

• 挑把趁手的兵器——VSCode配置C/C++学习环境（小白向）