--AutoLeaders--2023全栈组系列教程 第3章 VSCode配置指南

VSCode,全称 Visual Studio Code,是微软研发的一款轻量级 IDE(注意不要和 VS ,也就是 Visual Studio 弄混了。它们都是微软旗下的 IDE,属于兄弟关系,但并不是同一个产品)

组长很喜欢 VSCode,不过我也不想过分去吹它。如果已经安装并使用过一段时间 PyCharm 的同学,没有必要安装 VSCode 进行接下来的学习,因为 Web APP 的开发完全可以使用 PyCharm 来完成。如果之前学习 Python 基础时使用的是 Jupyter Notebook 或者 IDLE,那组长建议你安装 VSCode(当然 PyCharm 也可以,甚至是 Notepad++、Atom 等,只要能进行 HTML/CSS 和 JS 开发即可

VSCode 非常受欢迎,因为它几乎支持所有的主流编程语言,并且拥有大量丰富且好用的扩展。如果你除了 Python 开发,还有其它编程语言想要学习,如 C/C++,那 VSCode 会是一个很好的选择。接下来组长将会带大家一步一步完成 H5C3 + JS、Python、C/C++ 的环境配置

参考视频:(可以跟着视频安装,也可以跟着我的文章安装)

【『教程』VsCode五分钟上手教程 无一句废话】

【在VSCode搭建C/C++环境【秒杀Visual C++/Dev C++]】

第三章 目录

3.0 VSCode 安装与基本配置

3.0.1 下载与安装

3.0.2 建立工作区

3.0.3 安装常用扩展

3.1 VSCode 配置前端开发环境

3.2 VSCode 配置 Python 环境

3.2.1 安装 Python 解释器

3.2.2 安装 Python 扩展

3.2.3 配置 Python 解释器

3.3 VSCode 配置 C/C++ 环境

3.3.1 安装 MinGW

3.3.2 配置环境变量

3.3.3 安装 C/C++ 扩展

3.3.4 安装 Code Runner 扩展

3.3.5 解决中文输出乱码的方法


3.0 VSCode 安装与基本配置

3.0.1 下载与安装

1、下载 VSCode 安装包

【VSCode 官网】  推荐到微软官方网站进行下载,可以点击右上角下载,也可以点中间的大按钮

下载完成后在下载路径找到 VSCode 的安装包,准备进行安装

2、安装 VSCode

【施工中】

3.0.2 建立工作区

1、在D盘或E盘之类的空闲盘符新建文件夹,命名为 MyCode (或者其他你喜欢的名字)

2、打开 MyCode 文件夹,在再其中新建3个文件夹,命名为 FrontEnd、Python、Cpp

3、什么是工作区

VSCode 是一个轻量级的 IDE,许多强大的功能都是基于扩展实现的。然而,多语言开发的场景下,有些扩展是没有必要一直开着的。例如我在进行python开发时就没有必要打开C语言的扩展,因为会造成资源的浪费。甚至有些扩展会相互冲突,使得 IDE 崩溃。

那怎么办呢?工作区出手了,它记录了你的扩展设置,可以实现:在一号工作区打开C语言扩展,关闭python扩展;在二号工作区打开python扩展,关闭C语言扩展。于是实现了多个开发环境相互隔离、互不干扰的功能。

那么如何打开一个工作区呢?上面让大家创建的三个文件夹,都可以作为工作区来使用。我们随便进入一个文件夹,鼠标右键,可以看到【使用 Code 打开】选项(win11的同学可能要在[更多]里面找)

此时就会发现这个文件路径就成为了一个【工作区】,我们在这里对扩展、配置文件进行的修改都会被记录。注:点击桌面上的 VSCode 快捷键,会进入最近一次打开过的工作区。

对于扩展管理,组长的建议是这样的:在安装一个没必要全局开启的新扩展时,将其设置为【全局禁用】,然后在需要使用这个扩展的工作区进行【启用(工作区)】的操作。当然了,有一些扩展(例如中文语言包扩展)是不需要这样操作的,大家在使用过程中自行决定。

3.0.3 安装常用扩展

在 VSCode 的窗口左侧找到下图所示的按钮,点击它即可进入扩展商店

1、中文语言包

点开扩展商店,在搜索栏输入"chinese",找到下图所示的扩展,点击安装。安装完成后可能会弹出重启请求,此时重启 VSCode,即可激活中文语言包

2、暗色主题推荐:Dracula Official

程序员一般青睐美观且颜色区分明显的主题,这里推荐 Dracula Official 主题,在扩展商店搜索"Dracula"即可找到

3.1 VSCode 配置前端开发环境

用 VSCode 打开之前建立的 FrontEnd 文件夹,然后可以参考我之前写的这篇博客进行前端环境的配置

【配置VsCode,让您拥有更舒适的开发环境】

前端环境的配置是最简单的,只要你的电脑上有浏览器即可,其中内置了前端语言的解释器,即 HTML/CSS/JS 的解释器。(推荐使用Chrome或FireFox,360浏览器、搜狗浏览器之类的国产垃圾最好不要用)

可参考某乎回答:

3.2 VSCode 配置 Python 环境

3.2.1 安装 Python 解释器

如果已经跟着前面的教程安装了 Anaconda,可以跳过此步骤。如果没有安装Anaconda,可以参考【第1章 Python环境的安装与配置】1.2.1 部分,这里就不在重复一遍 Anaconda 的安装过程了

3.2.2 安装 Python 扩展

用 VSCode 打开之前建立的 Python 文件夹,在扩展商店搜索 "python",找到下图的扩展,安装即可

然后搜索"jupyter",安装下图的扩展,这个扩展能让 VSCode 打开 .ipynb 文件

安装完成后记得设置为【全局禁用】、【在工作区启用】

3.2.3 配置 Python 解释器

【施工中】

3.3 VSCode 配置 C/C++ 环境

配置 C 语言环境是比较麻烦的,步骤多且易出错,请耐心、细心地完成每个步骤。也可以广泛地参考互联网的各个教程,组长大一上自己捣鼓着配置这个环境,花了整整一个星期hhh。虽然任务艰巨,但希望大家不要畏难。

3.3.1 安装 MinGW

MinGW 是一个轻量级的C语言编译器,C/C++代码需要经过它的编译才能成为能够运行的可执行文件。

MinGW-18.0下载链接icon-default.png?t=N7T8https://nuwen.net/files/mingw/mingw-18.0-without-git.exe点击上述链接可直接下载MinGW-18.0

下载后,应该能在下载路径中找到这个名字叫 mingw-18.0-without-git.exe 的安装包,点击它

接下来会弹出一个窗口,让你选择安装路径,这里注意路径中不要有中文。然后这里设置的安装路径要记住,待会 配置环境变量进行扩展设置 时要用到。

然后点击【Extract】就会开始安装了,等待进度条走完即可

3.3.2 配置环境变量

参考 【第1章 Python环境的安装与配置】1.2.3 部分,打开以下配置界面

双击系统变量中的 Path 变量,会弹出一个窗口,此时在其中添加一条环境变量

添加:
{安装路径}\MinGW\bin

将 {安装路径} 替换为步骤 3.3.1 中设置的路径
例如我安装时设置的路径是 C:\
那我就要增加一条值为 C:\MinGW\bin 的环境变量

之后打开 cmd,输入 gcc --versiong++ --version ,如果正常输出了 gcc 和 g++ 的版本信息,就说明环境变量配置无误,且 MinGW 的安装没有问题

3.3.3 安装 C/C++ 扩展

用 VSCode 打开之前建立的 Cpp 文件夹,即进入 C/C++ 语言的工作区

在扩展商店中输入 "C",找到如下扩展,安装完成后,将会连带着将 C/C++ CMake 等C语言编译扩展也给安装了,很方便

再次啰嗦:安装完成后记得设置为【全局禁用】、【在工作区启用】

安装完成后还要进行扩展设置,在已安装扩展中找到 C/C++,点击右下方的齿轮标志,然后选择【扩展设置】

在其中找到配置项:Compiler Path,点击下方的 在 settiongs.json 中编辑

然后就会进入 setting.json 文件,关于这个文件是做什么的,可以参考这篇文章【.vscode 文件夹是什么,里面有什么?】

打开这个文件后,在下图所示配置项中输入你的 gcc.exe 的路径

什么?你问我这个路径在哪?在你的 MinGW 安装路径中的 MinGW\bin\gcc.exe,例如我的安装路径是 C:\,那gcc路径即为 C:\MinGW\bin\gcc.exe,填写时记得将 \ 改为 \\

3.3.4 安装 Code Runner 扩展

C/C++ 源代码每次都要先编译成可执行文件才能运行,很麻烦。Code Runner 可以解决这个问题,它是一个快速测试源代码的扩展,提供多种编程语言的支持。

在扩展商店中搜索"code"即可找到该扩展,点击安装即可

安装完成后,我们进入它的设置页面,找到 Run in Terminal,勾选。该选项能让 Code Runner 在运行 C/C++ 程序时在终端执行代码,更符合实际开发场景(当然你不勾选也是可以的,这样子的话代码会在 [输出] 栏中运行)

3.3.5 解决中文输出乱码的方法

先说结论,乱码的根本原因是 GBKUTF-8 的冲突,大一应该会有一节课叫作《大学计算机基础》,里面会说到字符编码的知识点。

在中国区,windows系统会默认将输入法与控制台的字符集配置为 GBK 编码,然而,VSCode 可能会将源文件的字符集设置为 UTF-8,我们可以通过编辑器页面的右下方查看当前使用的字符集

那要如何解决?这里给出两种方案,各有优劣。

1、更改 C/Cpp 源文件编码为 GBK

优点:操作简单迅速

缺点:当前许多应用场景都使用 UTF-8,可能会导致编译出来的可执行文件在其他环境下发生乱码

【施工中】

2、更改控制台显示字符集为 UTF-8

优点:保持源文件使用兼容性更好的 UTF-8

缺点:操作复杂,且使用 std 的时候会有坑

【施工中】

下一篇 【HTML与CSS】

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值