美文网首页Othervscode
[IDE] 调试 vscode 内置插件

[IDE] 调试 vscode 内置插件

作者: 何幻 | 来源:发表于2019-11-29 10:42 被阅读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 配置的用法

    相关文章

      网友评论

        本文标题:[IDE] 调试 vscode 内置插件

        本文链接:https://www.haomeiwen.com/subject/oivsictx.html