VS Code 使用教程详解

一、写在前面

1、为什么选择 \(VS\) \(code\)

• 一款非常好用的代码编辑器

• 标准化 \(Language\) \(Service\) \(Protocol\)

• 内置调试器和标准化 \(Debugger\) \(Adaptor\) \(Protocol\) —— 所以 \(VS\) \(code\) 可以跨界抢 \(IDE\) 的市场……

• 相较于同市场的 \(Notepad++\) 和 \(Sublime\) \(Text\) ，\(VS\) \(code\) 的颜值和功能足以将它俩按在地上摩擦 （为什么不比较我神仙利器 \(Dev-C++\) ？因为它太神仙了）

• 摸鱼插件千千万，划水开船不易翻，它太香了鸭

2、 \(VS\) \(code\) 是个啥，有啥用

• 正如以上所说， \(VS\) \(code\) 是一款功能丰富且强大代码编辑器 （当然你也可用他悄悄做一些别的事情） 。为什么说它是编辑器而不是编译器，因为在用户完成环境配置之前，它的作用仅仅相当于一个会变色的 \(text\) 文本文档 （其实变色也还要用户手动设置） 。

• \(VS\) \(code\) 特点：

  • 开源，免费；

  • 自定义配置

  • 集成 \(git\)

  • 智能提示强大

  • 支持各种文件格式（ \(html\) / \(jade\) / \(css\) / \(less\) / \(sass\) / \(xml\) ）

  • 调试功能强大

  • 各种方便的快捷键

  • 强大的插件扩展

    • 支持的语言拓展常见的包含如下：
      
      
    • 截至 \(2019\) 年 \(9\) 月， \(VS\) \(code\) 已经支持如下 \(37\) 种语言和文件：
      
      \(F\)#、\(HandleBars\) 、 \(Markdown\) 、 \(Python\) 、 \(Jade\) 、 \(PHP\) 、 \(Haxe\) 、 \(Ruby\) 、 \(Sass\) 、 \(Rust\) 、 \(PowerShell\) 、 \(Groovy\) 、 \(R\) 、 \(Makefile\) 、 \(HTML\) 、 \(JSON\) 、 \(TypeScript\) 、 \(Batch\) 、 \(Visual Basic\) 、 \(Swift\) 、 \(Less\) 、 \(SQL\) 、 \(XML\) 、 \(Lua\) 、 \(Go\) 、 \(C++\) 、 \(Ini\) 、 \(Razor\) 、 \(Clojure\) 、 \(C\)# 、 \(Objective-C\) 、 \(CSS\) 、 \(JavaScript\) 、 \(Perl\) 、 \(Coffee Script\) 、 \(Java\) 、 \(Dockerfile\)

• 学（hun）习（shui）写（mo）码（yu）这么方便，没理由不用

二、配置安装（这里以 C++ 为例）

1、下载安装

• 安装包直接从官网下载即可
  
  
  
  注：由于作者设备为 \(Win10\) \(64\) 位，所以官网默认下载为 \(64\) 位，其他版本可点击 Other downloads 进行下载。
  
  
  
  

• 安装
  
  
  
  
  
  
  
  

2、配置基础插件

• 汉化（英语大神可以直接忽略）

  • 毕竟 \(VS\) \(code\) 不是国产的，毕竟是微软开源的，毕竟微软的母语不是汉语，所以在安装完毕后它的界面是全英文界面

  • 但是它支持插件啊！

  • 点击最右侧一栏四个方格样图标，这就是 \(VS\) \(code\) 的插件拓展功能

  • 打开后在最上方搜索框搜索 Chinese 就会出现 Chinese (Simplified) Language Pack for Visual Studio Code 汉化标识

  • 点击安装（由于作者已经安装完成，所以并没有显示 安装 按钮）

  • 重新启动 \(VS\) \(code\)
    
    

• 配置语言包

  • 在拓展商店搜索 C/C++ 语言包并安装
    
    

3、配置系统环境（这步很重要！！！）

• 众所周知， C++ 是要用 g++.exe 编译的，是要用 gdb.exe \(Debug\) 的，这也是为什么讲 \(VS\) \(code\) 是编辑器而不是编译器的原因。

• 下载编译环境—— \(MinGW\) \(64\) 或 \(MinGW\) \(32\)

  • 良心 作者已经把 \(64\) 位的常用环境变量整合好了，可以到网盘提取

  • 网盘地址： https://pan.baidu.com/s/1fBZr_NbIHuupodVbZ5-rhg

  • 提取码： y8c9

  • 直接下载解压到一个不容易被删除的地方就好啦~

  • 注：解压时一定要记清文件路径！！！过会儿会用到

• 将编译器文件路径加入到系统的环境变量当中

  • 找到刚才解压的编译器文件夹，找到目录下的 bin 文件夹，例如我的就是 F:\x86_64-8.1.0-release-posix-seh-rt_v6-rev0\mingw64\bin ，将路径复制下来（如果你足够细心，你会注意到在 x86_64-8.1.0-release-posix-seh-rt_v6-rev0\mingw64 目录下其实还有一个 x86_64-w64-mingw32 文件夹，这是为了防止某些牛人的老爷机可能对 \(64\) 位不兼容，准备的 \(32\) 位。如果可以，最好也将它子目录下的 bin 文件夹路径复制下来，又例如我的是 F:\x86_64-8.1.0-release-posix-seh-rt_v6-rev0\mingw64\x86_64-w64-mingw32\bin ）

  • 右键单击 此电脑 \(\to\) 属性 \(\to\) 高级系统设置 \(\to\) 高级 \(\to\) 环境变量 \(\to\) 单击选中系统环境里的 PATH \(\to\) 编辑 \(\to\) 新建 \(\to\) 将刚才复制的路径粘贴进去（一定要精确到 bin 文件夹！）
    
    
    
    

  • 然后一路 确定 、 应用 点回来

  • 然后关机重启这样就完成了环境变量的配置

  • 最后来检验一下： Win+R 打开运行，输入 cmd 回车，在命令提示符里输入 g++，若出现下面结果而不是 'g++'不是内部或外部命令，也不是可运行的程序或批处理文件则表示配置成功
    
    

4、配置 \(VS\) \(code\) 内部环境

• 打开 \(VS\) \(code\) ，点击编辑器右上角 资源管理器 \(\to\) 打开文件夹 \(\to\) 在你准备保存代码的地方新建一个文件夹，命名为 .vscode （注意名字一定是 .vscode ，这是必须的。一般来说，每个保存代码的文件夹中都应有这么一个 .vscode 配置文件）

• 注：将此文件夹放在常用文件夹顶层，就不需要重复配置了。

• 在 .vscode 文件夹中，新建两个（只需两个）配置文件，即 tasks.json 、 launch.json 。将下列内容复制进去即可：

  • \(tasks.json\) :

  {
    "version": "2.0.0",
    "tasks":
    [
        {
            "label": "g++",
            "command": "g++",
            "args":
            [
                "-g",
                "${file}",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}.exe"
            ],
            "problemMatcher":
            {
                "owner": "cpp",
                "fileLocation":
                [
                    "relative",
                    "${workspaceRoot}"
                ],
                "pattern":
                {
                    "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
                    "file": 1,
                    "line": 2,
                    "column": 3,
                    "severity": 4,
                    "message": 5
                }
            },
            "group":
            {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
  }
  

  • \(launch.json\) :

    • 注意： miDebuggerPath 这一条，要与你环境包安装路径一致，注意在路径中 ''要替换为'\',就像下面一样。

  {
      "version": "0.2.0",
      "configurations":
      [
  
          {
              "name": "(gdb) Launch",    // 配置名称，将会在启动配置的下拉菜单中显示
              "type": "cppdbg",         // 配置类型，这里只能为cppdbg
              "request": "launch",    // 请求配置类型，可以为launch（启动）或attach（附加）
              "program": "${fileDirname}/${fileBasenameNoExtension}.exe",// 将要进行调试的程序的路径
              "args": [],                // 程序调试时传递给程序的命令行参数，一般设为空即可
              "stopAtEntry": false,     // 设为true时程序将暂停在程序入口处，一般设置为false
              "cwd": "${workspaceRoot}",// 调试程序时的工作目录，一般为${workspaceRoot}即代码所在目录
              "environment": [],
              "externalConsole": true,// 调试时是否显示控制台窗口，一般设置为true显示控制台
              "MIMode": "gdb",
              "miDebuggerPath": "F:\\x86_64-8.1.0-release-posix-seh-rt_v6-rev0\\mingw64\\bin\\gdb.exe",// miDebugger的路径，注意这里要与MinGw的路径对应
              "preLaunchTask": "g++",    // 调试会话开始前执行的任务，一般为编译程序，c++为g++, c为gcc
              "setupCommands":
              [
                  {
                      "description": "Enable pretty-printing for gdb",
                      "text": "-enable-pretty-printing",
                      "ignoreFailures": true
                  }
              ]
          }
      ]
  }
  

• 最后尝试写个小程序，按 F5 编译运行。

  • 注：因为 \(VS\) \(code\) 的终端在执行完程序后默认退出，所以可以选择在 return 0; 处增加一个断点或者加一句 system(pause); ;

  

三、个性化 \(VS\) \(code\)

（作者快累死了。。。未完待续，持续更新）