How to VSCode

 

还记得初见Atom的惊艳以及日久感受到的速度慢和占用高,记得VSCode刚推出时的“难用”,现已今非昔比,本文主要介绍VSCode的一些简单的应用:部分实用的插件以及调试C,Python代码的方法

还记得初见Atom的惊艳以及日久感受到的速度慢和占用高,记得VSCode刚推出时的“难用”,现已今非昔比,本文主要介绍VSCode的一些简单的应用:部分实用的插件以及调试C,Python代码的方法

最初为了写LaTeX而使用 Atom + 插件 来作为代码编辑器(积累了些经验之后转而使用TeXStudio),之后也就顺其自然的用Atom写了作业的大部分代码(装插件还要看网络环境),之后就是遇到了幽灵和熔断漏洞的影响,笔记本的性能越来越力不从心,使用Atom打开大文件特别慢,运行也并不流畅,才发现Atom的性能问题被诟病已久,有人推荐了微软的VSCode —— 和Atom的主题、插件基本通用,但是性能好太多,于是我就换下了Atom,一直用到了现在

现代代码编辑器最基本的功能:Git,多语言支持,丰富的效率插件,VSCode都是有的,而它出彩的地方还是在于开发方面(其实我就是写下作业)

准备

安装VSCode的时候记得勾选使用VSCode打开文件夹,因为VSCode的对工作空间要求比较严格的,另外对于Atom迁移而来的,可以选择Atom主题“One Dark Pro”以实现一个“平缓的过渡”

在调试代码和使用方面,常用的插件有:

  • Code Runner
  • Terminal
  • Resource Monitor

考虑到配置繁杂,重装或者有多台电脑迁移配置不便,可以用Setting Sync插件通过Github提供的服务以实现配置的同步

Remote-SSH

常规插件其实各大代码编辑器都差不多,对于VSCode来说,个人接触到的,最惊艳的插件当属Remote-SSH:

开发环境或者说代码运行的环境在远程或者其他的系统上,需要使用SSH客户端连接到远程,使用SCP或者SFTP来传输文件,这里面SSH客户端是一个重要的角色,最开始使用Atom编辑加上脚本完成“本地编辑,远程调试”的过程,后面遇到了一度让我觉得“相见恨晚”的FinalShell,解决了SSH时的一些列问题,但是作为一个独立开发者维护的闭源软件,稳定性和安全性是一般般的

而Remote-SSH相当于把VSCod搬到了服务器上,同时解决了运行环境和文件传输两个问题,尽管类似的问题可能早就有成熟的方案,但是在常用的代码编辑器中就能实现还是相当感动的,安装完成本地的客户端之后在VSCode的左下角有一个蓝色的标记,点击之后按照提示添加服务器就好(遇到SSH的config文件权限的问题,换用另外一个ssh的config文件就好),初次使用连接服务器之后会在服务器端自动下载和安装VSCode的相关组件(常用的LInux发行版没什么问题,也不需要root权限,ARM架构也支持),之后再手动把需要的插件安装下就好

初次连接时打开文件夹需要重连,直接打开另外一个文件夹也会重连,感觉不方便的话,可以在打开文件夹之后再添加另外一个文件夹到工作空间中(会重新连接),文件夹一栏会变成了工作空间,之后添加文件夹就不需要重连了,工作空间的配置可以保存以便下次使用;文件的上传下载分别是拖拽和右键菜单,体验算是很好了

如果在远程跑代码可以安装Resource Monitor用于监测CPU和内存占用,其他的细枝末节的部分搜索下就有

WSL支持

这里就不造轮子了,已经有人做的很好了,Dev on Windows with WSL,其中主要使用了Remote-WSL插件,虽然个人一度觉得WSL是未来,但是使用了一段时间之后还是觉得不如Docker或虚拟机来得方便,尤其是和Remote-WSL一起推出的Remote-SSH诞生之后

Docker支持

无意中又看到Remote插件多了一个Docker,之前的docker插件在VSCode侧边栏可以方便的查看镜像容器的情况,而Remote插件可以直接把VSCode的运行环境放到容器内,并且可以直接接入正在运行的容器(也就是不需要预先安装SSH和开放端口),尤其对编译环境下修改代码比较方便

另外还有个有趣的地方,可以让Win下的Docker支持图形化界面(勉强可用)

  • 安装vcxsrv,运行xlanuch,设置勾选最后一页的最后一项(Disable Access Control)
  • 获取本机的一个让容器可以到的IP,可取宿主机的WAN IP

这里直接把IP保存为变量了:

$DISPLAY=(ipconfig|findstr "IPv4")[1].split(" ")[-1]+":0.0";
docker run -it --net=host -e DISPLAY=$DISPLAY ....

调试代码

VSCode全称Visual Studio Code,调试代码方面算是对得起Visual Studio之名了,权威的配置过程还是参考VSCode官方文档,本文介绍的是个人配置在Windows下的配置尝试,点几下就配置好了,故分享出来,仅供参考

C语言

有些作业要求用C语言写,最开始追求新奇,用的Visual Studio 2015以及Clang,看中的是强大的调试功能,但是对于写个简单的作业来说太费事,Clang的报错常常不理解

之后转而使用了更常见的Dev C++,基于GCC,照抄书上的代码也不会莫名报错了,在很长一段时间里都是用Atom写代码,Dev C++做运行和调试,

到了VSCode当然会想要接近Visual Studio的体验,编译器肯定不用Clang了,至于GCC,WSL里有,Win上的GCC的版本不知道用哪个好,看网上的博客配置tasks.json (build instructions),launch.json (debugger settings)依然颇为繁琐

直到后面遇到了Scoop,安装就很简单了:scoop install gcc,查看版本后发现是MinGW的GCC,安装CodeRunner扩展后就可以运行代码了

注:代码及工作目录的路径不要有中文

调试功能则需要C/C++扩展,Debug功能在VSCode的左侧应该是自带的,对新目录来说Debug一栏的左上角绿色三角形旁边会显示”No COnfiguration”,Debug时配置gcc.exe作为代码的编译器,GDB作为代码的调试器的关键就在这里了:

  • Add Configuration的时候选C++(GDB/LLDB),之后再选gcc.exe build and debug active file设置完成后会在工作目录下生成一个.vscode/launch.json的文件,文件定义了gdb作为exe的调试器,需要注意的是这里的preLaunchTask,定义了在执行调试在前需要使用gcc对代码进行编译,也就是下一步

  • 回到C的源文件,点击Debug一栏的左上角绿色三角形开始调试,会提示Could not find the task ‘gcc.exe build active file’ ,点击Configure Task,再选gcc.exe debug active file,软件就会创建并打开.vscode/task.json,其中定义了gcc.exe编译的过程,也就是上一步的preLaunchTask

  • 以上的文件在做了选择之后就自动生成好了,之后该文件夹内的C代码都可以透过VSCode的Debug来调试了,设置断点,查看变量体验还是比较现代的~

已知问题

自带的运行代码和调试的terminal窗口对部分编码支持的不太好,调试的时候会闪退

使用WSL GCC可以参考下面的链接(和上个链接的WSL Remote还是有些不同的): VSCode使用WSL环境开发C语言配置

Python

首先在VSCode窗口的左下角,可以设置当前使用的Python解释器,运行依然是CodeRunner,在代码编辑窗口右键选择各种运行方式包括交互式。重点还是调试,这个时候可以选择创建一个新文件夹了(平时把Python代码都放到一个文件夹…),在新文件夹的情况下,点击调试会提示选择Debug Configuration:包括了Python File和Module以及其他没见过的类型

显然对于只会用调试Python File的情况,每次都做一次选择显然不太方便,那么可以选择Add Configuration,工作目录下会生成一个.vscode/launch.json的文件:

        {
            "name": "Python: 当前文件",
            "type": "python",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal"
        }

在Debug的选项中也就有“Python: 当前文件”的选项了,如果想要在已经有launch.json的文件夹中调试,添加这一段到其中即可

调试Python文件的时候比较慢,比如调用Python还需要先激活Conda环境(选择Python解释器)

在编辑器窗口的右键选项中还有使用Jupyter-notebook作为交互式运行的选项,需要在Conda环境中准备:

conda install ipykernel
python -m ipykernel install --user --name 环境名称 --display-name "Python (环境名称)"

网页版

有上面的Remote-SSH,加上VSCode也是基于electron的,自然会想到能不能在浏览器中使用,偶然的一次机会还真的看到了这样的一个项目:Code-Server

这样一来,只要有一台配置OK的Linux的服务器,使用iPad之类的设备也可以在VSCode中看/写代码(随着iPad逐渐强调生产力,对键鼠支持的越来越好)

主题

Name: Vibrancy
Id: eyhn.vscode-vibrancy
Description: Vibrancy Effect for Visual Studio Code

拖动有些卡顿,打开的时候窗口大小有些异常,不过,不影响代码体验~(笔记本上可能对GPU负担太大从而影响续航)

最近发现有个网站收集了很多微软的壁纸:Wallpaper Hub

最重要的是,网站有一些Fluent Design的元素,最明显的就是Acrylic的效果了

其他插件

  • markmap,将Markdown转换为树状的思维导图
  • drawio,对于常见的流程图和框图,往往不需要特别重量级的工具,只需要创建.drawio的新文件就可以VSCode内画框图了
  • Marp,由Markdown生成slide,写slide也可以轻松地专注内容