vscode 自定义编辑器（看完即入门）

前言

最近在研究如何开发自定义编辑器，看了下vscode官方给出的例子，总感觉小猫画板的例子用来入门多少是有点繁琐了。所以，在这里我准备了一个无比简单的my-editor的例子，绝对是有手就会！！！

前置条件

如何创建vscode extension是简单且必要的知识，可以参考官方文档

简单来说就是,

安装yo generator-code

css 复制代码

npm install --global yo generator-code

在目标文件里

css 复制代码

yo code

接下来会显示如下的这些信息! 在这里我们选择第一个选项,并简单的给extension命名就行。我的例子里就叫my-editor，随后一路回车就可以了

用vscode打开my-editor文件夹，可以看到里面的结构如下

其中，我们主要关注的就是src文件夹和package.json

简单的看下此时的效果叭

在src/extension.ts文件里按下F5，然后vscode会编译和运行这个extension，同时会唤起一个新的vscode窗体，ctrl+shift+p，选择hello world命令，就能看到如下图一般的效果

提示：注意看下自己的vscode版本和package.json里面的版本是不是一致，不一致的话就把package.json里面的版本改成你现在用的vscode的版本，要不然会看不到效果。

自定义编辑器

在package.json中的contributes里加上customEditors

json 复制代码

 "contributes": {
    "commands": [
      {
        "command": "my-editor.helloWorld",
        "title": "Hello World"
      }
    ],
    "customEditors": [
      {
        "viewType": "demo.my",
        "displayName": "custom editor demo",
        "selector": [
          {
            "filenamePattern": "*.my"
          }
        ]
      }
    ]
  },

在src文件夹里新建webview文件夹，并在里新建myEditor.ts

ts 复制代码

import * as vscode from 'vscode';


export class MyEditorProvider implements vscode.CustomTextEditorProvider {

	public static register(context: vscode.ExtensionContext): vscode.Disposable {
		const provider = new MyEditorProvider(context);
		const providerRegistration = vscode.window.registerCustomEditorProvider(MyEditorProvider.viewType, provider);
		return providerRegistration;
	}

	private static readonly viewType = 'demo.my';
	constructor(
		private readonly context: vscode.ExtensionContext
	) { }

	public async resolveCustomTextEditor(
		document: vscode.TextDocument,
		webviewPanel: vscode.WebviewPanel,
		_token: vscode.CancellationToken
	): Promise<void> {
		// Setup initial content for the webview
		webviewPanel.webview.options = {
			enableScripts: true,
		};
		webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);

		function updateWebview() {
			webviewPanel.webview.postMessage({
				type: 'update',
				text: document.getText(),
			});
		}

		const changeDocumentSubscription = vscode.workspace.onDidChangeTextDocument(e => {
			if (e.document.uri.toString() === document.uri.toString()) {
				updateWebview();
			}
		});

		// Make sure we get rid of the listener when our editor is closed.
		webviewPanel.onDidDispose(() => {
			changeDocumentSubscription.dispose();
		});

		// Receive message from the webview.
		
		updateWebview();
	}

	/**
	 * Get the static html used for the editor webviews.
	 */
	private getHtmlForWebview(webview: vscode.Webview): string {
		
		return /* html */`
		<html lang="en">
		<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<title>my editor demo</title>
		</head>
		<body>
		<h1>Hi!my custom editor!</h1>
		</html>
			`;
	}
}

在extension.ts里面引用

ts 复制代码

import { MyEditorProvider } from './webview/myEditor'
...
...
context.subscriptions.push(MyEditorProvider.register(context));

现在，我们可以执行npm run complie命令编译我们的代码，编译完成后在任意的*.ts文件里按下F5唤起调试的extension，最后新建demo.my就能看到如下的效果

打包

直接在terminal中输入vsce package（要把README.md里的内容全部删除，然后随便写点什么，要不然不能打包）

最后

这个示例很简单，看完就能入门了。接下来要如何定义自己的editor长什么样，那就是html+css+js的活了，各位自己加油。附上微软官方的教程以及代码。