vscode 自定义编辑器(看完即入门)

前言

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

前置条件

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

简单来说就是,

  1. 安装yo generator-code
css 复制代码
npm install --global yo generator-code
  1. 在目标文件里
css 复制代码
yo code

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

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

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

  1. 简单的看下此时的效果叭

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

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

自定义编辑器

  1. 在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"
          }
        ]
      }
    ]
  },
  1. 在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>
			`;
	}
}
  1. 在extension.ts里面引用
ts 复制代码
import { MyEditorProvider } from './webview/myEditor'
...
...
context.subscriptions.push(MyEditorProvider.register(context));
  1. 现在,我们可以执行npm run complie命令编译我们的代码,编译完成后在任意的*.ts文件里按下F5唤起调试的extension,最后新建demo.my就能看到如下的效果
  1. 打包

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

最后

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

相关推荐
3Katrina1 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918411 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子8162 小时前
scroll-marker轮播组件不再难
前端·css