VSCODE插件开发

ZhipengWan
714 阅读2分钟

第一步：npm install -g yo generator-code
第二步：yo code

经过一段时间实践，阅读了官方英文文档整理了一些常用api。

生命周期

事件：激活时机
onLanguage：当某种语言文件被打开的时候。比如 vue 文件  "onLanguage:vue",多种语言声明多条。
onCommand：触发一个命令。当命令被触发的时候相关的扩展插件也会被激活。"onCommand:extension.sayHello"
onDebug：在调试窗口打开之前激活。
onDebugInitialConfigurations：在 DebugConfigurationProvider 的 provideDebugConfigurations 方法被调用的时候触发。
onDebugResolve:type 在被指定类型 DebugConfigurationProvider 的 resolveDebugConfiguration 方法被调用的时候触发。
workspaceContains：当至少包含有一个文件的文件夹被打开的时候。
onFileSystem：读取特定方案中的文件或文件夹时。"onFileSystem:sftp"
onView：当指定ID的视图被展开的时候。
onUri：当系统范围内的 uri 被打开的时候。
onWebviewPanel：当 VSCode 需要使用匹配的 viewType 恢复一个webview的时候。
onCustomEditor：当 VSCode 需要使用匹配的 viewType 创建自定义编辑器时。
Start up：* 当 VSCode 启动的时候。
onStartupFinished：和 Start up 想同，在 vscode 启动的时候，不同点是他不会拖慢 vscode 的启动。

命令绑定快捷键

keybindings：
    "command": "demo.helloWorld",
    "key": "ctrl+f10",
    "mac": "cmd+f10",
    "when":
主要说下when：
    editorFocus：编辑器获得焦点时
    editorTextFocus：编辑器文本获得焦点
    resourceLangId == vue：语言是 vue 文件的时候
    resourceExtname != .js ：后缀不是js文件的时候

webview与vscode通信

借助acquireVsCodeApi()这个api即可完成通信。
发送
const vscode = acquireVsCodeApi();
let count = 0;
function postMessage(){
    const counter = document.getElementById('counter');
    counter.textContent = count++;
    vscode.postMessage({
        command: 'alert',
        text: '🐛  on line ' + count,
        attr: JSON.stringify({ key1: "size=normal",key2: "type=primary"})
    })
}

vscode接收
currentPanel.webview.onDidReceiveMessage( message => {
    switch (message.command) {
    case 'alert':
        vscode.window.showErrorMessage(message.text);
	vscode.window.showErrorMessage(message.attr);
	const codeData = new vscode.SnippetString(`<mtd-button size="small" type="primary"></mtd-button>`);
	const { line, character } = vscode.window.visibleTextEditors[0].selection.active;
	const insertionLocation = new vscode.Range(line, character, line, character);
	vscode.window.visibleTextEditors[0].insertSnippet(codeData, insertionLocation);
            return;
	}
    },
    undefined,
    context.subscriptions
);

声明周期
webview销毁
panel.onDidDispose(
  () => {
    // When the panel is closed, cancel any future updates to the webview content
    clearInterval(interval);
  },
  null,
  context.subscriptions
  )
也可以主动关闭const timeout = setTimeout(() => panel.dispose(), 5000);

如何获取光标前的当前行所有内容？

借助document 和 position //{line: '', charater: ''} 当前行的行数和字符位置
const start = new Position(position.line, 0);//当前行开始位置 
const range = new Range(start, position);// 返回一个数组  [{line: '2', charater: '0'}, {line: '2', charater: '10'}]
document.getText(range);

如何插入到当前行？

const { line, character } = vscode.window.visibleTextEditors[0].selection.active;
const insertLocation = new vscode.Range(line, character, line, character);
vscode.window.visibleTextEditors[0].insertSnippet(数据, insertionLocation);

如何获取当前选中的文本？

const editor = vscode.window.activeTextEditor;
editor.document.getText(editor.selection);

如何在浏览器打开？

vscode.env.openExternal(vscode.Uri.parse(url));// 可以是http HTTPS email VSCode itself (vscode: from vscode.env.uriScheme)

如何自动打开控制台输入命令？

const terminal = vscode.window.createTerminal();
terminal.show();
terminal.sendText(string)

如何打开confirm弹窗提示保存文件？

const res: any = await vscode.window.showSaveDialog({
  defaultUri: vscode.Uri.file(文件名：string)
});
await vscode.workspace.fs.writeFile(vscode.Uri.file(res.path), Uint8Array.from(Buffer.from(文本：string, 'utf-8')));
// await vscode.workspace.fs.delete(vscode.Uri.file()); 删除文件
avatar
文章
阅读
粉丝