VS Code 基础教程（一）—— VS Code 的基本使用入门

article/2025/9/22 18:20:50

VS Code 的基本使用入门

本文档是面向西安交通大学电类大一新生编写的VS Code入门介绍，仅供本人向同学、朋友推荐VS Code使用。本文使用中二体编辑，越写到后面越放飞自我，如有错误，还请指正
全文markdown源代码9124字，预计阅读时间 ∞ \infin ∞ （卑微）

文章目录

  • VS Code 的基本使用入门
    • 简介
    • 为什么要用VS Code
    • 安装
    • 开发环境基础配置
      • 插件
      • 文件夹设置
        • 注：
      • settings.json设置
    • Python编程流程
    • 自动补全
        • 总结
    • 快捷键
    • 插件推荐
      • 外观
        • One Dark Pro
        • Bracket Pair Colorize 2
        • Chinese (Simplified) Language Pack for Visual Studio Code
        • indent-rainbow
      • 实用
        • Pylance
        • Code Runner
    • 总结
    • 联系方式

简介

  VS： Visual Studio Code（以下简称VS Code）是微软公司开发的、面向广大程序员的强大的跨平台源代码编辑器。
  VS Code： Visual Studio（VS）是一个基本完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境(IDE)等等。但是对于初学者来说，vs虽然上手就能用，却容易使得我们过于依赖这一强大的IDE，可能会导致我们缺少一些比较底层但是比较重要的知识。另外，vs作为一个完备的开发环境，她也是比较臃肿的，不太符合本人简洁至上的习惯（手动滑稽( •̀ ω •́ )✧
  基于此，这里我们选择VSCode进行使用。

为什么要用VS Code

  自从vs面世之后，她就被冠以了地表最强IDE的名号。这不仅仅是由于她完备的代码开发、调试、管理功能，更是因为她专门为提高编程速度而进行的一系列调整优化。这其中，强大的自动补全功能以及各种功能人性化的快捷键，对提升编程速度，改善编程体验起到了至关重要的作用。
  VSCode则是微软延续了VS的优点，而推出的一款源代码编辑器。除了VS的优点之外，她还：

  • 支持了Linux，在跨平台上迈出了一大步；
  • 更为轻量化，更加方便实用，在任何平台上快速配置环境都更加方便；
  • 独特的插件系统，使得VS Code的功能扩展有了无限的可能性；

安装

  不论是VS抑或是vscode，在Visual Studio官方网站上都有个人免费版本提供下载。下面介绍VS Code的安装。

  1. 下载VS Code最新版(2020-11-24)
  2. 同意使用政策后，看到如下界面，将所有复选框选中
    vscode-install-1
  3. 然后就可以愉快的无脑下一步了~~

开发环境基础配置

  正如上文所述，VS Code属于一种源代码编辑器，说白了本质上就是一种看起来很NB高级的Notepad。要想使得VS Code能够实现VS的大部分功能，需要根据语言进行一系列环境配置。
  下面，我将以python为例，从插件、文件夹设置、settings.json两个方面简述如何配置一套顺手的python开发环境。

插件

  VS Code的功能扩展是以插件的形式体现的，这使得她的功能灵活而多样。

通常，我们配置python的编程环境，需要：

  1. 从官网下载python39，并执行安装；
  2. 在VS Code左侧第五个选项卡(扩展)中，搜索：python，并点击第一个选项：

python-extension-1

  1. 通常，搜索某种语言（类似python、C++），第一个扩展会是Microsoft官方开发的插件

python-extension-2

  1. 我们点击安装按钮安装即可

文件夹设置

  我们电气专业未来将要接触控制方向的软件设计，从刚接触编程开始就养成一个良好的文件管理习惯是十分有必要的。

下面我们通过VS Code内置终端进行文件夹的基本设置

  1. 在VS Code内按下Ctrl+`来打开VS Code内置终端；
  2. 在终端内输入cd d:\来进入D盘根目录；
  3. 输入mkdir Workspace在当前目录下创建Workspace文件夹（这将成为我们日后的工作空间）；
  4. cd .\Workspace\进入该文件夹；这里讲一个小技巧：键入cd .\wor之后，直接按下键盘上的Tab键，就可以自动补全目录了
  5. 按照上面的步骤，继续在Workspace下建立python文件夹，并在python文件夹内部建立helloworld文件夹，并进入该文件夹；
  6. code .\在vscode中打开该目录；
  7. 至此，基础的文件夹设置就完成了。

注：

  • 上述操作命令在cmd中也是适用的，其中各个命令的含义是：
    • cd somedir 进入某个文件夹；
    • mkdir somedir 新建一个文件夹；
    • .\ . 代表当前目录；相对应的，..\代表上一级目录
  • 上述建立文件夹的操作可以在我们熟悉的资源管理器内完成，但是熟悉终端操作可以大大节省时间，提高工作效率。
  • 我们按照 “工作空间->语言->项目” 的顺序构建了文件夹，但这只是我的个人习惯，你也可以根据你自己的习惯构建文件系统；

settings.json设置

  vscode自定义化的程度很高，一般设置可以通过两种方式进行设置：设置界面、settings.json文件。本教程将简单介绍如何通过settings.json进行设置
  VS Code规定了settings.json文件的路径： .\.vscode\settings.json ，即VS Code打开的文件目录下 .vscode 文件夹中。
  json的标准格式是：

{ "keyA": "valueA",  "keyB": "valueB"
}

  我们作为初学者，了解一些简单的配置参数即可。这里贴出一个简单的例子：

{"files.defaultLanguage": "python",  // 设置新建文件的默认语言为python"editor.formatOnSave": true,        // 在保存时自动将文档格式化"editor.tabSize": 4                 // 按下Tab键时缩进空格数（此参数默认为4，python下可以不用设置
}

如果想要了解更多，可以查看VS Code官方网站进行更深⚦入的学习。

Python编程流程

那么，我们如何使用VS Code进行python编程呢？我们通过一个简单的helloworld程序进行示例

  1. 按下Ctrl+N，新建一个文件；
  2. 按下Ctrl+S，将文件命名为helloworld.py，并保存在helloworld目录下（如果你settings.json中已经配置过"files.defaultLanguage": "python"，则输入文件名的时候可以省略扩展名（.py）；
  3. 在helloworld.py中键入：
print('helloworld')
  1. Ctrl+S保存，在终端中输入：
python helloworld.py
  1. 然后就可以在终端中看到程序的输出：
helloworld

自动补全

  vscode自动补全是十分强大的，它包括了：

  • 括号(包括() [] {}等)
  • 变量名补全
  • 关键字补全
  • 结构补全

  下面通过一个求阶乘的简单例程举例说明如何使用自动补全。

  1. 首先，你非常普通的定义了一个供用户输入的变量
number = int(input('please input the numberヾ(≧▽≦*)o: '))
  1. 然后，我们在上面定义一个普通的函数，用来计算阶乘；这时，你

敲下了DEF

  然后，奇迹发生了！
auto-def-1
3. 紧随你的def后面，出现了一个黑框框，不知是谁悄咪咪的告诉了你：

按下Tab吧，靓仔！

  你惊奇的发现，一个完整的函数结构出现了！
  auto-def-2
4. 你发现函数名称funcname已经被选中了，所以你

直接输入了变量名factoriol，按下Tab
跳转到parameter_list的同时选中了它，你顺手写上了参数num
你就这样通过Tab快速切换，敲好了一个函数的雏形

def factoriol(num):"""this is a smple function, and I'm a docstring."""pass
  1. 之后，你

删掉了pass

  这个无用的家伙

写下了
sum = 1
for

  这时，奇迹又一次降临了！
  auto-for-1
6. 你敏锐的察觉到如下对应关系：

IconMeaning
keyword系统关键字
structure结构
function] 函数
class] 类
variate] 变量

  所以你

按下了↓，选择了第二个，然后按下了Tab

  不出所料，出现了跟def补全类似的结构
  auto-for-2
7. 有了上一次的经验，你

迅速的完成了for循环

for i in range(1, num + 1):ans *= i

  然后写下

ret

  这时你已经对自动补全见怪不怪，熟练地按下tab，完成了

return sum
  1. 你已经对VS Code的自动补全基本熟悉了，优雅的敲完了整段程序：
def factoriol(num):"""this is a smple function, and I'm a docstring."""ans = 1for i in range(1, num + 1):ans *= ireturn ansnumber = int(input('please input the numberヾ(≧▽≦*)o: '))
print(f'the result is {factoriol(number)}')

总结

  回顾这个简单的小程序，你会发现：
  通过几个简单的Tab，你在这短短12行程序中至少少敲击了25次键盘！
  不难想象，将来在稍微复杂一点的程序中，VS Code的自动补全可以帮你简单的完成：

  • 重复的变量调用；
  • 重复的for循环等结构；
  • 重复的函数调用；

  甚至有的时候，它还能起到指导你的作用 （比如在刚刚的例程中你第一次知道了还有函数说明——docstring这种东西的存在）
  因此，熟练的掌握VS Code的使用，无疑会使得你编程速度和水平一点点稳步提高，甚至会让你爱上编程。（个人建议还是别爱上编程了，容易变成单身的技术死宅。当然，小姐姐除外(～￣▽￣)～）

快捷键

  快捷键是让人爱不释手的基本工具，有了它，你在编程是甚至不需要鼠标，就能随心所欲的操作代码。下面列出一些我常用的快捷键

快捷键功能
F2重命名
F11全屏
Ctrl+C复制当前行/选中内容
Ctrl+V黏贴当前行/选中内容
Ctrl+F查找
Ctrl+H替换
Ctrl+Z撤销
Ctrl+Y重做
Ctrl+D选中当前半高亮内容（多次点击可选中下一个匹配的半高亮内容）
Ctrl+N新建文件
Ctrl+Shift+N打开新的VS Code编辑器窗口
Ctrl+W关闭当前页面
Ctrl+Shift+W关闭当前窗口
Ctrl+[/]代码向左/右缩进
Alt+↓/↑向上/下移动当前行
Shift+Alt+↓/↑向上/下复制当前行
Ctrl+Enter在当前行下方插入一行
Ctrl+Shift+Enter在当前行上方插入一行
Shift+Alt+鼠标左键
Ctrl+Shift+↓/↑		多行编辑

  这些只是一小部分VS Code的快捷键，仅代表我个人经常使用的快捷键。若想了解更多快捷键，请按下Ctrl+K,Ctrl+R下载官方pdf查看。
  另外，不是所有的快捷键都必须掌握，快捷键只是为了提升我们的编码效率，提升编码体验的，用多少快捷键，用什么快捷键，完全取决于个人喜好。

插件推荐

  上文提到，vscode的插件功能是及其强大的，它可以实现许多提升编程体验的功能。下面是我认为比较舒服的插件。
  安装方法参考上文python插件的安装方法。
  我要是说我懒得配图了会不会挨打QAQ

外观

One Dark Pro

  vscode的外观是由主题插件自定义的，这个插件就可以让你的VS Code外观变得与众不同

Bracket Pair Colorize 2

  这是嵌套括号彩色插件，它使得不同层级的嵌套括号以不同的颜色显示，能轻易地让你分清括号间的层级关系。

Chinese (Simplified) Language Pack for Visual Studio Code

  这个就不用多说了吧，懂得都懂(づ￣ 3￣)づ。

indent-rainbow

  该插件能将不同层级的缩进 （敲一下Tab就有啦） 用彩色标示出来，这对于python这种用缩进确定代码层级关系的语言尤为有用。

实用

Pylance

  这是微软出品的python语言服务器，能增强python的自动补全功能，还有许多我们用不到的高级功能 （笑

Code Runner

  这是一款允许你运行部分代码的插件，选中你想运行的代码之后右键单击，第一个选项 Run Code 就是啦。你也可以通过快捷键Ctrl+Alt+N快速执行。

总结

  本文档看起来像是一片巨细无遗的指导文档，然而实际上却是我自己用来复习和学习的一个笔记。我的技术性文档才刚刚起步，不足之处还请多包含。
  VS Code这款编辑器足够强大，扩展性足够高，这一特性使得她成为了我的唯一编辑器。不论是python、C、C++、HTML/CSS/JS，还是Arduino、markdown、LaTex，我都会用这款编辑器来进行编写。因此，我只需要学习这一款编辑器的用法，就可以处理大部分的编程任务，这无疑大大减少了我的多语言学习成本。甚至本文档都是在VS Code内用markdown编写的。
  另外，对于编程能力的提升，我认为最好的方法就是————实践。无论是什么语言，能够快速提升代码能力的唯一方式就是实践。在实践中，才会发现一系列实际问题，才会四处搜寻资料或者询问他人，才能一步步成长。
  本文档介绍的VS Code使用方法只是冰山一角，许多目前我们暂时用不到、而十分重要的功能我都没有进行介绍。（例如调试相关操作）
  这款强大的开发工具还有更多实用的功能等待你的探索。

联系方式

答疑用QQ号：
 3578974183
Blog:
 https://blog.ccandle.top/


http://chatgpt.dhexx.cn/article/XCs6P1FH.shtml

相关文章

VSCode使用详细教程

VSCode使用详细教程

VSCode使用详细教程 1.VSCode下载 VSCode下载链接: https://code.visualstudio.com/ 2.VSCode汉化 3.VSCode常用插件(安装步骤同汉化) 3.1 Auto Close Tag (自动闭合HTML/XML标签) 3.2 Auto Rename Tag (自动完成另一侧标签的同步修改) 3.3 Beautify (格式化 html ,js,css) 3.4…
阅读更多...
vscode全网最详细使用教程

vscode全网最详细使用教程

vscode下载地址 官网下载：https://code.visualstudio.com/或者直接点击**我的资源**下载 VScode使用教程 安装教程 鼠标左键双击，即可运行安装程序 一：同意协议 二：选择安装路径 很明显可以看到VSCode的默认安装路径为C:…
阅读更多...
VScode 详细教程

VScode 详细教程

一、VScode 安装 VScode 官网地址：https://code.visualstudio.com/ 你也可以打开下载页面 https://code.visualstudio.com/download，下载想要的格式包： 安装过程较为简单，略过。 二、界面说明 以下是 VScode 启动后的界面&…
阅读更多...
VSCode 入门操作大全 + 实用插件推荐【零基础专属详细教程】

VSCode 入门操作大全 + 实用插件推荐【零基础专属详细教程】

📀 前言： 🎫 选择一个好的开发工具很重要，很多刚学编程的小伙伴在 webstorm 和 vscode 上很难抉择，我个人更喜欢使用 vscode，因为其有着简洁的操作风格和丰富的人性化的各种功能，这篇文章带给大…
阅读更多...
前端基础从头学——VsCode使用教程+html基础（入门篇）

前端基础从头学——VsCode使用教程+html基础（入门篇）

作者简介：hello！大家好，初学前端知识，请多多指教。 希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~ 文章目录 前言 一、VsCode编辑器使用教程1、VsCode的下载与安装…
阅读更多...
VScode使用教程（菜鸟版）

VScode使用教程（菜鸟版）

1.VScode是什么？ Visual Stdio Code简称VS Code，是一款跨平台的、免费且开源的现代轻量级代码编辑器，支持几乎 主流开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段提示、代码对比等特性，也拥有对…
阅读更多...
Visual Studio Code 入门教程

Visual Studio Code 入门教程

一、入门教程 1.1 简介 Visual Studio Code ，简称 VSCode。它是一款由微软开发且跨平台的轻量级但功能强大的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题…
阅读更多...
PyTorch 手把手教你实现 MNIST 数据集

PyTorch 手把手教你实现 MNIST 数据集

PyTorch MNIST 实现 概述获取数据网络模型train 函数test 函数main 函数完整代码 概述 MNIST 包含 0~9 的手写数字, 共有 60000 个训练集和 10000 个测试集. 数据的格式为单通道 28*28 的灰度图. 获取数据 def get_data():"""获取数据"""# 获取…
阅读更多...
连续学习入门（三）：Permuted MNIST/Split MNIST/Sequential MNIST 数据集

连续学习入门（三）：Permuted MNIST/Split MNIST/Sequential MNIST 数据集

说明：本系列文章若无特别说明，则在技术上将 Continual Learning（连续学习）等同于 Incremental Learning（增量学习）、Lifelong Learning（终身学习），关于 Continual Learni…
阅读更多...
导入mnist数据集

导入mnist数据集

下载一个代码后，发现需要导入mnist数据集，首先新建一个py的文件，把代码复制过来，然后记得一定要改成这样的格式： from tensorflow.examples.tutorials.mnist import input_data mnist input_data.read_data_sets(MNI…
阅读更多...
【MNIST】

【MNIST】

1. Normal Neural Network： 首先我用的是两层（input layer 和 output layer）的feed-forward的神经网络结构来训练数据, y wx b, 在输出层用的是softmax求概率，算loss用的是交叉熵的办法，选用梯度下降法来最小化loss…
阅读更多...
MNIST数据集使用详解

MNIST数据集使用详解

数据集下载网址：http://yann.lecun.com/exdb/mnist/ 下载后无需解压，将其放在一个文件夹下即可： 数据说明： 数据集常被分为2~3个部分 训练集(train set)：用来学习的一组例子，用来适应分类器的参数[即权重]…
阅读更多...
详解 Pytorch 实现 MNIST

详解 Pytorch 实现 MNIST

MNIST虽然很简单，但是值得我们学习的东西还是有很多的。 项目虽然简单，但是个人建议还是将各个模块分开创建，特别是对于新人而言，模块化的创建会让读者更加清晰、易懂。 CNN模块：卷积神经网络的组成；trai…
阅读更多...
十分钟搞懂Pytorch如何读取MNIST数据集

十分钟搞懂Pytorch如何读取MNIST数据集

前言 本文用于记录使用pytorch读取minist数据集的过程，以及一些思考和疑惑吧… 正文 在阅读教程书籍《深度学习入门之Pytorch》时，文中是如此加载MNIST手写数字训练集的： train_dataset datasets.MNIST(root./MNIST,trainTrue,transform…
阅读更多...
torchvision中datasets.MNIST介绍

torchvision中datasets.MNIST介绍

用法介绍 torchvision中datasets中所有封装的数据集都是torch.utils.data.Dataset的子类，它们都实现了__getitem__和__len__方法。因此，它们都可以用torch.utils.data.DataLoader进行数据加载。以datasets.MNIST类为例，具体参数和用法如下所示…
阅读更多...
万物皆用MNIST---MNIST数据集及创建自己的手写数字数据集

万物皆用MNIST---MNIST数据集及创建自己的手写数字数据集

刚刚接触到人工智能的我们，必定会遇到一个非常非常非常熟悉的朋友------MNIST 这是一套流行的手写数字图片，常常被用来测试我们的思想和算法。这个数据集称为手写数字的MNIST数据库，从研究员Yann LeCun 的网站，可以得到这个…
阅读更多...
Pytorch 之 MNIST 数据集实现

Pytorch 之 MNIST 数据集实现

目录 1. 数据集介绍2. 代码2. 读代码（个人喜欢的顺序）2.1. 导入模块部分：2.2. Main 函数： 1. 数据集介绍 一般而言，MNIST 数据集测试就是机器学习和深度学习当中的＂Hello World＂工程。几乎是所…
阅读更多...
MNIST数据集手写数字识别（CNN）

MNIST数据集手写数字识别（CNN）

🔎大家好，我是Sonhhxg_柒，希望你看完之后，能对你有所帮助，不足请指正！共同学习交流🔎 📝个人主页－Sonhhxg_柒的博客_CSDN博客 📃 🎁欢迎各位→点赞…
阅读更多...
MNIST数据集详解及可视化处理（pytorch）

MNIST数据集详解及可视化处理（pytorch）

MNIST数据集详解及可视化处理（pytorch） MNIST 数据集已经是一个被”嚼烂”了的数据集, 作为机器学习在视觉领域的“hello world”，很多教程都会对它”下手”, 几乎成为一个 “典范”。 不过有些人可能对它还不是很了解, 下面来介绍一下。 MN…
阅读更多...
Mnist数据集介绍

Mnist数据集介绍

Mnist数据集已经是一个被"嚼烂"了的数据集了，很多关于神经网络的教程都会对它下手。因此在开始深度学习之前，先对这个数据集介绍一下。 Mnist数据集图片格式介绍 Mnist数据集分为两部分，分别含有60000张训练图片和10000张测试图片…
阅读更多...
推荐文章

Copyright @ 2022~2023