使用node开发一个解放双手的小工具《二》- vsCode插件包装

背景：此篇是上篇《使用node开发一个解放双手的小工具》的后续，前边遗留了一些问题，最近完善了一下。

因为发现实际使用起来，有很多的不方便：

1. 使用上，需要配置对应的根目录，因为是需要用户手动修改config中的地址，这时目录就有可能有问题，不是根目录、路径不完整之类的。
2. 工具本身，提交到git上，需要拉下来，然后再工具的对应目录下运行，去生成对应目录下的文件。操作起来有点奇怪。

索性直接搞成vsCode插件么，现在前端开发应该对vscode这么熟悉，它自带的插件本身使用起来就很方便。而且在vsCode中使用，也比直接运行项目看起来更优雅。

于是开始百度vsCode插件编写，《VSCode插件开发全攻略》小茗同学的这篇攻略，真的是很详细了，所以关于vsCode发布相关的东西，我这里就不详细介绍了。

目录结构

├─.eslintrc.json
├─.gitignore
├─.vscodeignore
├─CHANGELOG.md
├─extension.js
├─jsconfig.json
├─LICENSE
├─package-lock.json
├─package.json
├─README.md
├─vsc-extension-quickstart.md
├─test
|  ├─runTest.js
|  ├─suite
|  |   ├─extension.test.js
|  |   └index.js
├─src									核心替换代码
|  ├─app.js
|  ├─config.js
|  ├─package.json
|  ├─util
|  |  └index.js
|  ├─template
|  |    ├─baseRepart                  模板目录
|  ├─image
|  |   └doge.jpg

改造思路

核心代码其实已经写好了，只要vsCode相关事件能触发我的生成方法就可以了。目前是这样想的：在用户右键要生成的目录，弹出可选择的按钮，点击之后调用创建模板的函数，因为是直接选择了对应目录，所以就可以获取到目录的路径，也解决了需要手动输入路径的问题。

// extension.js
// vsCode中注册一个 createTem事件。
    let createTem = vscode.commands.registerCommand('hhcreatepage.createTem',  (uri) => {
        vscode.window.showInformationMessage(`创建模板 当前路径：${uri.path}`);
        try {
            // 调用主方法
            createTemFun(uri._fsPath)
            console.log('执行成功')
        } catch (error) {
            console.log(error)
            vscode.window.showErrorMessage(error);
        }
    });

    context.subscriptions.push(createTem);

// package.json中 配置相关菜单和点击事件
	"contributes": {
		"commands": [
			{
				"command": "hhcreatepage.createTem",
				"title": "create-template"
			}
		],
		"menus": {
			"explorer/context": [
				{
					"command": "hhcreatepage.createTem",
					"group": "z_hh-create"
				}
			]
		}
	},

其实关于vsCode的东西非常少，只是相当于在外边套了一个壳子。传入了项目路径，之后的东西还是原来的模板生成。之后，将vsCode打包并发布到应用市场就可以了，发布相关的东西，参考上边教程链接

目前问题与后续计划

1. 目前只能要求用户知道对应的目录（src的上级目录），选中了这一级才能生效，不然还是有问题（因为没找到用代码控制菜单显示隐藏的方法）
2. 模板还是比较单一的，并不能控制生成代码是选择哪一个模板去生成。

虽然目前功能还是比较单一，但是也解决了目前的刚需问题。后边的优化，可以慢慢搞。