Question

• Visual Studio Code（[VScode ]( Visual Studio Code - Code Editing. Redefined )）官网： https://code.visualstudio.com
• Visual Studio Code（VScode ）github 地址： https://github.com/Microsoft/vscode
• code-server: WEB 版的 VSCode，配置文件在~/.config/code-server/config.yaml

Visual Studio Code,简称 VS code。 前端开发利器。Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。VSCode 可以很轻量做一个完美的文本编辑器，同时也可以很全面的承载大多数开发语言成为全平台多语言的 IDE 工具。

VS Code 是微软开源的基于 electron 的编辑器，通过各种各样的插件，它能够变成你最花里胡哨的 IDE。

vscode 最大的特点与优势就是它将 Server 与 Client 解耦：

• 作为 Client 的 vscode，他只负责作为文本编辑器的功能：展示、搜索；以及作为客户端调用 Server 的服务。

• 作为 Server 的 vscode-server，他负责代码的分析：自动补全、定义跳转；代码的运行与调试。

由于 vscode 支持几乎所有的编程语言，因此微软为了适配多数语言的补全与调试，规定了 Client 和 Server 端的通讯协议，其中，负责代码分析与补全的协议被称为 Language Server Protocol (LSP) ，负责 debugger 和 Client 通讯的 debug-adapter-protocol(DAP)

VS code 特点：

• 开源，免费；
• 自定义配置
• 集成 git
• 智能提示强大
• 支持各种文件格式（html/jade/css/less/sass/xml）
• 调试功能强大
• 各种方便的快捷键
• 强大的插件扩展
• 工作区：workspace，可以将若干个项目放到一个工作区，便于组织。

表格 vscode 常用功能

功能	快捷键	功能详述
搜索	Ctrl + Shift + F	所有文件中搜索任何匹配的文本
命令面板	Ctrl + Shift + P	打开命令面板，可以查看扩展插件
重构	F2	可以批量替换函数或变量的名称
跳转	Ctrl	代码跳转&文件跳转，移到要跳转的位置，双击
调试		可在调试控制台打印变量

配置篇

vscode 会在每个项目文件夹下创建一个 .vscode 文件夹，保存当前项目的运行环境的配置文件。
主要有三个：

• launch.json 保存启动和调试的配置项。菜单 Debug -> Open Configurations 打开或创建此文件。

• tasks.json 菜单 Tasks -> Configure tasks 打开或创建此文件。

• settings.json 环境设置。在软件左下角状态栏中有选择环境的按钮，选择以后，就会自动生成此文件。示例如下，(python 代码规范三剑客：yapf, flake8, pylint)

  {
      "editor.formatOnSave": true,
      "python.formatting.provider": "yapf", // or "black", "autopep8" here
      "python.linting.pylintEnabled": true,
      "python.linting.flake8Enabled": true,
  
  }
  

launch.json 配置示例

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python",
            "type": "python",
            "request": "launch",
            "stopOnEntry": false,
            "python": "${command:python.interpreterPath}",
            "program": "${file}",
            "cwd": "${workspaceRoot}",
            "env": {
                "PYTHONPATH": "${workspaceRoot}"
            },
            "envFile": "${workspaceRoot}/.vscode/.env",
            "console": "externalTerminal"
        }
    ]
}

说明：必填属性是 name, type 和 request。

• name - 出现在调试启动配置下拉列表中的易于阅读的名称。可以随意命名。

• type: 用于此启动配置的调试器类型。 每个安装的调试扩展都会引入一个类型：(node) 用于内置节点调试器，例如，或者 php 和 go 用于 PHP 和 Go 扩展。

• request - 此启动配置的请求类型。 目前，支持 (launch) 和 (attach)。

  • launch：启动程序并调试;

  • attach：将程序附加到一个正在运行的进程中进行调试;

• cwd - 用于查找依赖项和其他文件的当前工作目录。若设置当前空间根路径 workspaceRoot 或{workspaceRoot} 或 workspaceRoot 或{workspaceFolder} 为目录，相当于将此目录加入了模块路径。

• console：使用哪种控制台，例如 internalConsole（VS 调试终端）、integratedTerminal （VS 内部终端）或 externalTerminal（外部终端）。

• program - 启动调试器时运行的可执行文件或文件。${file}为当前文件。

• env - 环境变量（值 null 可用于 取消定义 变量）

• envFile - 带有环境变量的 dotenv 文件的路径

• args - 传递给程序进行调试的参数

• port：要附加到的进程的端口

• stopOnEntry：是否在程序入口进行断点

.env 文件示例

FLASK_APP=app/app_main.py
MYSQL_DATABASE=retest
FLASK_ENV=development
FLASK_DEBUG=1
PYTHONPATH=/Users/keefe/repos/sz_develop/retest_tool/app/

远程调试

vscode 远程调试不仅支持远程调试服务端，也能调试容器内的服务。关键在于容器需要启动 ssh 服务端并对外暴露服务端口。

依赖插件：Remote Development（本地必需）、Python extension for Visual Studio Code（编程语言插件，远程必需）

step1: 本地 vscode 安装 remote Development 插件，此时容器要开放 ssh 服务端并能连接上。配置文件（通常是~/.ssh/config）参考如下，

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
# Host 随便写，自己能识别就行。
# HostName 填写 ip 或域名，要连接上的宿主机。Port 为映射的 SSH 服务端口。
# User 登陆用户名，密码会在 vscode 连接时手工填写
Host 155-keefe
    HostName 192.168.0.155
    Port 24444
    User keefe

step2: 本地 vscode SSH 连接到容器，vscode 在容器内安装 Python extension for Visual Studio Code ，然后重启 vscode。

step3: vscode 命令面板或者 Ctrl + Shift + P，输入 python: select interpreter ,点击选择解析器，指定 python 解释器为远程 python。

step4: 打开脚本文件，vscode 菜单 - 运行 - 启动调试。也可以将启动信息脚配置在 launch.json。

VSCode 插件

表格 VSCode 常用插件

插件名	功能详述
Remote Development	支持 ssh 到远程主机，直接编辑远程主机文件。也可以调试远程主机运行容器的服务。
Python extension for Visual Studio Code	python 远程调试插件，需在被调试的主机里安装。
Remote-Containers	远程容器调试
Remote-SSH	ssh 远程登陆配置文件
Debugger for Chrome	从 VS Code 调试在 Google Chrome 中运行的 JavaScript 代码。
Rest Client	类似 postman，直接在编辑器里发送 REST 请求。
beautify	格式化代码，工具美化 javascript，JSON，CSS，Sass，和 HTML 在 Visual Studio 代码。
Atuo Rename Tag	修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改。
Code Spell Checker	代码拼写检查器
markdown all	markdown 语法支持更丰富些。
GitLens	git 扩展，可以查看和比较 commit
markdown pdf	可将 md 格式文件转化成 PDF 格式

插件架构

VS Code 是通过 Electron 实现跨平台的，而 Electron 则是基于 Chromium 和 Node.js，比如 VS Code 的界面，就是通过 Chromium 进行渲染的。

同时， VS Code 是多进程架构。

• 主进程：当 VS Code 第一次被启动时会创建一个主进程（main process）。

• 渲染进程：然后每个窗口，都会创建一个渲染进程（ Renderer Process）。

• Extension Host：VS Code 会为每个窗口创建一个进程专门来执行插件，也就是 Extension Host。VS Code 创建 Extension Host 进程的方式，就是创建一个新的 Electron 进程，并且以 Node.js 的形式运行。也就是说，这个进程就是一个完整的 Node.js 进程，Node.js 版本就是你使用的 Electron 中的 Node.js 。

除了这三个主要的进程以外，还有两种特殊的进程。

• 第一种是调试进程，VS Code 为调试器专门创建了 Debug Adapter 进程，渲染进程会通过 VS Code Debug Protocol 跟 Debug Adapter 进程通讯。

• 另一种则是 Language Server。

图 VS 插件架构