开发这个插件的原因是平时开发会用命令行一键生成一个模块的代码模版，但是经常因为代码拆分需要在深层文件夹下创建特定的模块，所以就想结合vscode插件，直接右键生成。

首先参照官网先撸个项目出来

npm install -g yo generator-code

yo code

菜单和命令

然后给资源管理器右键添加上我们的命令，在package.json的contributes中添加菜单，参考官网

"contributes": {
    "commands": [
        {
            // 命令
            "command": "tbfe-add.tbfe-add",
            // 对应菜单展示的标题
            "title": "tbfe-add"
        }
    ],
    "menus": {
        // 资源管理器上下文菜单
        "explorer/context": [
            {
                // 对应上面的命令
                "command": "tbfe-add.tbfe-add",
                "group": "navigation" // 放在这个组的永远排在最前面
            }
        ]
    }
}

然后就是在extension.js里编写命令的逻辑代码，

vscode.commands.registerCommand('tbfe-add.tbfe-add', function (uri) {
  try {
     // 执行命令的项目路径
    const folderPath = vscode.workspace.workspaceFolders[0].uri.fsPath;
    // 执行命令的文件夹路径
    const basePath = uri._fsPath;
    const fileName = path.basename(basePath);
  } catch (e) {
    vscode.window.showInformationMessage(e);
  }
})

初始的设想是执行新建文件夹的命令，然后回调拿到输入的名称，直接在该路径下生成文件，然而新建文件夹并没有返回值返回。参考内置命令

 vscode.commands.executeCommand("explorer.newFolder").then((result) => {
    vscode.window.showInformationMessage("命令结果", result);
  });

所以初版暂定自己新建文件夹，右键在该目录下生成固定模板的代码，生成后快速打开文件

// 将文件路径转换成uri
const uri = vscode.Uri.file(path.join(basePath, quickOpen));
// 区别于vscode.workspace.openTextDocument
vscode.window.showTextDocument(uri);

多级菜单

不会的时候就去官网例子看看别人是怎么做的。

在menus中配置

"menus": {
    "explorer/context": [
        {
            "group": "navigation",
            // 配置要引用的二级菜单的id，注意这个时候不能配置command命令了
            "submenu": "tbfe-add/type" 
        }
    ],
    // 定义二级菜单点击时的命令
    "tbfe-add/type": [
        {
            "command": "tbfe-add.tbfe-add-list",
            "group": "navigation"
        },
        {
            "command": "tbfe-add.tbfe-add-modal",
            "group": "navigation"
        }
    ]
},

定义submenus

"submenus": [
    {
        "id": "tbfe-add/type", // 与上边的menu做绑定
        "label": "tbfe-add" // 显示的标题
    }
]

在command里定义命令

"commands": [
    {
        "command": "tbfe-add.tbfe-add",
        "title": "tbfe-add"
    },
    {
        "command": "tbfe-add.tbfe-add-list",
        "title": "list"
    },
    {
        "command": "tbfe-add.tbfe-add-modal",
        "title": "modal"
    }
],

读取本地的setting

在后期优化的时候，其实每个产品线配置的文件路径内容可能都不太一样，所以希望可以在setting中配置自动生成的文件内容，具体配置参照官网

可以在package.json的contributes的configuration配置，这样当用户在setting.json中配置时，就会出现快捷提示，如下图所示

"contributes": {
    "commands": [
        {
                "command": "tbfe-add.tbfe-add-base",
                "title": "tbfe-add-base"
        }
    ],
    "menus": {},
    "configuration": {
        "type": "object",
        "title": "tbfe-add",
        "properties": {
            "tbfe-add.content": {
                "type": "string",
                "description": "生成的index.js的内容，组件名用${fileName}代替"
            }
        }
    }
},

在插件中，可以通过vscode.workspace.getConfiguration('tbfe-add')获取对应的配置进行操作

vscode api

在插件中调用vscode的一些api

发布

其实只要按照官网来就不会有问题。

但是这里特别要注意Organization要选择all accessible organizations，Scopes要选择Full access，否则后面发布会报401的错。

vscode插件开发

菜单和命令

多级菜单

读取本地的setting

vscode api

发布