VSCode 布道指南 V1.0 (二)

大家好,欢迎来到“布道”指南的第二期。首先解释下,标题中的“布道”毫无任何宗教元素,只是来自和朋友间的玩笑,换句话说,理解成“你听说 安利 么”就成。

解决问题

我的 VSCode 布道指南第二期,首先解决一些朋友们在实际使用中遇到的问题。

比如某一天,HHH 突然告诉我:“‘你的‘ VSCode 炸了!”

首先,我的 VSCode 用得好好的,最多是‘你的‘ VSCode 炸了好不好。然后,VSCode 原来还有爆炸这项技能?

据身处一线的消防战士所说,当时的爆炸现场是这样的:

嗯,原来是编码爆炸了

大致就是这样的,稍微有点不一样的是我这里用 GBK 编码打开了 UTF-8 编码的中文文件。而当时的情况是她刚用 VSCode 打开了某个使用 GBK 编码的中文文件,因为 VSCode 默认的编码方式是 UTF-8 ,所以产生了中文乱码的情况。

关于编码的问题,这里篇幅有限(估计大部分人也不感兴趣)就不多讨论了,读者所需知道的就是:今天新建的文件,都应该使用 UTF-8 这种现代,成熟的编码方式。UTF-8 可以支持世界上所有的语言编码,基本不会出现乱码的情况。

但如果你在维护一份上年头的代码,代码难以避免使用的是 GBK,GB2302 这一类过去的中文编码方式。(吐槽一下:ARM Keil 对于中文编码的处理真是坑爹啊)VSCode 对于编码方式的充分支持也能帮你搞定这些历史遗留问题。

如何使用不同的编码打开文件

目光放到界面的右下角:

UTF-8 代表当前使用的编码方式。顺带介绍下:CRLF 代表当前的换行方式使用的是 Windows 的换行:使用 \r\n 代表换行。Verilog 代表当前的代码语言。

点击 UTF-8  界面上方会出现

VSCode 支持的编码方式很多,拉到菜单中部可以找到中文的编码方式。

GBK 或者 GB18030 是两种中文编码方式,一般能够解决中文乱码的问题。

自动识别编码

就中文乱码这个问题而言,有更优雅的解决方式。文件-首选项-设置,在搜索框中搜索编码,即可以设置在打开文件时自动识别编码类型,或者更改默认编码方式。

用户代码片段

言归正传,让我们来说说上期结尾预告的用户代码片段。

以笔者自己经常写的 Verilog 语言为例,来了解一下用户代码片段的用处,Verilog 在同步设计中需要大量的 always 块,用来表示一个时序数电电路。

同时也会使用到大量 begin...end 块用来表示其中的代码顺序执行。一个个手打岂不是很麻烦,安装 Verilog 语言插件能给用户省下不少事。在安装完插件后,除了能提供语法高亮的功能以外,当你打出 al 时,编辑器能够提供一个完整的 always 块外壳,在按回车或者 TAB 键之后。

生成 always 块后,再使用 TAB 键还可以在几个需要填充的区域切换(下图中有竖线的地方)

当然还少不了 begin 块

这个功能还是相当好用的,归根结底其实是 Verilog 插件通过 VSCode 的用户代码片段功能实现的。如果你对插件提供的片段不满意(比如我就对插件提供的 always 块换行后只缩进两格就很不满意)或者有自己独特的功能需求,就可以添加自己的用户代码片段。

设置自己的用户代码片段

用户代码是以语言为单位进行管理的,存储在 Verilog(/python/...).json 中,第一次设置需要创建这个文件。文件-首选项-用户代码片段,打开后可以看到 VSCode 提供的模板。(这个方式确实有点用户不友好,不过设置界面之前也是这样,所以完全有理由相信将来 VSCode 也会让这个界面友好起来的。)

首先,你的用户代码片段得防置在整个文件的大括号内,然后让我们来看一段演示:如果写一篇知乎回答。

// "知乎回答": {···················································引号内是你的片段的名称,会在使用时显示显示                      //  "prefix": "zhihu",········································prefix 代表触发用户代码片段的触发词 //  "body": [ //      "谢 邀中就是用户片段的主题部分​1 代表第一个 Tab 后切到的位置,$2 是第二个,以此类推。 //      "实名 $2 高票答案", //      "我认为 $3" //  ], //  "description": "用于快速生成知乎回答"·······代码片段的描述,也会在使用时显示 // }

需要注意的是每个代码片段之间需要用逗号相隔,另外 body 的大括号中每一行的内容用""圈起,每行之间要使用逗号相隔。

最后的效果是这样的,输入 zhihu 会产生相应提示

按 TAB 键就可以在之前的 ​2 $3 之间切换。

配置 Python 调试环境

VSCode 在编辑器中集成了几种语言的调试环境,包括 Python,C/C++,C# 以及在 Chrome 中调试 JS 代码。

调试 Python 的原理实际上还是调用外部 Python 真正的解释器,换句话说,如果你在 VSCode 中启动某个 Python 程序的调试,实际上 VSCode 是在终端中执行了这一系列操作:

cd 'd:\working_project\python4test';

${env:PYTHONIOENCODING}='UTF-8';

${env:PYTHONUNBUFFERED}='1';

${env:PYTHONPATH}='c:\Users\fan li\.vscode\extensions\ms-python.python-2018.8.0\pythonFiles\experimental\ptvsd';

& 'python' '-m' 'ptvsd' '--host' 'localhost' '--port' '55538' 'd:\working_project\python4test\tcp_test_server.py'

这段代码中做了这么几件事:将目录切到当前目录;设定用于启动 Python 的环境变量以及 VSCode 使用的 Python 调试器 ptvsd 的路径。然后使用 "python 文件名" 的方式调用需要调试的文件,指定调试器为 ptvsd。

也就是说配置环境只需要做这么两件事

1.安装 Python 插件,星最高的那个就行,是微软官方推出的,包含了对调试功能的支持,也就是 ptvsd

2.将 Python 解释器的路径添加到 Windows 系统路径中去,以便能直接在终端中运行 Python

这是我的环境变量设置,可以看到 Python 所在的路径

关于第二件事可以多说两句,从上图中可以看到两个路径,较长的一个路径是在另一个较短的路径的基础上加上了 \script,长路径是给包安装工具 Pip 使用的,短路径是 Python 解释器所在的目录。

你可以自行在上图的界面中添加 Python 的路径,最好再添加一个 \script 的路径。还有一种办法是在安装 Python 时,注意这个选项

不过环境变量需要重启之后才会起作用。

使用集成 Git 插件

Git 是一个被广泛使用的,开源的版本管理工具。我这里暂时不想具体讨论 Git 的由来,用途和使用方式,而是集中在使用 VSCode 集成的 Git 插件,实现一些基础但很有用的 Git 操作。

原因在于我本人对于 Git 的理解不够深,对于 Git 的实践也比较基础,最重要的是,我认为我讲的肯定没有下文链接中的廖雪峰老师讲得好。

Git教程www.liaoxuefeng.com

首先你要下个 Git,登录官网下载最新的 Windows 版本,网速好像比较缓慢。

Git https://git-scm.com

在工作目录,建议不要将工作目录定得太大,尤其不要把工作目录定为 IDE 的工程目录,这样会包括太多不需要的,由 IDE 更新的文件。一般在 Verilog 开发中,把目录定为 RTL 目录即可。

创建 Git 仓库

有两种方法在工作目录中创建 Git 仓库。一种是在 Windows 资源管理器,右键菜单中的 Git Bash Here 打开 Git 命令行,使用 git init . 在当前目录中创建 Git 仓库

然后回到 VSCode,打开左边竖着的菜单栏中的第三个按钮——源代码管理,应该就能看到当前目录所属的仓库。(如果看不到,关闭当前的标签页再打开。或者可以重启 VSCode 软件。)

还有一种办法则不需要离开编辑器,直接使用编辑器内置的 Powershell 工具,输入 git init .命令即可。在界面下方的终端中。

Git Add 操作

如果你还不知道 git 的 add 操作是什么,那么还是推荐去看一下廖雪峰老师的教程。本篇教程将着重于在 VSCode 上的使用。

当我们创建了一个 Git 仓库时,该目录下的文件其实仍然和之前没有什么差别,它们处于未被跟踪的状态。所以在创建了仓库之后,我们首先需要将我们需要跟踪的文件加入暂存区,也就是 git add 操作。

点击代表 untracked 的 U 边上的加号,即可将该文件加入暂存区。文件进入暂存的更改。

那么加入暂存区有什么用处?首先,可以跟踪你的修改。当你在原文件的基础上做些改动时,观察发生的变化。

我们发现有了两个变化,一是左边的更改栏中又出现了这个文件,显示 M ,代表有修改。上下两个同名文件,分别位于暂存的更改更改中,分别代表了之前 add 的版本以及后续有过修改的版本。另一个变化是,右边我们新添加的内容前面多了一条绿线,标识出上一次 add 操作后的修改。这对于调试来说非常好用,有些同学可能改啊改,然后就不知道哪里改过了(比如我本人)。另外点击更改中的文件还会有修改前后的比较,十分直观。

如果你想删除这次的修改,只需要在更改中选择那个撤回的箭头。世界又恢复到几分钟前了。

是的,我直接复制了之前的截图。。

Git Commit 操作

在消息框中键入此次提交的标题,按 Ctrl + Enter 键就可以进行提交。提交之后,暂存的更改消失了,你可以理解这次 add 修改已经被整合到此次 commit 的版本中,所以没有所谓在暂存的更改了。这里 commit 先几乎不讲,之后的文章再仔细讨论这个问题。

Git 创建和切换分支操作

如果你历经好多天调试之后终于完成了一个牛逼但是脆弱的程序之后(程序脆弱么。。还是挺正常的),老师又给你提出一个新需求,你肯定不会上手就开始改代码吧?

这时候创建一个新的分支进行开发,万一程序炸了,至少还能回到上一个复活点不是。

在将珍贵的程序 commit 之后,点击左下角的 master,在上方弹出的界面中选择创建新分支,填写新分支的名字,切换到新分支。

然后开发开发...炸了,你想回到修改之前的样子。但这篇废墟也不想放弃,万一还能抢救呢。于是暂存这段修改,并提交。

再点击左下角的 dev,选择回到 master,之前的程序又回来了。再回 dev 分支,之前的废墟还在。。

特别提醒

如果你有不止一个源文件,在切换分支之前,不要只提交你想修改的那一个文件,而是你所有的源文件,不然切换回原分支,你会发现只剩一个单独的文件了。

结语

本期首先回答了读者来信(假装是好了),顺便介绍了编码相关的问题;讨论了使用用户代码片段的方法;配置 Python 环境的方法以及使用 Git 进行一些基础操作的方法。

至此,我可以负责任地说:我的存货已经基本上没有了(毕竟 VSCode 只是一个简单的编辑器,常用操作也就这么多)。

在之后的文章里,我会和大家一起学习一下 VSCode 的官方教程,看看有没有什么能提高工作效率的技巧,链接在下面。除此之外,我会继续看看有没有读者来信,然后会继续深入 Git 的使用,这篇教程中的 Git 使用相当基础,还想讨论下在 VSCode 中的 Python 的调试方法。

Documentation for Visual Studio

推荐阅读更多精彩内容