项目开发神器VsCode配置指南！（含C++、Python、Java环境配置）

向右看齐 2022-09-16 12:28 146阅读 0赞

↑↑↑关注后"星标"Datawhale

每日干货 & [每月组队学习][Link 1]，不错过

Datawhale干货

**作者：吴忠强，东北大学，Datawhale成员**

本篇文章虽然是VsCode挂名，但其实介绍了两款神器: Vscode和Vim， 这两个结合起来，开发效率蹭蹭蹭!!!

之前接触过VsCode但很少用。总感觉写Python不如pycharm香，还得安装各种插件。但最近实习中，发现在项目上有一些较为庞大的推荐架构项目，全是c++代码，后期还要基于项目代码做架构开发，这就涉及到了写C++项目，而且好几个项目一块看，还要满足互相跳转，因为有些变量的定义可能在继承的父类项目里面。

于是就又接触回VSCode, 发现还挺好用，并且插件强大，**只用V****SCode这一款编译器，安装不同的插件就可以开发不同的项目，比如C++， Java(Scala)和Python项目, 并且还免费。**这篇文章来整理下如何用VsCode来写这三种项目，关键是如何进行配置。因为VsCode本质上是一个类似于记事本的编辑器，需要各种插件和环境辅助运行。

**大纲如下：**

*  VsCode基础小常识(快捷键，连接服务器，配置vim与Git)
 *  VsCode写C++、Python与Java项目的相关配置
 *  Vim的使用

![d33560582b86ba5d930534509188dcab.png][]

▲这就满足！大家有想看的内容都可以留言

Ok, let's go!

## 01 VsCode必备的基础知识 ##

### 1.1 两个必备快捷键 ###

关于VsCode是啥，安装就是常规的安装软件操作。下载下来之后，打开，是英文版，可以打开扩展， 搜Chinese安装中文包， 界面如下图:![4d32f7b396e84ac9eaf16162ebe93b66.png][]先记住两个快捷键:

1.  `command+shift+p`: 这个是打开命令交互面板， 在命令面板中可以输入命令进行搜索(中英文都可以)，然后执行。命名面板中可以执行各种命令，包括编辑器自带的功能和插件提供的功能。![8fb902d677751753000dd57a068b06e4.png][]
2.  `comand+,`: 进入设置，这里可以进行用户和工作区的设置，像什么代码风格，字体风格各种设置都在这里  
    ![d8d708bc7dd94b10f6db7f2189c3adeb.png][]

这两个快捷键建议记好。

另外， 这几个常用的快捷键最好也知道:![9cb3aa1b53c88f3dce8461a11c7bdccf.png][]

### 1.2 安装code ###

安装后打开命名面板`Command+Shift+P`,搜索shell命令,点击在PAth中安装code命令，然后在上面菜单栏里面点击终端，开启一个新终端。在这里面使用code命令打开文件或文件夹

code 项目地址或者文件名  # vscode 就会在新窗口中打开该项目或者文件

如果你希望在已经打开的窗口打开文件，可以使用`-r`参数， 当然也可以菜单栏文件然后open项目，但感觉还是有些麻烦。

### 1.3 连接远程服务器开发 ###

这个也是需要掌握的必备技能了， 毕竟我们本地的机器啥配置自己清楚， 项目往往都放到服务器上， 而这个就保证了在自己电脑上远程打开服务器的项目并开发。

这个需要安装插件Remote-SSH， command+shift+x打开安装。安装完了之后，左下角绿色的地方点击，然后选择connect to host，输入IP和用户名添加即可， 这样就链接到了远程服务器。![e115f5b6184803e3cb5942f12323716a.png][]

### 1.4 安装Vim，使得开发更高效 ###

如果vs code上安装vim插件，那么写代码就可以采用vim的方式了， 各种便捷式命令使得开发更加高效。插件搜vim安装，然后点击vim插件，就会看到vim插件的安装说明， 在安装说明里面把第一行在命令行执行:

defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false

然后需要在setting.json中把vim的配置复制进去即可， 这样就变成了vim编辑器， 然后就能进行vim的各种骚操作了。setting.json文件在哪里？ `command+,`进入设置， 然后上面搜索框输入: `Run Code Configuration`， 在查找的结果中，如果发现setting.json编辑即可。

![a6904ce0191b0e27ee7dc920293c6715.png][]下面那段拷贝到setting.json中， 这样就会发现进入了vim编辑模式。常用的vim命令还是要会的， 开发更加高效。这个统一整理到最后面， 借着这次，顺便也复习下Vim的使用， Linux下简直神器。

### 1.5 配置Git ###

这个功能我目前没用到， 因为我一般喜欢命令行直接Git相关操作，等具体用到了再补充。可以先参考https://blog.csdn.net/weixin\_42280089/article/details/88937175

ok, 几个必备知识搞定之后， 就可以开发项目了， 其它功能等用到了可以现查。

## 02 VsCode写三大编程项目的相关配置 ##

### 2.1 VsCode写C++项目的配置 ###

这里记录C++项目开发的相关配置，先安装3个插件:

*  C/C++
 *  C/C++ Extension Pack
 *  CodeLLDB

然后检查下是否按照了clang/clang++ 编译器

clang++ -v

如果未安装，请前往 app store 下载 xcode安装。

准备工作完成，然后打开终端输入下面命令：

mkdir projects
    cd projects
    mkdir hello
    cd hello
    code .
    
    # 上述步骤也可以在vscode中创建一个新的hello文件夹代替。

接下来，设置编译器路径， 交互面板下， 输入c/c++选下面这个UI的:![447279e4b9aa8252f7f0fb88a055e7b0.png][]采用默认即可，这里编译器我选了个clang++， 也可以默认。这样完事之后， .vscode目录下，自动多一个c\_cpp\_properties.json文件， 用于使用vscode自带的代码提示工具，支持代码跳转等， 在这里面进行配置如下:

{
        "configurations": [
            {
                "name": "Mac",
                "includePath": [
                    "${workspaceFolder}/**"
                ],
                "defines": [],
                "macFrameworkPath": [],
                "compilerPath": "/usr/bin/clang++",
                "cStandard": "gnu17",
                "intelliSenseMode": "macos-gcc-x64",
                "cppStandard": "c++11"
            }
        ],
        "version": 4
    }

这个完事。

接下来， 需要配置一个tasks.json文件， 用于编译c++文件。

1.  交互面板，输入task
2.  选择tasks: Configure Default Build Task
3.  选择Create tasks.json file from template
4.  选择Others， 会在.vscode下面自动创建tasks.json，在编辑器中打开
5.  进行如下配置

{
        "version": "2.0.0",
        "tasks": [
          {
            "label": "Build with Clang", //这个任务的名字在launch.json最后一项配置
            "type": "shell",
            "command": "clang++",
            "args": [
              "-std=c++17",
              "-stdlib=libc++",
              "-g",
              // 生成调试信息，GUN可使用该参数
              "${file}",
              // file指正在打开的文件
              "-o",
              // 生成可执行文件
              "${fileDirname}/${fileBasenameNoExtension}"
              // fileDirname指正在打开的文件所在的文件夹
              // fileBasenammeNoExtension指没有扩展名的文件，unix中可执行文件属于此类
            ],
            "options": {
              "cwd": "${workspaceFolder}"
            },
            "problemMatcher": ["$gcc"],
            "group": {
              "kind": "build",
              "isDefault": true
            }
          }
        ]
      }

这里面需要注意的是第一个label，后面的名字，要和下面这个配置文件名字最后一项保持一致。可行性文件这个保存的是路径位置。

接下来， 配置launch.json， 这个是用于使用vscode自带的debug工具（左侧的小虫图标）

1.  交互面板下输入launch，选择Debug：Open launch.json
2.  选择LLDB
3.  在.vscode下自动生成launch.json文件， 写入配置

{
        // 使用 IntelliSense 了解相关属性。 
        // 悬停以查看现有属性的描述。
        // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            
            {
                "name": "Debug",
                "type": "lldb",
                "request": "launch",
                "program": "${workspaceFolder}/${fileBasenameNoExtension}",
                "args": [],
                "cwd": "${workspaceFolder}",
                "preLaunchTask": "Build with Clang"
            }
        ]
    }

这样，配置工作完成， 就可以写程序代码了。在该项目下面建立一个helloworld.cpp文件，写入如下代码：

![a8429c0f4676265322e33951f0719ef6.png][]然后`command+shift+b`就可以进行编译，然后点击右上角的执行按钮即可运行程序了。注意，如果改变helloworld.cpp的位置，比如新建个src目录， 把这个cpp放入src目录，此时上面的task.json和launch.json相应位置需要做出改变。

# task.json
    // 生成可执行文件
    "${fileDirname}/src/${fileBasenameNoExtension}"
    
    # launch.json
    "program": "${workspaceFolder}/src/${fileBasenameNoExtension}",

如果想debug， 就点击左边的小虫子图标， 然后打断点， 在左上角再点击绿色箭头，就进入debug模式了。![8a6ed72b2cdc2c8aeeabadd6affc4023.png][]到这里为止， C++环境配置完成。

在运行过程中，我其实遇到了一个c++11的bug：

[Running] cd "/Users/bytedance/projects/hello/" && g++ main.cpp -o main && "/Users/bytedance/projects/hello/"main
    main.cpp:9:21: error: expected ';' at end of declaration
      vector<string> msg {"Hello", "C++", "World", "from", "VS Code", "and the C++ extension!"};
                        ^
                        ;
    main.cpp:11:27: warning: range-based for loop is a C++11 extension [-Wc++11-extensions]
      for (const string& word : msg)
                              ^
    1 warning and 1 error generated.

这个卡了我好久其实， 上面文章中是没有写的， 这个原因解决方法可能有两个:

1.  看看插件里面是否安装了C/C++ Clang Command Adapter， 有的话卸载掉， 这个对我这个没有用
2.  进设置，搜Run Code Configuration， 打开setting.json文件， 那里面会有各类语言的执行map, 在里面找到cpp, 把后面的value改成:`"cpp": cd $dir && g++ -std=c++11 $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt`, 我用了这个方法解决的

至此， c++部分结束。

### 2.2 VsCode写Python的配置 ###

写大项目还是建议pycharm， yyds， 而如果写一些小demon啥的， 可以使用vscode了，这个配置起来，写代码项目也非常方便， 配置Python环境， 相对简单。

首先，按照Python插件， command+shift+x， 然后搜Python即可安装插件。然后命令行输入命令：

mkdir projects
    cd projects
    mkdir hello
    cd hello
    code .

这时候会建立一个hello目录，如果提示code没有定义， 先安装code， 具体方法是command+shift+p， 然后在里面搜shell，就会显示这条命令，点击安装即可。

在hello里面，建立hello.py文件，这时候基于扩展左下角就会显示所用的Python版本， 这时候，其实就能简单运行.py文件了。比如打印个hello world。![bb12d9eecbc0ad88832bb81f831417e0.png][]

**但是如何建立大项目，写更加复杂的代码呢？**这里可以安装anaconda， 然后在里面建立虚拟环境，然后在vscode中指定，就可以写了。 点击左下角的Python3.8.2这里。![ca4ed350dd6ac987626940018787cbaa.png][]

我这里有3个anaconda3的环境，我选Arkrec\_env的这个， 这里面专门写tf相关代码的，也安装好了大部分常用的包，点击选择即可。如果想写pytorch代码，我这里可以选择第一个。![8777139c98be301f8f77680191c4bbf7.png][]

左下角就变了环境。

### 2.3 VsCode写Java项目的配置 ###

想运行Java项目， 也非常简单，主要包括三步:

1.  下载并运行「Extension Pack for Java」；
2.  下载并运行「JDK」；
3.  配置「Environment Variable」

**第一****步，安装Extension Pack for Java插件**， `command+shift+x`然后输入这个插件名字， 点击安装。

![0ab7411a0123e2c4c1431ce6915b4ab3.png][]

这哥们其实在为我们安装了6个Java必备插件:

1.  Language Support for Java(TM) by Red Hat: 运行Java代码
2.  Debugger for Java: 调试
3.  Java Test Runner: 单元测试
4.  Maven for Java: 在Java环境下构建应用程序的软件

安装完毕之后.

**第二步****，下载并运行「JDK」**。「JDK」的全称是「Java Development Kit」，也就是中文所说的「Java开发套件」, 这个套件就是我们开发基于Java语言的软件所需要的一个工具包。 话不多说，直接操作。

`command+shift+p`进入命令窗口，搜索Java Overview， 在右侧Configure那里，点击Configure Java Runtime，通过VSCode默认的「AdoptOpenJDK」下载入口，选择我们需要下载的「JDK」和「JVM」的版本

![75a0c77238eaa6a8386528a6fa59049b.png][]点击Download进入下载页面。下载下这个pkg包之后，点击安装即可。这时候，Reload Window，然后点击上面的Installed JDKs， 就会发现安装的JDK路径以及版本。

![002b2bbfefb357de5f253303721e2333.png][]

**第三步，配置「Environment Variable」**，也就是中文所说的「环境变量」。`command+,`进入设置页面， 搜索中输入javahome, 然后点击

![3f8d389ba2584dfd10b0796a1dc6177c.png][]在这里， 把上面的那个JDK的路径复制过来即可。

这样就可以愉快的写Java代码了， 测试下， `command+shift+p`， 在里面输入`Java: create Project`，输入项目名，在src文件夹中，选择Run运行Java代码，控制台数据Hello World则为成功。

![88a40ecffbc3ed20854f601724387302.png][]OK， Java配置完成。

这样下来， 就把Vscode打造成了能同时开发Python， C++以及Java项目的神器了， 当然， Vscode还能做更多语言的项目开发， 等后面具体用到了再整理吧， 这玩意辅助上Vim， 项目学习起来也是非常香的哈哈。

## 03 Vim使用小记 ##

由于目前我对Vim也是只了解到了些皮毛， 所以只整理些关于vim常用的操作。

### 3.1 三种模式切换 ###

首先，三种模式切换必备：![30c267e7cd5c1e3ded32e98fdc871838.png][]

*  从Normal模式到Insert模式(写代码模式)
    
     *  `i/a`键：当前位置插入
     *  `A`键: 行尾插入
     *  `I`键: 行前插入
     *  `O`键: 上行插入
     *  `o`键: 下行插入  
        反之`jj`键或者`esc`键
 *  从Normal模式到命令行模式， `":"`, 反之esc， 命令行里面输入`:行号`，直接跳到相应行
 *  从Normal模式到visual模式， `v`键， 反之esc， 这个模式类似于我们用鼠标选中文本的操作。
    
     *  `v`: 字符可视化模式，此模式下目标文本的选择是以字符为单位的，也就是说，该模式下要一个字符一个字符的选中要操作的文本。
     *  `V`: 行可视化模式，此模式化目标文本的选择是以行为单位的，也就是说，该模式化可以一行一行的选中要操作的文本
     *  `Ctrl+v`: 块可视化模式，该模式下可以选中文本中的一个矩形区域作为目标文本，以按下 Ctrl+v 位置作为矩形的一角，光标移动的终点位置作为它的对角

visual模式下面复制粘贴操作等都能使用。

### 3.2 必备命令 ###

刚开始进入vim的时候是Normal模式, 这个模式下是不能写代码的， 在这个模式下需要记住的操作：

*  **光标移动**
    
     *  **字符跳**：控制光标移动: `H, J, K, l`四个键分别是左， 下，上， 右, 这个是一个字符一个字符的跳
     *  **单词跳**：`w`: 一个单词一个单词的跳 ，`b`: 一个单词一个单词的往回跳， 在前面加`n`可以跳n个单词。
     *  **行尾行首**：`$`跳动当前行尾， `^`跳到当前行首
     *  **文件首尾**：`G` 跳到文件末尾， `gg`跳到文件开头, `nG`跳到第n行
     *  **括号匹配**：`%`跳到与之匹配的括号位置
 *  **删除文本**: `x`删除当前字符，`dd`删除当前行， `cc`键删除当前行并自动进入Insert模式, `ndd` 删除当前及后面的n行， `D`删除光标到末尾的元素, `:a,bd`删除a-b行文本内容
 *  **查找和替换**：`/查找内容`进行查找，`:g/a1/a2/g`将文本中所有的a1用a2替换。
 *  **复制和粘贴**：`y`复制当前字符， `yy`复制当前行， `nyy`复制n行， `p`粘贴
 *  **撤销与反撤销**: `u`撤销一次, `U`撤销对该行文本做的所有操作， `ctrl+r`反撤销一次
 *  **保存退出**: `q`直接退出， `wq`保存退出， `w`保存但不退出， 后面加`!`强制的意思。`"w!"` 和 `"wq!"` 等类似的指令，通常用于对文件没有写权限的时候（显示 readonly），但如果你是文件的所有者或者 root 用户，就可以强制执行。

### 3.3 Vim多窗口编辑 ###

编辑文件的时候，可能参考另一个文件，如果两个文件切换比较繁琐，可以Vim同时打开两个文件。

命令行输入`:vs第二个文件目录`, 回车， 此时垂直切分成两个窗口。`Ctrl+ww`进行两个窗口的切换。

### 3.4 Vim批量注释 ###

这个也是非常常用的，不操作鼠标，直接通过命令来

*  连续行注释: `:1,10s/^/#/g` 1-10行行首加"\#"注释, `^`表示行首， `g`表示执行替换时不询问确认。如果是取消， `1,10s/^#//g`
 *  c++和Java的注释用到//， 此时需要转义。`1,10s/^/\/\//g` 注释1-10行

是否显示行号: `set nu` 与`set nonu`

目前我用到的Vim常用操作就是这些了， 如果再遇到新的，会继续补充。

![f108be04affdc04d081b8a2e5199ebda.png][]

**吴忠强**

东北大学，Datawhale成员

![4a3b669cf941719e5c2c2ea23ea06dd1.png][]

整理不易，**点****赞****三连**↓

[Link 1]: https://blog.csdn.net/Datawhale/article/details/117757342
[d33560582b86ba5d930534509188dcab.png]: /images/20220828/5a58971c27a14e2dafe8bd795a57b330.png
[4d32f7b396e84ac9eaf16162ebe93b66.png]: /images/20220828/e6f100c1ff7345e6bc0b4ea0aadad783.png
[8fb902d677751753000dd57a068b06e4.png]: /images/20220828/25be7f839e024f9fbbf147abfdd61306.png
[d8d708bc7dd94b10f6db7f2189c3adeb.png]: /images/20220828/996b0274a17a4ab59f66299b1b49fdc6.png
[9cb3aa1b53c88f3dce8461a11c7bdccf.png]: /images/20220828/63011d1bba4d4fd1b04b3e46d7708191.png
[e115f5b6184803e3cb5942f12323716a.png]: /images/20220828/832b5755ad234dcdab7b65ea796c0aae.png
[a6904ce0191b0e27ee7dc920293c6715.png]: /images/20220828/eedc55c2fdd845249228d3af00ce6cba.png
[447279e4b9aa8252f7f0fb88a055e7b0.png]: /images/20220828/f53152b0ded0471b9c2c8ac3664db18b.png
[a8429c0f4676265322e33951f0719ef6.png]: /images/20220828/8fdf5a71571047e5b51cef6cbc253e2c.png
[8a6ed72b2cdc2c8aeeabadd6affc4023.png]: /images/20220828/bf2155569a034746bda1f69ff42af683.png
[bb12d9eecbc0ad88832bb81f831417e0.png]: /images/20220828/555297a51f5b4a42a2f2a30e16eb9b57.png
[ca4ed350dd6ac987626940018787cbaa.png]: /images/20220828/96231f23b3f2472f8f36cfb9018a42e0.png
[8777139c98be301f8f77680191c4bbf7.png]: /images/20220828/7229231f7d1d480c9a8db5704e49031d.png
[0ab7411a0123e2c4c1431ce6915b4ab3.png]: /images/20220828/9342e9d55c6b4ef9b9f2988db12c90a2.png
[75a0c77238eaa6a8386528a6fa59049b.png]: /images/20220828/1ba78f669b70434298300825c7e15390.png
[002b2bbfefb357de5f253303721e2333.png]: /images/20220828/aa71e262280944379787cb2f2f084ea0.png
[3f8d389ba2584dfd10b0796a1dc6177c.png]: /images/20220828/ba0000a7dd0247888b97d4959a5e68fc.png
[88a40ecffbc3ed20854f601724387302.png]: /images/20220828/228dd7d6f22d40afa93f4ac5107c0b48.png
[30c267e7cd5c1e3ded32e98fdc871838.png]: /images/20220828/c50872021c99433b9028bdbf6bfe7d7b.png
[f108be04affdc04d081b8a2e5199ebda.png]: /images/20220828/ac3ef883063745f5975308cef145f44c.png
[4a3b669cf941719e5c2c2ea23ea06dd1.png]: /images/20220828/da3967dc756242d7b1e7b3e535bfb34d.png