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

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

目录

前言
1.环境配置
全局安装 `yo`, `generator-code`

2. 新建一个插件项目模板
问题1: F5 按键无法启动launch.json调试(解决)
问题1 描述:
问题1: 找错误
问题1: 可行的解决方案

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

前言

使用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中的这个默认构建任务有问题:

到这里，思路就清晰了。
因为launch.json仅仅只是调试任务，不包括编译构建任务，所以需要有个preLaunchtask 调试前戏任务。两者合二为一，即为compile and debug操作，也就是先编译，再debug。

两种方案，
方案一：
虽然编译任务有那么点问题跑不起来，那我们就在launch.json直接注释掉这个前置任务，将编译任务和debug调试任务分开。
使用run task插件先运行npm run compile编译ts脚本为js脚本；然后再F5启动调试任务。
缺点很明显，本来我一个F5能干的一条龙服务，被割裂开成为两步，每次改了ts源码还得留心编译一遍，刷新项目，不然跑的就是旧的js代码。所以我还是不这么做。

方案二：
修改tasks.json，让既定的任务正常运行，发挥该有的功能即可。
先看看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了.