先感谢大佬的文章 www.cnblogs.com/liuxianan/p…
我们来一步一步搭建自己的插件
首先安装官方微软的脚手架
npm install -g yo generator-code
安装完成后开始生成我们的脚手架项目
yo code
根据自己的需求进行部分配置
我选择的是用ts进行配置
先看下生成的目录
因为我的需求比较简单，所以我们的开发都在extension.ts里面
配置文件都在package.json里
先看下package.json里面的配置
{
"name": "creatFiles",
"displayName": "creatFiles",
"description": "本地生成文件",
"version": "0.0.2",
"publisher":"lyz2", // 开发人员
"engines": {
"vscode": "^1.36.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:extension.wxPage",
"onCommand:extension.wxComponents"
],
"main": "./out/extension.js",
"contributes": { //个人配置
"commands": [
{
"command": "extension.wxPage",
"title": "creatHW"
},
{
"command": "extension.wxComponents",
"title": "creatOPPO"
}
],
"menus": {
"explorer/context": [
{
"command": "extension.wxPage"
},
{
"command": "extension.wxComponents"
}
]
}
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"@types/glob": "^7.1.1",
"@types/mocha": "^5.2.6",
"@types/node": "^10.12.21",
"@types/vscode": "^1.36.0",
"glob": "^7.1.4",
"mocha": "^6.1.4",
"tslint": "^5.19.0",
"typescript": "^3.3.1",
"vscode-test": "^1.0.2"
}
}
其他的配置和平时的项目一样，我们需要关注的是contributes。我们的个人配置都写在这里，还有publisher，这个注册过程一会我会仔细说
我们先看contributes
"contributes": { //个人配置
"commands": [ // 命令
{
"command": "extension.wxPage",// 调用名称
"title": "creatHW" //命令名称
},
{
"command": "extension.wxComponents",
"title": "creatOPPO"
}
],
"menus": { // 菜单
"explorer/context": [ //菜单类型。这个代表文件列表的右键菜单
{
"command": "extension.wxPage" //命令，调用，这个要和上面进行统一
},
{
"command": "extension.wxComponents" // 命令，调用，这个要和上面进行统一
}
]
}
},
现在列出来的是我项目需求的配置，更多配置如：绑定快捷键，起始页，开发区右键菜单，可以借鉴大佬文章 www.cnblogs.com/liuxianan/p…
因为我要完成的功能是类似于微信开发的那个编辑器，就是新建一个文件夹，然后在文件夹上面右键，在菜单里面点击creatFile会自动生成文件，并填充模版，这个能保证，在多人开发的时候能够进行基础模版的统一。
功能预览
右键菜单
我们看下具体代码extension.ts
import * as vscode from 'vscode';
import * as fs from 'fs';
import * as path from 'path';
import { files } from './files';
const fileTypes: Array<string> = [ 'js', 'html', 'vue', 'scss' ];
function wxCommandHander(type: string,e: vscode.Uri) {
const stat = fs.statSync(e.fsPath);
const dir = path.normalize(e.fsPath);
vscode.window.showInformationMessage(`stat是${stat}!`);
const filename = String(dir).split("/").pop();
vscode.window.showInformationMessage(`filename是${filename}!`);
const { page, components } = files(`${filename}`);
if (stat.isDirectory()) {
try {
fileTypes.map(async(i: string) => {
const data = new Uint8Array(Buffer.from( type === 'page' ? page[i] : components[i]));
fs.writeFileSync(`${dir}/${filename}.${i}`, data);
});
vscode.window.showInformationMessage(`create ${type} success!`);
} catch (error) {
vscode.window.showErrorMessage('create page files failed');
}
} else {
vscode.window.showErrorMessage('please choose a folder');
}
}
export function activate(context: vscode.ExtensionContext) {
console.log('Congratulations, your extension "wx" is now active!');
let disposable = vscode.commands.registerCommand('extension.wxPage', async (e: vscode.Uri) => {
wxCommandHander('page', e);
});
context.subscriptions.push(disposable);
disposable = vscode.commands.registerCommand('extension.wxComponents', (e: vscode.Uri) => {
wxCommandHander('components', e);
});
context.subscriptions.push(disposable);
}
export function deactivate() {}
这个是弹窗
vscode.window.showInformationMessage(`create ${type} success!`);
调试的时候会在你编辑器的右下角出现
基本思路就是使用node提供的fs.writeFileSync新建文件，然后写入数据
说到调试，我们在vscode的菜单，点击这个虫子
开发完成后，我们有三种方式进行使用
方法一：直接把文件夹发给别人，让别人找到vscode的插件存放目录并放进去，然后重启vscode，一般不推荐；
方法二：打包成vsix插件，然后发送给别人安装，如果你的插件涉及机密不方便发布到应用市场，可以尝试采用这种方式；
方法三：注册开发者账号，发布到官网应用市场，这个发布和npm一样是不需要审核的。
因为我们的模版里面有部分呢的隐私信息，所以我采用本地打包成vsix包，别人使用的时候直接发给他们。然后接受的人在插件里面安装
安装方法
打包时候需要安装打包插件
npm i vsce -g
打包命令
vsce package
打包的时候可能提醒我们，没有定义开发者，这时候就需要用到我们之前说的packagejson 里面的publisher配置，这个是需要注册的。下面说下注册流程
借用下大佬总结的注册逻辑
要发布到应用市场首先得有应用市场的publisher账号；
而要有发布账号首先得有Azure DevOps组织；
而创建组织之前，首先得创建Azure账号；
创建Azure账号首先得有Microsoft账号；
是不是有点晕，梳理一下：
一个Microsoft账号可以创建多个Azure组织；
一个组织可以创建多个publisher账号；
同时一个组织可以创建多个PAT（Personal Access Token，个人访问令牌）；
跟着我一步一步走
第一个网址 login.live.com/，注册Microsof…
第二个网址 aka.ms/SignupAzure… ，如注册Azure，注册这个提示输入刚才我们注册的Microsoft账号，按步骤注册
现在我们有了账号，也有了token 在我们的项目目录下
vsce create-publisher 你的名字（随便）
最后写入你的token
再执行
vsce package
在项目目录下就可以生成后缀名为vsix的插件了。
欢迎一起踩坑
