vscode-插件开发-hello world-创建初始模板

前言

使用vscode开发脚手架，也有一些意想不到的漏洞。可能我姿势不对,创建一个新的extension项目开发插件,无法正常调试debug??? F5都摁烂了.

1.环境配置

2024.4月配置

vscode版本: 1.88.0
nodejs版本: Node.js v20.12.11 with long-term support.
要开发vscode插件,可以直接使用官方提供的脚手架,免去配置的麻烦.

全局安装 `yo`, `generator-code`

npm install -g yo generator-code

2. 新建一个插件项目模板

安装好脚手架后,可以使用 yo创建vscode插件项目.

yo code

在这里插入图片描述

我在创建的模板extension, 在yo code之后, 选了这些选项

? What type of extension do you want to create?     New Extension (TypeScript)
? What's the name of your extension?                testccc
? What's the identifier of your extension?          testccc
? What's the description of your extension?         不想描述
? Initialize a git repository?                      No
? Bundle the source code with webpack?              No 
? Which package manager to use?                     npm

然后按照vscode官方创建第一个extension插件的操作步骤,遇到了如下问题

F5摁烂了, 没点反应, launch.json中debug任务没有启动
但是,可以通过运行 package.json中的一些系列scripts,并无异常.
然后我就很奇怪, 如何进入进入调试模式,开发我的第一个插件?
接着,我看了yo code生成项目中 .vscode/tasks.json, .vscode/launch.json 发现一些小问题?不清楚啊,官方自动生成的,应该不会错吧. 可这个前置任务就是运行不了

所以有了:

问题1: F5 按键无法启动launch.json调试(解决)

问题1 描述:

F5按键对应的就是 debug插件内,这个Run Extension的动作,而我这边按下去错误,无法运行npm,点击这边的绿色UI按钮任然也是同样问题.

问题1: 找错误

留意了一下按下F5时, output的输出, 没注册的npm类型任务???
emm, 我寻思着我也装好了检测 tasks的插件, 也配好了npm的环境变量,vscode里面我也设置了npm的路径. 问题出在哪?

看到output有了那么点思路,但不多.

那就先去看一遍插件项目中 .vscode/tasks.json, .vscode/launch.json

项目的.vscode/launch.json如下

根据output的错误信息提示,应该是我的 tasks.json 中默认的类型为npm构建任务没启动导致的错误

进一步, 错误对应的正是 "preLaunchTask": "${defaultBuildTask}"未能正常启动, 也就是.vscode/tasks.json中的这个默认构建任务有问题:

发现这.vscode/tasks.json中两个错误, emm, 这算是vscode脚手架自己生成的项目,搞这么离谱. 不管怎么说,找到问题了

问题1: 可行的解决方案

ps(不清楚是否通用,个人方案)

修改后的 .vscode/tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
            
            "label": "任务npm",
			"type": "shell", //直接在默认shell里面,用npm执行操作
            "command":"npm",
            "args": ["run", "watch"], 
            /*  实际执行的指令也就是 " npm run watch ",什么作用?  
                检测tsscript文件变化,更新传递给调试窗口，检查语法错误，
                大概是这么个意思, 综合了我ctguer的猜测,与通义千问的回答
                */
			"problemMatcher": "$tsc-watch",
			"isBackground": true,
			"presentation": {
				"reveal": "never"
			},
			"group": {
				"kind": "build",
				"isDefault": true
			}
		}
	]
}

好了,问题基本解决.这下我按下 F5就可以正常启动,调试插件项目了.

在插件调试窗口随便操作一下, 可以看到 debug信息在DEBUG_CONSOLE窗口正常输出;

并且,terminal终端内,也提示启动了 任务npm, 可以检测到ts文件变动, 方便重启调试流程,检测语法报错

删除多余的–,没错误后,
点击绿色的圆圈重启调试，进入调试窗口, ctrl shift p,执行 Hello World指令, 看到了弹窗提示,总算成功了.

那么,我的第一个vscode插件模板项目就创建好了,成功hello world了.