背景

有没有觉得在微信开发工具里面添加一些插件可以很方便。因为微信IDE的编辑本身是依赖vscode开发，所以编写vscode插件自然可以在微信IDE使用。这样做好处就是可以满足到自己一些开发使用习惯。

1.获取插件的目录位置

那么如何获取插件里面的目录，并且打开它。代码似乎不复杂，只不过在找资料的时候，发现找了很久才知道这个方法context.extensionPath。

我们目的是拿到这个目录，并且实现打开它。首先需要知道对应文件夹的位置。利用上下文获取。看如下代码

async function openFile(context){
	const fileUri = vscode.Uri.file(path.join(context.extensionPath, 'code.md'));

	const doc1 = await vscode.workspace.openTextDocument(fileUri );
	 
    await vscode.window.showTextDocument( doc1, vscode.ViewColumn.Two,true);
}

通过这个方式组装获取对应插件扩展位置context.extensionPath。在activate 激活后，传递了context 就可以通过它拿到对应位置了。

const vscode = require('vscode');
const path = require('path');
function activate(context) {
 
   let disposable = vscode.commands.registerCommand('extension.opendfile', function () { 
	openFile(context);//传递上下文
   });

	context.subscriptions.push(disposable);
}

拿到插件文件夹目录，组装一个Uri对象提供文档方法openTextDocument打开。最后展示对应IDE里面。

	const fileUri = vscode.Uri.file(path.join(context.extensionPath, 'code.md'));

这个小小的功能，可以可以满足到一些日常小抄的代码片段的过程。只要满足日常使用，在编码过程就可以随时打开对应笔记使用。并且记录下，形成沉淀了。

2 IDE右键打开一个网页

上述方法很容易。同理我们如果打开一个网页，那样如何弄？

async function openFile(context){
	const panel = vscode.window.createWebviewPanel(
        'Test', 
        'Test Code', 
        vscode.ViewColumn.One, 
      );
	  	const fileUri = vscode.Uri.file(path.join(context.extensionPath, 'index.html'));

	const doc1 = await vscode.workspace.openTextDocument(fileUri );
	  panel.webview.html = doc1.getText();//读取对应html文件
}

用这个方法，微信IDE上就可以打开对应插件index.html 网页了。里面网页可以作为IDE 一部分使用。

利用上述功能在微信IDE就可以愉快玩耍了。添加一些小插件帮助我们编码了。