vscode-插件开发-hello world-创建初始模板 Error: there is no registered task type ‘npm‘. Did you miss ins

参考vscode官方示例：如何创建你的第一个插件开发项目模板的步骤进行了下文操作。

前言

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

1.环境配置

2024.4月配置

• vscode版本: 1.88.0
• nodejs版本: Node.js v20.12.11 with long-term support.

要开发vscode插件,可以直接使用官方提供的脚手架,免去配置的麻烦.

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,并无异常.
  output: Error: there is no registered task type ‘npm’. Did you miss installing an extension that provides a corresponding task provider?

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

• 项目的.vscode/launch.json如下

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

• 进一步, 错误对应的正是 "preLaunchTask": "${defaultBuildTask}"未能正常启动, 也就是.vscode/tasks.json中的这个默认构建任务有问题:
  
• 实际tasks.json调用的是 package.json文件内"scripts": {...}键值对对应的命令列表.

问题1: 标准的解决方案1

搜索插件 @buildin npm, 将这个插件全局使能开启
我应该是之前误操作,把它关闭了,才导致To run scripts as tasks不能正常运作.

问题1: 可行的解决方案2

个人方案, 不建议不通用.
修改tasks.json，让既定的任务正常运行，发挥该有的功能即可。

• 原本的实际的tasks.json调用的是 package.json文件内"scripts": {...}键值对对应的命令列表内 一个npm指令.
• 修改后的 .vscode/tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
            
            "label": "任务npm",
			"type": "shell", //直接在默认shell里面,用npm执行操作
            "command":"npm",
            "args": ["run", "watch"], 
            /*  实际执行的指令也就是 " npm run watch ",什么作用?  
                检测tsscript文件变化,更新传递给调试窗口，检查语法错误，
                */
			"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了.

3. 开发插件(添加自定义功能)