Trluper
0%

VScode教程

发表于 更新于 分类于
本文字数： 13k 阅读时长 ≈ 12 分钟

1. 为什么使用VScode

VScode是微软推出一个轻量化编辑器，只需要下载相应的编译器和包即可支持C/C++、java、python的编写。相对于VS来说，VScode更加的轻便、体积小，支持许多插件。

2. VScode的界面使用

2.1 用户设置

文件File--首选项preferences--设置settings，打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修改默认配置 

1
2
3
4
5
6
7
8
9
（1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;

（2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。

（3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;

（4）editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；

（5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；

3. 常用快捷键

高效的使用vscode,记住一些常用的快捷键是必不可少的，这里罗列了一些常用的快捷键。

3.1 主命令

命令 作用
Ctrl+Shift+P 俗称万能键，可以输入任何命令
Ctrl+P 根据名称查找文件

3.2 编辑器与窗口管理

命令 作用
Ctrl+N 新建文件
Ctrl+Shift+N 打开一个新的VSCode编辑器
Ctrl+O 打开文件
Ctrl+Shift+O 打开文件夹
Ctrl+W 关闭当前文件
Ctrl+Shift+W 或 Alt+F4 关闭当前VSCode编辑器
Ctrl+\ 新建窗口显示代码（相当于复制当前代码到一个新的窗口；同一引用，修改一个文件，其他相同文件会一起改变）
Ctrl+Alt+→ 移动当前文件到右窗口，若没有右窗口，则创建一个新窗口
Ctrl+Alt+← 移动当前文件到左窗口
Ctrl+Tab 切换文件窗口
Ctrl+B 显示/隐藏侧边栏
Ctrl +/- 放大/缩小编辑器窗口
Ctrl+Shift+E 文件资源管理器（Explorer）
Ctrl+Shift+G git管理窗口（Source Control）
Ctrl+Shift+X 扩展（插件）管理窗口（Extentions）

3.3 代码文本快捷键

命令 作用
Ctrl+F 查找
Ctrl+H 查找替换
Ctrl+Shift+F 全局查找
Ctrl+Shift+H 全局查找替换
Ctrl+D 选中下一个匹配项
Ctrl+Shift+L 选中所有匹配项（秀儿）
Ctrl+[ 向左缩进
Ctrl+] 向右缩进
Alt+Up 向上移动当前行
Alt+Down 向下移动当前行
Shift+Alt+Up 向上复制当前行
Shift+Alt+Down 向下复制当前行
Ctrl+Enter 在当前行下方插入空行（光标位置可以不在行尾）
Ctrl+Shift+Enter 在当前行上方插入空行（光标位置可以不在行尾）
Alt+Z 切换内容是否自动换行（底部显示/隐藏滚动条

如果在编程中忘记了快捷键，也可以使用Ctrl+K/Ctrl+S来查看VSCode中全部快捷键。

4. 插件安装

在输入框中输入想要安装的插件名称，点击安装即可，推荐安装的插件有： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1、Bracket Pair Colorizer：给嵌套的各种括号加上不同的颜色。
2、Path Intellisense：智能路径提示，可以在你输入文件路径时智能提示。
3、Markdown Preview：实时预览 markdown。
4、C/C++ for Visual Studio Code：
5、C-family Documentation Comments和Better Comments
6、CMake Tools：用于支持CMake进行编译系统的构建
7、CMake:C-family Documentation Comments用于自动生成C、C++语言风格的注释，笔者主要用在头文件的函数生命的时候，对函数接口添加描述。Better Comments则提供注释高亮功能
8、Git Graph:Git Graph主要是用来显示git log，UI比较好看，安装后使用命令Git Graph: View Git Graph (git log)查看，可以设置一个快捷键方便使用。
9、Markdown Preview Enhanced：Markdown Preview Enhanced插件的预览功能比较强大，可在预览窗口选择主题，支持[TOC]标题列表，而且导出功能很好用
10、Markmap：Markmap是一个基于开源项目markmap开发的vscode插件，画出来的思维导图非常非常的漂亮。使用的时候很简单，只需要简单的Markdown语法；在安装好之后，在.md文档编辑窗口的右上角就会多一个预览的图标Open as markmap，当然也可手动打开命令面板，输入Open as markmap
11、Partial Diff：Partial Diff提供部分文本内容的比较，笔者经常用在重构函数的时候，用来比较两个比较类似的函数的实现。使用的时候先复制要比较的内容，然后选中要比较的另外的一部分内容，右键选择Compare Text with Clipboard，就会打开一个比较窗口。
12、One Dark Pro：主题
13、Material Icon Theme：图标
14、C/C++ Project Generator：C/C++的项目生成

5. 按照remote-ssh

remote-ssh支持你远程连接Linux、Mac环境，首先：

  • 先安装remote-ssh插件，并创建一个txt文件,内容如下，Hostname为你远端ip地址，user为你的用户名
  • ctrl+shift+p打开万能键，输入remote-ssh:setting，设置你刚刚的txt路径：
  • 使用，在Vscode下方点击绿色><，选择connect to Host即可，后续会要求验证你远端主机/虚拟机密码

6. tasks.json文件

tasks.json的作用是编译,创建一个tasks.json文件告诉VS代码如何构建(编译)程序。

tasks.json的主要作用就是执行类似 gcc -g main.c -o main的命令，需要注意的一点是，tasks.json的"label"参数值和launch.json的"preLaunchTask"参数值需要保持一致

当第一次运行程序时且安装了C++ 扩展后，会创建tasks.json，可以在项目.vscode文件夹中找到它。tasks.json存储构建配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//task.json
{
    "tasks": [
        {
            "type": "cppbuild",	//任务类型,Vscode将预定义变量转义解析后直接传给command;shell->先打开shell再输入命令,因此args会经过shell再次解析
            "label": "C/C++: g++ build active file",	//任务名称
            "command": "/usr/bin/g++",	//编译器路径
            "args": [
                "-fdiagnostics-color=always",
                "-g",
                "${file}",
                "/home/project/testProject/test_vscode/src/leetcode.cpp",
                "-I",
                "/home/project/testProject/test_vscode/include",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}"
            ],
            "options": {
                "cwd": "${fileDirname}"
            },
            "problemMatcher": [
                "$gcc"
            ],
            "group": {//包含很多task,归为group
                "kind": "build",	//表名该组任务类型是构建
                "isDefault": true	//表明此任务为此组任务中的默认任务
            },
            "detail": "Task generated by Debugger."
        }
    ],
    "version": "2.0.0"
}
  • command:设置指定要运行的程序,此时是g++
  • args：指定将传递给 g++ 的命令行参数。这些参数必须按照编译器期望的顺序指定，相当于g++ g main.cpp -o main。你可能注意到了，内部的一些参数类似于正则表达式的形式，以下具体说明：Visual Studio Code 支持调试和任务配置文件中的变量替换以及一些选择设置，使用${variableName}
    • 预定义变量如下(假设你打开了文件·/home/your-username/your-project/folder/file.ext；·/home/your-username/your-project·作为根工作区打开的目录。)
      • {userHome} - 用户主文件夹的路径/home/your-username
      • ${workspaceFolder} - 在 VS Code 中打开的文件夹的路径/home/your-username/your-project
      • ${workspaceFolderBasename} - 在 VS Code 中打开的文件夹的名称，没有任何斜杠 (/)your-project
      • ${file} - 当前打开的文件/home/your-username/your-project/folder/file.ext
      • ${fileWorkspaceFolder} - 当前打开文件的工作区文件夹/home/your-username/your-project
      • ${relativeFile} - 当前打开的文件相对于workspaceFolderfolder/file.ext
      • ${relativeFileDirname} - 当前打开的文件相对于的目录名workspaceFolder——folder
      • ${fileBasename} - 当前打开文件的基本名称file.ext
      • ${fileBasenameNoExtension} - 当前打开的文件的基本名称，没有文件扩展名file
      • ${fileExtname} - 当前打开文件的扩展名.ext
      • ${fileDirname} - 当前打开文件的文件夹路径/home/your-username/your-project/folder
      • ${fileDirnameBasename} - 当前打开文件的文件夹名称
      • ${cwd} - 启动 VS Code 时任务运行器的当前工作目录
      • ${lineNumber} - 活动文件中当前选定的行号
      • ${selectedText} - 活动文件中的当前选定文本
      • ${execPath} - 正在运行的 VS 代码可执行文件的路径
      • ${defaultBuildTask} - 默认构建任务的名称
      • ${pathSeparator} - 操作系统用来分隔文件路径中的组件的字符
  • label:将在任务列表中看到的；你可以随意命名。
  • detail:将在任务列表中作为任务描述的值。强烈建议重命名此值以将其与类似任务区分开来。
  • group:内部含有kind=build，为true时告诉vscode这个是构建文件;同时当isDefault: true时当前tasks.json为默认构建文件

当你按下运行时，VScode将从中读取tasks.json以了解如何构建和运行程序。您可以在 中定义多个构建任务tasks.json，vscode将会使用默认的tasks.json进行构建编译

7. launch.json文件

在c++编写程序中，最常用到的时调试这个功能，也就是我们所说的Debug。VScode支持调式，我们只需要按debug图标即可：

但有时候我们需要自定义的调试，这时候就用到launch.json了。例如指定要在运行时传递给程序的参数。您可以在文件中定义自定义调试配置launch.json。要创建launch.json，请从播放按钮下拉菜单中选择添加调试配置。

然后您会看到各种预定义调试配置的下拉列表。选择C/C++: g++.exe build and debug active file。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "C/C++: g++.exe build and debug active file",	//launch的名称
      "type": "cppdbg",
      "request": "launch",
      "program": "${fileDirname}\\${fileBasenameNoExtension}.exe",	//调试的可执行文件路径
      "args": [],	//传递给main函数的参数
      "stopAtEntry": false,	//是否在开始时就设置端点
      "cwd": "${fileDirname}",	//调试程序时的工作目录
      "environment": [],		//环境变量
      "externalConsole": false,	//true:cmd窗口; false:Vscode的内置终端输出
      "MIMode": "gdb",			//指定连接的调试器,
      "miDebuggerPath": "C:\\msys64\\mingw64\\bin\\gdb.exe",	//gdb所在路径
      "setupCommands": [
        {
          "description": "Enable pretty-printing for gdb",
          "text": "-enable-pretty-printing",
          "ignoreFailures": true
        }
      ],
      "preLaunchTask": "C/C++: g++.exe build active file" //调试开始前执行需要执行的任务,调试前要编译构建 名称要和tasks.json的label保持一致
    }
  ]
}

  • program：指定要调试的可执行程序。即在调试中会使用该可执行文件进行调试debug操作，因此你的目录在调试前必须能够找到该可执行文件
  • args：属性是要在运行时传递给程序的参数数组
  • 默认情况下，C++ 扩展不会向您的源代码添加任何断点，并且该stopAtEntry值设置为false.
  • preLaunchTask：在调试前必须调用的task.json生成调试可执行文件，其后面的值就是task.json中的label，如果你不需要使用task.json来执行g++命令，你可以注释掉"preLaunchTask":即可

从现在开始，播放按钮和F5将在启动您的程序进行调试时从您的文件中读取launch.json。

8 c_cpp_properties.json文件

如果你想更多地控制C/C++扩展，你可以创建一个c_cpp_properties.json文件，它允许你更改设置，例如编译器的路径、包含路径、C++ 标准（默认为C++17）等等。

您可以通过运行命令C/C++ 查看 C/ C++ Edit Configuration UI，创建c_cpp_properties.json，并且查看相关参数说明 ( Ctrl+Shift+P )

将打开C/C++ 配置页面。当您在此处进行更改时，VS Code 会自动将它们写入文件夹.vscode中名为c_cpp_properties.json文件。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    "configurations": [
        {
            "name": "Linux",
            "includePath": [
                "${workspaceFolder}/**",
                "/home/project/testProject/test_vscode/include/**"
            ],
            "defines": [],
            "compilerPath": "/usr/bin/g++",
            "cStandard": "c11",
            "cppStandard": "gnu++14",
            "intelliSenseMode": "linux-gcc-x64"
        }
    ],
    "version": 4
}

  • includePath：如果您的程序包含不在您的工作区或标准库路径中的头文件，您只需要添加到包含路径数组设置。注意这一步仅仅是告诉vscode头文件在哪，方便debug，但是gcc/g++进行编译时并不知道。我们知道如果用g++ main.cpp xxx.cpp -I 库路径 -o main是直接可以编译成功的，那么我们只需要将告诉vscode使用我们自己定义的命令就可以了，那么对于自定义命令仍然是要在task.json中设置
  • compilerPath：这个扩展通过使用campilerPath来推断 C++ 标准库头文件的路径。当扩展知道在哪里可以找到这些文件时，它可以提供智能完成和转到定义导航等功能。其顺序是
    • 首先检查 Microsoft Visual C++ 编译器
    • 然后在 Windows Subsystem for Linux (WSL) 上寻找 g++
    • 然后是 Mingw-w64 的 g++。

9 编译参数

10 VScode中main的参数传递

  • VScode中给main函数传递参数是在launch.json中的args中，将要传递的写入数组中即可
1
2
3
4
5
//launch.josn的args键值对
 "args": ["nihao","trluper"],
//main
for(int i=0;i<argc;++i)
        cout<<argv[i]<<endl;

输出 

1
2
nihao
trluper

  • 命令行形式的则直接在可执行文件后面接参数,如main nihao trluper

对于Visual studio当中main函数的参数传递，在项目名称右击，点击属性->配置属性->调试->命令参数 然后填入参数，多个参数的话以空格分开就好

11 问题1

运行C++时出现：

1
ERROR: Unable to start debugging. Unexpected GDB output from command "-exec-run". During startup program exited with code 0xc0000139.

之前配置了VSCode+Anaconda，将conda加入了环境变量，其中有一项是： 

1
D:\pythonDeve\Anaconda\Library\mingw-w64\bin
其中含有一些c++的动态链接库，与mingw的动态链接库冲突 之前配置的时候，使得PowerShell启动时自动加载Anaconda的配置，并且VSCode自动激活了conda环境，然后就引发冲突了

解决方法：

  • 方法一：只需要在 VSCode 的settings.json中加入这一行配置即可： 
    1
    "python.terminal.activateEnvironment": false
  • 方法二：关闭conda环境在终端自动激活 
    1
    conda config --set auto_activate_base false

12 头文件问题：fatal error: No such file or directory

虽然在c_cpp_properties.json的"includepath"的"path"设置了头文件路径，但是这一步仅仅是告诉vscode头文件在哪，方便debug，但是gcc进行编译时并不知道。在命令行中我们知道，用g++ main.cpp xxx.cpp -I 库路径 -o main是可成功运行的，那么我们只需要对VScode运行这样的命令行即可,在tasks.json中设置-I 路径 ：

1
2
3
4
5
6
7
8
9
10
"args": [
                "-fdiagnostics-color=always",
                "-g",
                "${file}",
                "/home/project/testProject/test_vscode/src/leetcode.cpp",
                "-I",
                "/home/project/testProject/test_vscode/include",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}"
            ],

编写CMakeList.txt可以解决，这时候不需要改写tasks.json，只需要设置c_cpp_properties.json的"includepath"的"path"即可

13 CMake Tools

13.1 为什么用CMake

利用CMake tools 进行编译系统的构建，省去了编写tasks.json\launch.json或者Makefile的编写，能够处理以上绝大部分问题。大部分的大型项目都是采用CMake实现。

对于一个庞大的CPP工程，我们可以不必写上面的.vscode文件夹，因此也就不必写那3个json文件。原因在于一个庞大的Cpp工程如果配置tasks.json然后用gcc或g++来编译，太过麻烦，他们更适合单一的文件编译，而通常C++工程通常较为庞大，因此更推荐编写CMakeLists.txt。

make工具，它是一个自动化编译工具，用来批处理编译源文件，但是使用make工具进行编译需要编写一个规则文件，make依据它来批处理编译，这个文件就是Makefile，但是对于一个大工程，编写Makefile也是一件很复杂的事情，所以这时人们设计出cmake工具，它能够生成Makefile文件，随之而来的就是CMakeLists.txt文件，它是cmake所依据的规则，相对来说，CMakeLists.txt文件的编写要简单不少。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 最低CMake版本要求
cmake_minimum_required(VERSION 3.5.1)
 
# 项目名称
project(leetcode)
 
#添加debug信息，使得生成的可执行文件可以调试
set(CMAKE_BUILD_TYPE DEBUG)
#可调试编译选项，这样才能命中断点
add_definitions("-Wall -g")
#使用通配符添加多个源文件
file(GLOB SRC_LIST "src/*.c")
 
#编译选项
add_compile_options(-std=c++11)
 
# 头文件路径
include_directories("include")
 
#链接库
link_libraries(event pthread) #相当于-lpthread -event
 
# 生成可执行的文件
add_executable(main src/main.cpp src/Convert.cpp)

CMakeLists.txt文件具有c_cpp_properties.json、tasks.json两个文件的功能，一般如果C++工程较小，可以编写tasks.json文件，否则更适合编写CMakeLists.txt文件。不过我还是推荐我们每次编写程序的时候编写一下c_cpp_properties.json，因为该文件中includePath参数可以很好指定头文件目录，这样就算没有CMakeLists.txt文件，我们在vscode编写程序的时候它也自动包含了头文件，这样就可以具有代码提示功能。而CMakeLists.txt中的库文件路径并不是太好指定(主要我目前对CMakeLists.txt还不是太了解)。如果我们需要在VS里调试的话，还是需要编写launch.json文件的。

  • 因此在实际的代码开发中最好的搭配组合是CMakeLists.txt和c_cpp_properties.json
  • 需要使用Vscode的调试时（不使用GDB命令行），则你要编写launch.json文件

13.2 CMake流程

  • 创建CMakeLists.txt文件，编写CMakeLists.txt文件，其编写语句可见CMake
  • ctrl+shift+p搜索CMake:Configue，选择对应的编译器，然后点击，之后在你的工程目录会多出build目录
  • 之后cd进入build目录，执行cmake ..和make后得到编译文件

13.3 VScode的调试

要使用VSCode的调试，就必须写lanuch.json文件，这样你才可以按F5启动GDB调试，否则你只能以命令行的形式调试。然后选择这个launch.json进行调试，即你会在调试看到leetcode debug，选择它进行调试

  • 在这里你只需要保证launch.json`能够找到可执行文件即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//launch.json---
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "leetcode debug",	//launch的名称
      "type": "cppdbg",
      "request": "launch",
      "program": "${fileDirname}\\${fileBasenameNoExtension}.exe",	//调试的可执行文件路径
      "args": [],	//传递给main函数的参数
      "stopAtEntry": false,	//是否在开始时就设置端点
      "cwd": "${fileDirname}",	//调试程序时的工作目录
      "environment": [],		//环境变量
      "externalConsole": false,	//true:cmd窗口; false:Vscode的内置终端输出
      "MIMode": "gdb",			//指定连接的调试器,
      "miDebuggerPath": "C:\\msys64\\mingw64\\bin\\gdb.exe",	//gdb所在路径
      "setupCommands": [
        {
          "description": "Enable pretty-printing for gdb",
          "text": "-enable-pretty-printing",
          "ignoreFailures": true
        }
      ],
     // "preLaunchTask": "C/C++: g++.exe build active file" //调试开始前执行需要执行的任务,调试前要编译构建 名称要和tasks.json的label保持一致
    }
  ]
}

13.3 问题

13.3.1 出现vscode 基于 configurationProvider 设置提供的信息检测到 #include 错误。

两个方法解决：

  • 方法1：这是由于CMake工程生成的c_cpp_properties.json当中会出现"configurationProvider": "ms-vscode.cmake-tools"，将它注释掉即可 
    1
    //"configurationProvider": "ms-vscode.cmake-tools"
  • 方法2：这种情况需要在工作区settings.json中添加一个配置项，使配置的信息来源于cmake。 
    1
    “C_Cpp.default.configurationProvider”: “ms-vscode.cmake-tools”

13.4 完整CMakeLists.txt

下面是便捷的CMakeLists.txt，只要遵循之前的目录结构(include、src、，这个CMakeLists.txt在我们添加源文件的时候也不需要改动任何代码，可以自动生成工程文件名、可执行文件。需要指定的就是需要连接的动态链接库，一般小型程序也不用指定。还有就是这个工程到底是根据多个源文件生成一个可执行文件还是为每一个源文件都生成一个可执行文件。下面的CMakeLists.txt已经默认写好了，每次我们只需要根据自己的实际情况将选择即可。 

1