VSCode 配置指北

• Marvolo • 4条评论 •

VSCode 配置指北

前言

VSCode，全称 Visual Studio Code，别称 VSC，是微软旗下的一款免费、开源、跨平台的多功能编辑器。因可拓展性强，插件丰富，被誉为宇宙第一编辑器（如果不赞同这个观点本文剩下的可以不看了）。

因为其只是一款编辑器，并不具备编译功能，所以想在VSCode里运行代码的话，需要安装插件和修改配置文件。网上有很多关于 VSCode 代码环境配置的教程，但一般都是针对一种语言的，如果一个个查会很麻烦；此外，插件作为 VSCode 的精髓，在使用中打上几十个甚至上百个都是比较正常的事情。但是网上很多文章都很吝啬笔墨，非要写成“VSCode 最实用十大插件”，“XX 款 VSCode 不能错过的插件”这样的精简版，一次就推荐几个，想要一次集齐美化，功能，代码各类插件还是要查很多文章。

基于此，我打算自己开一篇文章，简单介绍下 VSCode 的基本配置，几种主流语言的编译设置以及我自己使用到的所有插件（算是一个推荐）和一些基础性的使用技巧。本文长期更新，如有错误欢迎在评论区指正。

下载与安装

Google 搜索 VSCode，第一个结果就是微软的官网。点击官网左侧下载按钮，之后一路 next 安装就行。

image-20210706102154068

安装完毕后打开 VSCode，如果觉得英文页面不适应，可以先装一个汉化插件。具体参加插件推荐那一节的 Chinese (Simplified) Language Pack for Visual Studio Code插件。

语言配置

VSCode自身可以打开绝大多数语言文件，通过打插件与合理配置，基本上都可以实现编译功能。

这里只介绍 C、C++、Python、Java 这四种主流语言的编译环境配置，其他语言之后再补充（暂定下一个写 Go）。

C&C++

首先，安装 Dev C++（看起来很奇怪，但这真的是 VSCode 配置教程）。一路 next 就行，不要动任何配置，包括安装路径，不然后面要改很多配置文件。Dev 本身并不大，C 盘空间只要没见红，装一个 Dev 完全没问题。

安装完毕后，先添加环境变量。右键我的电脑，属性=>高级系统设置=>环境变量=>Path=>编辑=>新建，然后写入如下环境变量：

C:\Program Files (x86)\Dev-Cpp\MinGW64\bin

image-20210707193715818

重启电脑，然后打开 cmd，输入gcc -v，出现类似下图的结果表示配置成功：

image-20210707193807700

然后打开安装好的 VSCode，点击左侧栏中的拓展图标（好多方块那个），搜素C++，点击第一个插件，安装。

image-20210707194018943

然后在一个合适的位置建立一个文件夹，VSCode 是基于文件夹工作的，这个文件夹下将会存放你所有的C/C++代码。然后点击文件=>打开文件夹。

打开之后，点击左侧第一个图标，然后会发现 VSCode 在当前文件夹下创建了一个叫.vscode的文件夹。这是VSCode工作目录的配置文件。点击该文件夹，在里面创建下图中除了settings.json之外的其他三个文件。

image-20210707194527789

然后将对应文件的内容直接复制进入即可。如果修改了Dev的安装路径，那就修改文件中涉及路径的部分就行。

c_cpp_properties.json

{
    "configurations": [
        {
            "name": "Win32",
            "includePath": [
//                "C:/Program Files (x86)/DevCpp/MinGW64/lib/gcc/x86_64-w64-mingw32/4.9.2/include/c++",
//                "C:/Program Files (x86)/DevCpp/MinGW64/lib/gcc/x86_64-w64-mingw32/4.9.2/include/c++/tr1",
//              "C:/Program Files (x86)/DevCpp/MinGW64/lib/gcc/x86_64-w64-mingw32/4.9.2/include/c++/x86_64-w64-mingw32",
                "${workspaceFolder}/**"
            ],
            "defines": [
                "_DEBUG",
                "UNICODE",
                "_UNICODE"
            ],
            "compilerPath": "C:/Program Files (x86)/Dev-Cpp/MinGW64/bin/gcc.exe",
            "cStandard": "c11",
            "cppStandard": "c++11",
            "intelliSenseMode": "gcc-x64"
        }
    ],
    "version": 4
}

里面有三行注释掉了，不注释在我的电脑上会报 warning。但我记得一开始是不报 warning 的，可能后来不小心改了哪里的配置。建议先把注释去掉，如果一切正常，那就不要再动它了。

launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "(gdb) Launch",
            "type": "cppdbg",
            "request": "launch",
            "program": " {file}.exe",
            "args": [],
            "stopAtEntry": false,
            // "cwd": "{workspaceFolder}",     // .vscode的上一级绝对路径（打开的工作文件夹）。eg: xxxx/cpp(cpp文件夹下就有.vscode文件夹)
            "cwd": "${fileDirname}",            // 当前编译.cpp文件所在绝对路径。eg: xxxx/cpp/CF/A(or B or C or...)
            "environment": [],
            "externalConsole": true,
            "preLaunchTask": "build",
            "MIMode": "gdb",
            "miDebuggerPath": "C:/Program Files (x86)/Dev-Cpp/MinGW64/bin/gdb.exe",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ],
        }
    ]
}

tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "g++",

            "args": [
                "-g",
                "-std=c++11",
//               "-Wshadow",
                "-Wswitch",
                "-Wuninitialized",
                "-Wmaybe-uninitialized",
                "-Wformat",
                "-Wreturn-type",
                "-Wparentheses",
                "-Wunused-parameter",
                "-Wunused-but-set-parameter",
                "-Wfloat-equal",
                "-Wsizeof-pointer-memaccess",
                "-Waddress",
                "-Warray-bounds",
                "-Wempty-body",
                "{file}",
                "-o",
                "{file}.exe"
            ],
        }
    ]
}

配置完毕后，重启 VSCode，在刚刚的文件夹下新建一个.cpp文件（注意是.vscode的上层目录，也就是你创建的放代码的文件夹下），写个 Hello World，然后点上方运行=>以非调试模式运行：

image-20210707195105048

然后，什么都没有发生...只有一个黑框框一闪而过。这就说明配置完毕了。VSCode 把输出放到了闪过的那个窗口里，但并没有在程序结束后暂停这个窗口。所以要想看到输出，需要自己在代码最后写个while(1);，或者改成文件输入输出（我个人更喜欢后者）。

至此，C/C++ 配置完毕。

Python

首先，去清华镜像下载 Anaconda，然后安装。注意安装的时候，在其中一步把“添加到 path”给勾选上，并且一定一定不要把安装路径设置在C盘，不然以后 pip install 的时候会疯狂报错，只能重装。

和 C++ 一样，先去插件栏里搜索 Python，然后安装第一个插件。新建一个文件夹，放以后所有的 Python 代码。打开刚刚新建的文件夹，新建.py文件，再写一个 Hello World。中间有一步会提示让你选择本地的Python解释器（具体哪一步记不清了），如果环境变量配置正确，就能看到之前装的 Anaconda 的路径，类似下图这样，点击选中即可。图中有很多是因为我创建了一些虚拟环境，一开始应该是只有一个的。

image-20210707200243792

然后右键页面，点击“在终端中运行 Python 文件”，下方的终端中就会出现运行结果。如果有输入的话，也是在下面的终端中输入。整体比 C++ 的配置要简单很多。嫌麻烦不想每次运行都右键的话，可以改快捷键。具体见下方快捷键与代码片段这一节。

Java

请认真参考该教程：Visual Studio Code (vscode) 配置 Java 环境 。

Java 环境配置我个人感觉是最麻烦的一个，且对 Java 版本有很苛刻的要求。如果本子带得动且对新版本Java有需求，建议上 IDEA。想轻便一些且不嫌麻烦，可以用 VSCode。

主题

VSCode 的插件页面，除了可以检索到功能类插件外，还能检索到主题插件。我目前在用的是 One Dark Pro 。这里就不做什么推荐了，因为主题这个东西看个人审美，实在让我推荐的话我就只推荐 One Dark Pro 了。

快捷键与代码片段

点击左下角的齿轮，再点键盘快捷方式，就可以设置快捷键。一些不清楚的快捷键可以在这里查，也可以自己绑定或是改键位。注意如果出现冲突，一定要记得解绑不需要的快捷键。

image-20210707200645165

点击左下角的齿轮，再点用户代码片段，选择 cpp.json，就可以给 C++ 文件设置代码片段。

所谓代码片段，和 IDE 的提示类似，在你打出特定的字符组合后，会给出一个提示，按回车就会自动生成一段你自定义的代码。

一个最简单的代码片段如下所示：

{
    "Quick For1":{
        "prefix": "fin",
        "body": [
            "for (i=1;i<=n;i++)$0",
        ],
        "description": "Print a for quickly",
    },
}

Quick For1是该片段的名字，不允许重名；prefix是设置的特定字符，也就是打出fin后，VSCode 会自动给出提示，像下图这样：

image-20210707201015898

按下回车，就会自动生成 body 里的部分。$0是指定了生成完代码后，光标所处的位置。同理还可以设置$1,$2。如果设置0,1,2这样的多个，那么按Tab，光标会自动跳转到下一个$x指定的位置。

合理使用代码片段可以大大提高写代码的效率。一些缺省源，比较常见的巨长的写法（比如 Java 的输出语句），都可以扔到代码片段里，然后通过两三个字母来打出。码代码体验++。

插件推荐

为避免太长不看,先放结论 :

必备(含语言插件) : C/C++，Chinese，Debugger for Java，Django，Json，Python，Tabnine，Vetur

功能类插件：Alibaba Cloud Toolkit，Code Runner，Git Graph，Github，GitLens，Pylance，Python Type Hint，Thunder Client，TODO Tree，Visual Studio IntelliCode，VS Code Counter，WakaTime

美化类插件 : Babel JavaScript，background，Beautify，Bracket Pair Colorizer 2，One Dark Pro，vscode-icons

娱乐类插件：z-reader

Alibaba Cloud Toolkit

image-20210707201433352

阿里云开发的一款插件，可以在VSCode中连接阿里云服务器（经过尝试，别的服务器也可以），同时支持一键部署等功能。实用性很强，使用方法详见之后发布的后端入门教程。

Babel JavaScript

image-20210707201607550

顾名思义，高亮 JavaScript 用的。因为我前端写得少，所以这个插件没有什么使用经历，只是为了以后可能的全栈先装上了（但它应该是前端必备的我感觉）。

background

image-20210707201800715

美化类插件的神！让你的 VSCode 有背景图，可以挑自己喜欢的照片当背景。效果如下图所示：

image-20210707201925570

下方有一层浅浅的背景，写代码效率++++。

安装完毕后，需要在 settings.json 里插入下面这段内容：

"background.useDefault": false,

"background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "0% 0%",
    "background-size": "cover",
    "background-repeat": "no-repeat",
    "opacity": 0.1
},

"background.customImages": [
    "file:///E:/Code Warehouse/BGP.jpg",    //这里放图片路径
],

选背景图的时候注意长宽比，不然拉伸后可能会很难看。

Beautify

image-20210707202143220

美化 JS，Json，HTML，CSS 用的。前端用过都说好。

Bracket Pair Colorizer 2

image-20210707202319935

为你的括号添加颜色，同时增加一个下划线提示你现在是在哪一对括号内。安装完即可直接使用，效果如下图所示：

image-20210707202448875

写长代码必备，强烈推荐。

C/C++

C/C++编译必备插件，具体见语言配置部分。

Chinese (Simplified) Language Pack for Visual Studio Code

image-20210707202656340

VSCode汉化插件。汉化两个字就说明了一切。必备，英语好可以无视。

Code Runner

image-20210707203745227

一款运行代码的插件。这么说可能比较笼统，它并不具备编译器的功能，通常和其他配置文件一同使用。运行 Java 时需要用到。

Debugger for Java

image-20210707203025700

Java Debug 要用到的插件。因为 Java 环境配置过于繁琐，用 VSCode 写 Java 的群体太小了，所以所有的 Java 相关的插件都不做过多介绍。如果打算用 VSCode 运行 Java，那么这篇文章中插件名字带 Java 的全装上就行。

Django

image-20210707203843806

后端框架 Django 的插件。后端党必备。Springboot 是个什么东西。

Git Graph

image-20210708172803014

可视化一个项目的 Git 提交记录用的。安装完毕后，在 VSCode 的最下面会显示一个 Git Graph 字样，点击就可以看到详细信息。不同的分支会使用不同的颜色来区分，可以看到每一次提交的时间以及 commit。点击提交还可以看到哪些文件做了修改，点击文件还会对比显示提交前后的变化。

这里以我本地一个项目为例，时间线长这样：

image-20210708173105662

点击文件名后：

image-20210708173134554

会标出当次提交所做的修改。项目开发必备。

Github

image-20210708173333256

顾名思义，让 VSCode 集成一些 Github 的功能。

GitLens — Git supercharged

image-20210708173550902

也是一个 Git 辅助插件。和上面的 Git Graph 的功能略微有些重叠，同样增加了修改对比功能。除此之外，还在文件中添加了一些提示信息，当光标移动到某一行后，在后面会显示修改者，修改日期，Commit 信息等。鼠标移动上去还会看到更多信息，并可以查看最新一次修订情况。如下图所示：

image-20210708173902525

和 Git Graph 算是相辅相成吧，推荐搭配使用。

Java 相关

包括 Java Extension Pack，Java Test Runner，Javadoc Tools，Language Support for Java(TM) by Red Hat，Maven for Java，Project Manager for Java，Red Hat Commons。不做过多介绍。

Json

image-20210708195915981

一款渲染 Json 的插件。

One Dark Pro

image-20210708200113659

一款暗色主题插件，我个人目前正在用。

Pylance

image-20210708200201953

一款针对 Python 的插件。功能丰富，包括：参数建议，代码补全，自动导入，语法高亮等等。Python 开发者必备。

Python

image-20210708200437695

前文有提到，运行 Python 必备的插件。

Python Type Hint

image-20210708200520002

类型提示明确指出变量的数据类型，当调用函数或类时，提示应该提供什么类型的参数。

Tabnine - AI Code Completion

image-20210708200738036

我个人最喜欢的一款功能性插件。

一个利用 AI 辅助进行代码提示的插件。它会自动分析你写某种语言的命名习惯，以及记忆其他文件中的一些变量与函数名。在跨文件写代码的时候可以给出提示；也会分析你得码代码的逻辑，预测下一句的内容并给出提示。

例如，我新建一个 C++ 文件，打出 N，就有：

image-20210708201101414

我的代码习惯中，以 N 开头的函数都是 NTT 相关的。所以它会自动分析其他文件，并给出 NTT 的提示。不仅分析了函数名，还会提示函数传参：

image-20210708201140421

同时，还会分析一些“趋势”。比如在定义变量时，有：

image-20210708201235366

也会直接猜测接下来的语句：

image-20210708201345863

还有很多例子，这里不再一一给出。建议自己装一个体验一下，绝对的神器。

Thunder Client

image-20210708201713531

和 Postman 的功能比较像，模拟前端发送请求用的。当写完一个后端接口后，不想手动切到 Postman 里，就可以使用这个插件直接在 VSCode 窗口中对接口进行测试。

大概效果如下：

image-20210708201854290

算是 Postman 的下位替代。当然功能上肯定没有 Postman 全面。如果有复杂需求的，建议移步 Postman。普通的小网站后端拿这个做测试足够了。具体使用会放在之后一篇关于后端的文章中介绍。

TODO Tree

image-20210708202023373

TODO 是一种特殊的注释格式。该插件的作用是识别 TODO 类代码并高亮出来，同时在左边的资源管理器中标记出来。效果如下图所示：

image-20210708202829585

颜色都是可以自定义的。我目前使用的配置是：

"todo-tree.highlights.defaultHighlight": {
    "icon": "alert",
    "type": "text",
    "foreground": "#7fd7fa",
    "opacity": 50,
},
"todo-tree.highlights.customHighlight": {
    "TODO": {
        "icon": "check",
        "type": "line",
        "iconColour": "#7fd7fa"
    },

    "FIXME": {
        "foreground": "black",
        "iconColour": "yellow",
        "gutterIcon": true
    }
},

只配置了默认的 TODO 和 FIXME 字段。当然可以自定义新的字段，仿照上面的按需要进行配置即可。

Vetur

image-20210708202916838

Vue 开发插件。我不是前端所以没法给出使用体验，据说前端必备。写 Vue 的装就完事了。

Visual Studio IntelliCode

image-20210708203009547

同样是一个 AI 辅助代码提示的插件，学习了很多 Github 上的代码。个人感觉没有 Tabine 那么智能，但也能用。

VS Code Counter

image-20210708203332477

统计代码行数的插件。

安装完毕后，Ctrl+Shift+P，然后输入 count，出来第一个就是:

image-20210708203437017

按下回车，默认会填入当前打开的文件夹，再按一下回车，当前目录下会生成一个名为.VSCodeCounter的文件夹，下面存放了统计报告。同时会默认打开结果文件，效果如下图所示：

image-20210708203623622

vscode-icons

image-20210708203712561

左侧资源管理器中的默认图标是比较丑的，这个插件的作用是换了一套图标库，让资源管理器中的文件分类更清晰也更美观一些。效果可以参考插件页面的官方效果图，这里随便截取一部分吧：

image-20210708203839550

WakaTime

image-20210708203947048

一款统计写代码时长的插件。当你打开 VSCode ，并且关注焦点在这上面时，它就会开始统计时长。统计的信息包括所属文件夹，语言，时长等等。

官网中列举出了 Wakatime 目前所支持的软件列表，数量很多且在不断加入新的软件，而且可以跨平台：

image-20210708204357895

点击对应的图标，就可以看到某一软件配置 Wakatime 的教程。所以这里就不再赘述了。

登录之后就可以在个人页面看到效果:（有些图是之前的，最近太摸了导致曲线很难看就没放上去）：

微信图片_20210708204523

微信图片_20210708204536

image-20210708204621043

z-reader

image-20210708204806491

一款摸鱼用插件，可以在 VSCode 里看小说，支持搜索书籍，阅读在线图书；同时也支持本地书籍。效果如下图所示：

image-20210708211604037

比较可惜的是，虽然支持 Epub 格式，但是里面的插图无法加载出来（这就导致看轻小说少了很多乐趣）。而且官网虽然说了会保存阅读进度，但我好像都没见它保存过？

使用教程参见插件官网就好。

后记

VSCode 自身的可拓展性很强，远不止上面提到的这些。这篇文章只是根据我自己的一些使用经验写的一个粗浅的入门教程，所以叫“指北”嘛。很多主流编程语言这里都没有提到，主要原因是我自己没有用到，所以写不了。

插件推荐看起来很多，但大多都是功能类和语言类，一些比较花哨的插件，例如刷知乎，听歌这种插件都没有给出。毕竟 VSCode 是一款编辑器，整太多花哨的功能会带来卡顿和文件夹加载慢等问题（现在我打这么多插件已经有一点点慢了，未来也不打算加太多插件了），确实有需求面向 Google 学习一下就行。

还有就是里面没有提到任何一个 Markdown 相关的插件。我之前其实使用过，但使用体验非常不好，Bug 很多，功能远不如 Typora 丰富。所以如果有写 Markdown 的需求的话，推荐直接上 Typora。

后续可能会针对文章中的一些错误，以及可能（？）会加入的语言配置与插件推荐做一些更新。

如果文章中有错误，或者有什么好的建议，欢迎在评论区中讨论。

声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自 Marvolo
本文地址: VSCode 配置指北
VSCode
说点什么
登录
支持Markdown语法
在"VSCode 配置指北"已有4条评论
Loading...