Othervscode

[IDE] 调试 vscode 内置插件

2019-11-29  本文已影响0人  何幻

背景

vscode 内置了很多插件,
例如,css,css-language-features,typescript-basic,typescript-language-features,等74个,
某些插件的内部逻辑是很复杂的,只是官方 vscode 仓库暂时没有提供调试的办法。

结合 vscode 官方插件开发例子
可以编写一个 .vscode/launch.json 文件,使用已安装的 Visual Studio Code 调试 vscode 内置插件源码。

调试方式

1. 克隆 vscode 仓库,并安装依赖

$ git clone https://github.com/microsoft/vscode.git
$ cd vscode
$ git checkout 1.39.2
$ yarn

注:

$ node --version
v10.17.0

$ yarn --version
1.19.1

2. 将以下 .vscode/launch.json 拷贝到 vscode 源码仓库,覆盖原有配置

// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Extension",
            "type": "extensionHost",
            "request": "launch",
            "runtimeExecutable": "${execPath}",
            "args": [
                "--extensionDevelopmentPath=${workspaceFolder}/extensions/${input:extensionName}"
            ],
            "outFiles": [
                "${workspaceFolder}/extensions/${input:extensionName}/${input:mainFile}",
            ],
        },
    ],
    "inputs": [
        {
            "id": "extensionName",
            "description": "vscode built-in extension name",
            "type": "pickString",
            "options": [
                // 只有typescript 的 mainFile 是 ./out/*.js
                "typescript-language-features",
                // 其余插件的 mainFile 为 ./client/out/*.js
                "html-language-features",
                "json-language-features",
                "markdown-language-features",
                "css-language-features",
            ],
            "default": "css-language-features",
        },
        {
            "id": "mainFile",
            "description": "package.json main file relative path",
            "type": "pickString",
            "options": [
                "./client/out/*.js",
                "./out/*.js",
            ],
            "default": "./client/out/*.js",
        }
    ],
}

注:
vscode 源码仓库中 .vscode/launch.json 中包含了很多配置,
以上配置可手动添加到现有的配置中,如果覆盖掉 .vscode/launch.json 其他配置会丢失。

3. vscode 源码仓库中,watch 文件变更

$ npm run watch

4. 用 Visual Studio Code 打开 vscode 本地仓库根目录,启用调试

F5 启用调试

css-language-features typescript-language-features

参考

vscode 1.39.2
vscode debugging
vscode 官方插件开发例子
input 配置的用法

上一篇下一篇

猜你喜欢

热点阅读