https://code.visualstudio.com/api/get-started/your-first-extensionnpm install -g yo generator-code
yo code
正常开发选择ts或者js
结果如下,package.json 的contributes.commands节点控制命令生命,
contributes.menus定义菜单
extension.ts里面注册事件
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(vscode.commands.registerCommand('extension.sqltool.execSql', () => {
// vscode.window.showInformationMessage('not implemention!');
const editor = vscode.window.activeTextEditor;
if (editor) {
const document = editor.document;
const inputText = document.getText();
editor.edit(editBuilder => {
const start = new vscode.Position(0, 0);
const end = new vscode.Position(document.lineCount, 0);
const range = new vscode.Range(start, end);
editBuilder.replace(range, '处理后的结果');
});
}
}));
}
image.png
image.png
tsc -watch -p ./
把ts代码转换为js代码,并实时监听,npm run compile
也是同样的效果
运行扩展实际的定义是这样的
image.png
不生效则应该更新新版本vscode,
https://astexplorer.net/可以结合babel做替换代码内容的事情,不过我觉得简单事情复杂化了,我用的行扫描,完成了一个存储过程直接转换为sql的代码
发布扩展
npm install -g @vscode/vsce
vsve publish
获取tokenhttps://marketplace.visualstudio.com/manage/publishers/https://dev.azure.com/lozn/_usersSettings/tokens
image.png
image.png
https://marketplace.visualstudio.com/manage/publishers/lozn
标签:插件,const,vscode,image,笔记,editor,com,png From: https://blog.51cto.com/lozn/7407643