阅读 343

vscode插件开发

开发这个插件的原因是平时开发会用命令行一键生成一个模块的代码模版,但是经常因为代码拆分需要在深层文件夹下创建特定的模块,所以就想结合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 basePath = uri._fsPath;
    const fileName = path.basename(basePath);
    createFile(basePath, method(fileName, config));
  } catch (e) {
    vscode.window.showInformationMessage(e);
  }
})
复制代码

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

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

所以初版暂定自己新建文件夹,右键在该目录下生成固定模板的代码,如果有知道如何生成文件后直接打开文件的操作的请指点一下(就类似于vscode 的 code命令)

多级菜单

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

在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}代替"
            }
        }
    }
},       
复制代码

image.png image.png

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

发布

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

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

image.png

文章分类
前端
文章标签