Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，使用Web技术Electron搭建，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展。软件跨平台支持 Windows、Mac 以及 Linux。

接触这款编辑器之后的感受正如VSCode官网所述：VSCode Redefined Code Editing.这款编辑器带来的强大的功能是Dev-C++等古董编辑器望尘莫及的。

目录

安装VSCode

开始编辑代码

编辑器基本设置

键盘快捷键配置

如何调试代码 & 一个sample & C++补全

美化VSCode

插件入门: Hello,World

安装VSCode

在VSCode官网可以get不同版本的VSCode安装程序。其中Stable为稳定版，Insiders为测试版。选择你喜欢的版本下载即可。

Windows用户安装VSC时可以选择把VSC注册到path。也可以加入到右键菜单，方便打开文件。

终端可以使用code命令启动VSC。

开始编辑代码

VSC是长这个样子的：

侧边栏可以管理调试、打开文件、管理扩展、搜索、管理源码

右下角的一排选项可以更改正在编辑的文件的格式。

“哇，看起来好高级的样子！” 你激动的创建新文件并写下了helloworld。

但是好像发生了一些奇怪的事情……

怎么没有高亮啊喂！？

嘿嘿，其实正确的打开方式是这样的：

可以在右下角点击纯文本并修改为C++

也可以在保存文件时更改后缀为.cpp

那这不也太麻烦了？！

不要着急~一会你就知道更简便的方法了。

编辑器基本设置

从左下角可以打开设置界面。

啊喂？！这个设置界面怎么和Dev-C++的不一样啊？这是什么鬼？

其实VSC的设置是一个.json文件，可以通过修改参数的方法更改设置。

左侧是默认设置，右侧是用户自定义设置。

我们试着修改一个设置，比如给滚动添加动画

在上面的搜索框输入scroll或者打开编辑器找到它：

点击最左面的铅笔图标，将参数修改为true（这时你可以看到右侧会多出一行代码）并按下Ctrl+S保存设置，我们就修改完成了！

大部分设置都是这样修改的，少部分需要输入几个参数。设置都附有注释（不过部分是英文的，TAT）。下面是我的设置：

还记得我们提到的代码格式问题吗？搜索defaultLanguage，将这个设置修改为cpp即可~

顺带一提，你会偷偷发现上面出现了Settings (Preview)这个选项卡。这是VSC的新版设置界面（和现在的这个不太一样），有兴趣的同学可以自己研究一下。

键盘快捷键配置

键盘快捷键的设置也在左下角的设置按钮里。打开之后可以看到上图的界面。

默认的快捷键非常方便，我没有修改快捷键。

这里给出几组最常用的快捷键，可以大幅度提高效率（灵活使用甚至可以丢掉鼠标写代码）：

编辑器与窗口管理

打开Ctrl+O

新窗口Ctrl+Shift+N

新标签页Ctrl+N

关闭整个VSC窗口Ctrl+Shift+W

关闭当前标签页Ctrl+W

重新打开刚刚关闭的标签页Ctrl+Shift+T

切换标签页Ctrl+Tab

创建一个新编辑器并将当前页面复制过去Ctrl+\

在前三个编辑器之间切换Ctrl+1 2 3

将焦点编辑器移动位置 先按下Ctrl+K左下角出现提示后用← →移动 或者可以Ctrl+Alt+←→

在标签页之间切换Alt+1~9

代码编辑

搜索Ctrl+F

替换Ctrl+H

复制光标所在行 只需按下Ctrl+C即可。

去掉行尾空格Ctrl+K然后Ctrl+X

切换行注释(可多行)Ctrl+/

代码缩进Ctrl+[或Ctrl+]

当前行上下移动Alt+↑↓

当前行后插入一行Ctrl+Enter

当前行前插入一行Ctrl+Shift+Enter

选中下一行Ctrl+i

(神级辅助键) 撤销光标上次移动Ctrl+U

选中下个高亮的匹配项Ctrl+D

多光标模式Atl+鼠标单击即可在单击处创建新的光标

(这个模式非常灵活，可以搭配多种操作提高效率)

(神级辅助键) 速览定义Alt+F12

转到定义F12

Zen模式(一个奇怪的类似全屏的模式)Ctrl+K然后Z

打开自动保存Ctrl+Shift+P之后输入AutoSave，选中，按下回车。

打开终端Ctrl+~

还有一个炒鸡强大的按键：

鼠标中键

“我的鼠标滚轮能按下去？”

对！它非常的好用。

按住鼠标中键并选择=Alt+Shift选择 （既选择矩形区域）

用鼠标中键关闭编辑器/选项卡/通知：在空编辑器/选项卡/通知条任意位置按下中键即可

再也不用对准×号了有木有！？

调试代码

再怎么说它也只是一个Editor！怎么调试代码呢？

VSC的插件很强大。这里我们使用一个插件。

打开插件商店，搜索C/C++ Compile Run并安装。

同样的方法可以安装C++辅助插件C/C++（这个是微软官方的插件）

安装完成，重启VSC后马上可以使用，按F6就可以偷税的调试当前的单文件C++代码了。但是……

我是Windows，好像报错了，怎么办？

对于Windows用户，这个插件不尽人意，我们需要稍微魔改一下：

VSC的插件目录在C:\User\(your username)\.vscode\extensions\

我们找到一个叫danielpinto8zz6.c-cpp-compile-run-0.0.6的文件夹，在里面的out文件夹里有一个extension.js，用VSC打开它。

你可以像我一样修改图中这几行。如果你是js大佬，你可以进行更精彩的修改。

改好了，但是还是显示错误?

path里没有g++的路径！

下载MinGW

需要下载MinGW（注意选择对应的位数）安装并将g++.exe的路径添加到path。

去搜索MinGW并下载：

你会得到一个奇怪的玩意儿：

勾选图中几个并选择Apply即可下载了。

添加路径到Path

按下Win+Pause/Break两个键并打开左侧的高级系统设置，找到环境变量。

编辑图中的那一项。添加路径比如默认安装路径C:\MinGW\bin。注意前面的分号。

记的还要重启VSC哦。

利用VScode写题目

这算啥啊，可不可以show一下VSC的强大呢？

那我就用一个例子[JLOI2009]神秘的生物来证明VSC的强大！

首先用VSC打开工作写题文件夹。文件(F)->打开文件夹打开你的文件夹 (也可以直接创建文件，区别在于不打开文件夹无法用F5调试，但是可以用上文的插件调试)

Ctrl+N新建一个文件保存到此文件夹，打开文件自动保存。

头文件补全，非常方便

感觉哪儿不对……？速览定义！

使用小地图和大纲快速定位

使用多光标模式修改

如果按照上一步配置好了，可以用F6快速运行代码。

附：F5 Debug的配置方法

准备好一个工作文件夹，以后就用这个文件夹写代码

文件(F)->打开文件夹打开你的文件夹

写一个程序保存到这个打开的文件夹

按下F5并选择GDB

用以下内容替换launch.json,注意miDebuggerPath要换成自己的GDB路径，还要记得\是要用\\代替哦~

{

"version": "0.2.0",

"configurations": [

{

"name": "G++ (with O2)",

"type": "cppdbg",

"request": "launch",

"program": " ${fileDirname}/$ {fileBasenameNoExtension}.exe",

"args": [],

"stopAtEntry": false,

"cwd": "${workspaceRoot}",

"environment": [],

"externalConsole": true,

"MIMode": "gdb",

"miDebuggerPath": "C:\\MinGW\\bin\\gdb.exe",

"setupCommands": [

{

"description": "Enable pretty-printing for gdb",

"text": "-enable-pretty-printing",

"ignoreFailures": false

}

],

"preLaunchTask": "CompileO2"

},

{

"name": "G++",

"type": "cppdbg",

"request": "launch",

"program": " ${fileDirname}/$ {fileBasenameNoExtension}.exe",

"args": [],

"stopAtEntry": false,

"cwd": "${workspaceRoot}",

"environment": [],

"externalConsole": true,

"MIMode": "gdb",

"miDebuggerPath": "C:\\MinGW\\bin\\gdb.exe",

"setupCommands": [

{

"description": "Enable pretty-printing for gdb",

"text": "-enable-pretty-printing",

"ignoreFailures": false

}

],

"preLaunchTask": "Compile"

}

]

}

再次F5，点击配置任务，选择使用模板创建，随便选一个模板。

用以下内容替换tasks.json

{

"version": "2.0.0",

"tasks": [

{

"label": "Compile",

"command": "g++",

"args": [" ${file}", "-o", "$ {fileBasenameNoExtension}.exe"],

},

{

"label": "CompileO2",

"command": "g++",

"args": [" ${file}", "-o", "$ {fileBasenameNoExtension}.exe", "-O2"],

}

]

}

你会看到：

嗯，可以F5调试啦！用GDB的同学可以尝试用以下内容覆盖launch.json和tasks.json

//launch.json

{

"version": "0.2.0",

"configurations": [

{

"name": "GDB",

"type": "cppdbg",

"request": "launch",

"program": " ${fileDirname}/$ {fileBasenameNoExtension}.exe",

"args": [],

"stopAtEntry": false,

"cwd": "${workspaceRoot}",

"environment": [],

"externalConsole": true,

"MIMode": "gdb",

"miDebuggerPath": "C:\\MinGW\\bin\\gdb.exe",

"setupCommands": [

{

"description": "Enable pretty-printing for gdb",

"text": "-enable-pretty-printing",

"ignoreFailures": false

}

],

"preLaunchTask": "Compile"

}

]

}

//tasks.json

{

"version": "2.0.0",

"tasks": [

{

"label": "Compile",

"type": "shell",

"group": {

"kind": "build",

"isDefault": true

},

"presentation": {

"echo": true,

"reveal": "always",

"focus": false,

"panel": "shared"

},

"windows": {

"command": "g++",

"args": [

"-ggdb",

"\"${file}\"",

"-o",

"\" ${fileDirname}\\$ {fileBasenameNoExtension}.exe\""

]

}

}

]

}

然后F5即可！

附：C++补全

来体验一下VSC的强大插件吧！

搜索C/C++ Clang Command Adapter并安装插件

如果你没有安装Clang，那么可以装一个：

Download

然后记得像GDB一样把bin添加到PATH里去。

最后，打开设置，在用户设置里添加如下内容(C++)：

"clang.executable": "clang",

"clang.completion.enable": true,

"clang.cxxflags": [

"-std=c++11",

"-IC:/MinGW/lib/gcc/mingw32/6.3.0/include/c++"

]

嗯，上面的"-IC:/MinGW/lib/gcc/mingw32/6.3.0/include/c++"头文件路径要换成自己的。

还可以用MinGW的头文件？

对，就是有这种操作。

美化VSC

VSC自带多款图标和配色。在插件商店也能找到更多的配色。由于各人口味不同，这里就不安利啦~

（想要Sublime和Atom theme的童鞋们可以安装这两个theme)

我后来换成了One-Dark-Pro，感觉很清爽。

一个简易插件

既然已经说了这么多，我们也不妨探讨一下VSCode的插件是怎么烤出来的……

[Official]Your first VSCode extension

首先当然是安装nodejs辣！

Node.js.org

然后npm install -g yo generator-code

(这个过程巨慢，为了消磨时间，可以把[JLOI2009]神秘的生物切掉……)

yo code既可开始搭建插件。

然后我们输入2选择第二项JavaScript

然后起名字~比如Hello

然后等一会它会提示让你打开创建的插件目录。

附带的markdown文档 (插件：Markdown Preview Enhanced)

如果只是本地做做demo，你会发现这些其实没用，可以删掉。（quickstart里有说test是测试用的）

F5可以调试插件！

在弹出的扩展开发主机中按F1调出命令条并输入Hello World，就可以运行这个插件啦qwq

以上就是VSC编写竞赛代码的基本食用方法，感谢大家阅读本文，也祝大家玩用的愉快~

本文发布于洛谷日报，特约作者：FancyDreams

原文地址：