背景
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
启用调试
网友评论