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

VS Code 的基本使用入门

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

简介

  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. 同意使用政策后，看到如下界面，将所有复选框选中
   
3. 然后就可以愉快的无脑下一步了~~

---

开发环境基础配置

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

插件

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

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

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

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

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

文件夹设置

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

下面我们通过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')

4. Ctrl+S保存，在终端中输入：

python helloworld.py

5. 然后就可以在终端中看到程序的输出：

helloworld

---

自动补全

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

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

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

1. 首先，你非常普通的定义了一个供用户输入的变量

number = int(input('please input the numberヾ(≧▽≦*)o: '))

2. 然后，我们在上面定义一个普通的函数，用来计算阶乘；这时，你

敲下了DEF

  然后，奇迹发生了！

3. 紧随你的def后面，出现了一个黑框框，不知是谁悄咪咪的告诉了你：

按下Tab吧，靓仔！

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

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

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

5. 之后，你

删掉了pass

  这个无用的家伙

写下了
sum = 1
for

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

Icon	Meaning
	系统关键字
	结构
	函数
	类
	变量

  所以你

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

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

迅速的完成了for循环

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

  然后写下

ret

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

reuturn sum

8. 你已经对VS Code的自动补全基本熟悉了，优雅的敲完了整段程序：

def factoriol(num):
    """
    this is a smple function, and I'm a docstring.
    """
    ans = 1
    for i in range(1, num + 1):
        ans *= i
    return ans


number = 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号：
 Day_Dreamer: ( 3578974183 )
个人Blog:
 https://blog.ccandle.top/