简介

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. 同意使用政策后,看到如下界面,将所有复选框选中

vscodeInstall_1

  1. 然后就可以愉快的无脑下一步了~~

开发环境基础配置

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

插件

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

通常,我们配置python的编程环境,需要:

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

extension-python-1

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

extension-python-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')
  4. Ctrl+S保存,在终端中输入:
    python helloworld.py
  5. 然后就可以在终端中看到程序的输出:
    helloworld

自动补全

vscode自动补全是十分强大的,它包括了:

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

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

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

敲下了DEF

然后,奇迹发生了!
auto-def

  1. 紧随你的def后面,出现了一个黑框框,不知是谁悄咪咪的告诉了你:

按下Tab吧,靓仔!

你惊奇的发现,一个完整的函数结构出现了!
auto-def-2

  1. 你发现函数名称funcname已经被选中了,所以你

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

auto-def-3

  1. 之后,你

删掉了pass

这个无用的家伙

写下了
sum = 1
for

这时,奇迹又一次降临了!
auto-for-1

  1. 你敏锐的察觉到如下对应关系:
    >

    |Icon|Meaning|
    |:—-:|:—-:|
    |ketword |系统关键字|
    |structure |结构|
    |function |函数|
    |class |类|
    |variate |变量|

    所以你

按下了,选择了第二个,然后按下了Tab

不出所料,出现了跟def补全类似的结构
auto-for-2

  1. 有了上一次的经验,你

迅速的完成了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 = 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使用方法只是冰山一角,许多目前我们暂时用不到、而十分重要的功能我都没有进行介绍。(例如调试相关操作)
这款强大的开发工具还有更多实用的功能等待你的探索。