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的活了,各位自己加油。附上微软官方的教程以及代码

相关推荐
花海如潮淹1 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown10 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui