VSCode插件开发流程

1. 安装脚手架

npm install -g yo
npm install -g generator-code
yo code

2. 配置package.json

{
  "name": "jsx2css-convert-tool",
  "displayName": "jsx2css_convert_tool",//应用市场显示的名称 保持一致就好了
  "publisher": "CoderWGB",//必填 与管理后台那个ID相关联
  "author": "CoderWGB",
  "description": "jsx行内样式与css样式互相转换",
  "version": "0.0.1",
  "icon": "assets/images/tools.png",
  "license": "MIT",//打包发布的话必填 根目录放一个LICENSE文件即可
  //仓库地址可以关联作者信息的一个地址即可
  "repository": {
    "url": "https://github.com/WangGuibin/jsx2css-convert-tool-vscode-extension"
  },
  "engines": {
    "vscode": "^1.71.0"
  },
  //分类
  "categories": [
    "Other",
    "Formatters",
    "Azure"
  ],
  //搜索关键词 ASO优化咯
  "keywords": [
    "jsx-css-style",
    "jsx",
    "css",
    "style",
    "style-convert",
    "css-transform",
    "css-convert",
    "css-tools"
  ],
  //响应的事件 类似注册事件
  "activationEvents": [
    "onCommand:jsx2css-convert-tool.jsx2css"
  ],
  "main": "./extension.js",
  "contributes": {
    // cmd+shift+p 召唤输入命令
    "commands": [
      {
        "command": "jsx2css-convert-tool.jsx2css",
        "title": "JSX <=> CSS"
      }
    ],
    "menus": {
      //绑定菜单选项 具体看官方文档
      "editor/context": [
        {
          "when": "editorHasSelection && resourceFilename =~ /.js|.vue|.html|.css|.less|.scss|.styl|.jsx/",
          "command": "jsx2css-convert-tool.jsx2css",
          "group": "navigation"
        }
      ]
    },
    "keybindings": [
      //绑定快捷键
      {
        "command": "jsx2css-convert-tool.jsx2css",
        "key": "ctrl+shift+t",
        "mac": "cmd+shift+t",
        "when": "editorTextFocus"
      }
    ]
  }
}

3. 处理编辑器的事件

//此处举例为简单的文本替换 更多api参考官方文档
function activate(context) {
	 //绑定的事件回调
	let disposable = vscode.commands.registerCommand('jsx2css-convert-tool.jsx2css', function () {
		// 处理选中文本替换成"Hello VSCode!!!"
		let activeEditor = vscode.window.activeTextEditor;
		if (!activeEditor) {
			return;
		}
		let selection = activeEditor.selection
		var text = activeEditor.document.getText(selection);
		 text = "Hello VSCode!!!";
		activeEditor.edit((editBuilder) => {
			editBuilder.replace(new vscode.Range(selection.start, selection.end), text);
		})
	});
	context.subscriptions.push(disposable);
}

4. F5启动调试

5. 打包

打包之前先把 README修改好,最好是自己删掉重写,它的模板指定下了什么毒,没改几个字的话,打包一准报错

npm install -g vsce
vsce package

6. 发布

https://marketplace.visualstudio.com/manage/publishers

1. 先注册账号
2. 填写信息
3. 选取打好的包上传即可

官方开发文档