TimeForget
  • Sep 19, 2019
  • 0 views

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也可以轻松地专注内容
Search