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
- 先註冊賬號
- 填寫信息
- 選取打好的包上傳即可