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. 選取打好的包上傳即可

官方開發文檔

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章