VScode 基础使用教程

VScode 的安装以及使用基础(C++配置)


经过多次反复安装VScode的经验,本文于 2023.7.18 进行了整改。


由于配置 VScode 所需东西较多,每次都逐一下载稍微繁琐,这里作者为大家已经整理好了,里面包含下文所需的所有资源。

点这里下载 VScode 安装资源包


VScode 的安装

进入VScode官网,点击 Download for windows 即可得到安装程序,运行即可。

VScode 基础使用教程_第1张图片


编译器G++的配置

下载 MinGW,将其保存至任意磁盘中(下面默认C盘)。将 MinGW 下的 bin 文件夹的路径加入到环境变量中。 zUBu6S.png

右键“此电脑”选择属性,点击“高级系统设置”

VScode 基础使用教程_第2张图片

点击“环境变量”

VScode 基础使用教程_第3张图片

点击“系统变量”一栏中的 “Path”

VScode 基础使用教程_第4张图片

点击新增,将之前保存的路径(bin 文件路径)输入进去即可

VScode 基础使用教程_第5张图片

操作完毕后,重启电脑 即可。


如果不方便重启电脑或者其他什么情况的话,也可以用更简单的方式设置这个环境变量。
新建一个后缀名为 “bat” 的文件,里面写入 setx "Path" "保存的路径;%path%;"。然后运行这个 bat 文件就可以设置好环境变量。

VScode 基础使用教程_第6张图片


VScode 简体中文设置

按 ctrl+shift+P,搜索 language ,点击第一条,然后点击简体中文即可。

另一种方法是在扩展商店中搜索 Chinese 后安装。

zURl0f.png


VScode 中C++的配置

进入 VScode,点击扩展

zUBU6U.png

分别搜索并安装以下三个插件

VScode 基础使用教程_第7张图片

其中进入 C/C++ Compile Run 插件的页面,找到扩展设置

VScode 基础使用教程_第8张图片

翻到页面底部,勾选一下三条

VScode 基础使用教程_第9张图片


在 VScode 中编辑C++代码

点击 文件->新建文件

zUR178.png

输入程序保存的名称(加上编辑文件的后缀名,如果写得是 C++ 就是 cpp )

VScode 基础使用教程_第10张图片

创建后即可开始编写。

VScode 基础使用教程_第11张图片

点击 F8 或右上角三角形运行程序。

VScode 基础使用教程_第12张图片

恭喜你已经成功学会了 VScode 的 C++编写基础了!!


VScode 进阶配置

可以发现,VScode 自带一个无比庞大的插件商店,他们是在 VScode 上实现魔法的精髓。


VScode 界面个性化设置

颜色主题

点击左下角管理,选择颜色主题,然后就可以根据自己的喜好找到合适的主题颜色了(本人还是喜欢默认深色)

背景图片

这个功能貌似是最吃香的?

我们在扩展商店(左侧栏第五个)搜索 background-cover ,下载并安装。

zUR0BV.png

然后重新打开 VScode ,我们可以发现左下角多出了一个“切换背景图片”

zURrAU.png

然后根据自己的需求设置即可。

VScode 基础使用教程_第13张图片

成效展现:

VScode 基础使用教程_第14张图片


VScode 的更多功能

VScode 的强大远不止于此。


实现 Markdown 编辑功能

下载以下两个插件

VScode 基础使用教程_第15张图片

然后我们就可以在 VScode 中实现 Markdown 编写。与编写C++的方法类似,按同样的方法先新建一个文件,将后缀名改为 .md

zUWVbV.png

然后就可以开始 Markdown 编写

VScode 基础使用教程_第16张图片

右上角有一个zUWmUU.png 可以进行编辑的实时预览。

VScode 基础使用教程_第17张图片


VScode 测试样例

安装插件后

VScode 基础使用教程_第18张图片

左侧栏会新增 CPHjudge,点击即可添加数据进行测试。

VScode 基础使用教程_第19张图片

按运行键即可测试数据

VScode 基础使用教程_第20张图片


更改插件保存位置

如果你是 Oier,那么机房的C盘大概率会关机后重置,然而 VSCODE 的插件是默认装在 C 盘的,已关机之后插件都没有了,岂不是非常不好?我们依旧可以自定义插件安装的位置。

打开 VScode 文件所在位置,为 code.exe 文件创建快捷方式。
然后在右键打开快捷方式的属性,在“目标”一栏后写入--extensions-dir "插件保存的路劲",即可修改插件保存路径。

VScode 基础使用教程_第21张图片

你可能感兴趣的:(vscode,ide,编辑器)