页面功能实现

[vite]monaco-editor 内嵌编辑器

https://microsoft.github.io/monaco-editor/

这里默认是vue3+vite的使用场景

安装

npm install monaco-editor
npm install vite-plugin-monaco-editor
// deno
deno i npm:monaco-editor
deno i npm:vite-plugin-monaco-editor

在`vite.config.ts`文件中

// ...
import ViteMonacoPlugin from 'vite-plugin-monaco-editor'
// ...
export default defineConfig({
// ...
  plugins: [
    vue(),
    (ViteMonacoPlugin as any).default({})
  ],
// ...
})

pixijs 2DWebGL

PixiJS 的核心是一个渲染系统，它使用 WebGL（或可选的 Canvas）来显示图片和其他 2D 视觉内容。它提供了完整的场景图（要渲染的对象的层次结构），并提供交互支持以支持处理单击和触摸事件

https://pixi.nodejs.cn/

https://pixijs.download/release/docs/index.html

安装

npm安装

npm install pixi.js

引入

import * as PIXI from 'pixi.js';

使用示例：

import { Application, Sprite, Assets } from 'pixi.js';
// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new Application();
// Wait for the Renderer to be available
await app.init();
// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.canvas);
// load the texture we need
const texture = await Assets.load('bunny.png');
// This creates a texture from a 'bunny.png' image
const bunny = new Sprite(texture);
// Setup the position of the bunny
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;
// Rotate around the center
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// Add the bunny to the scene we are building
app.stage.addChild(bunny);
// Listen for frame updates
app.ticker.add(() => {
	// each frame we spin the bunny around a bit
	bunny.rotation += 0.01;
});

pixijs默认图片请求皆是网络请求, 实测在vue3+vite+pixijs的项目中, pixijs无法识别到src/assets目录下的图片, 但是可以访问到public文件夹下的图片, 未验证此特性会在构建electron应用或其它应用时是否会有影响

vscode插件开发

2025/1/10实操可用
请注意务必在准备开发vscode时将其版本更新至最新，版本报错问题很难找到，会引起打包和运行失效
node 版本 : 20.18.0 (64-bit executable)
vscode版本：1.96.0

基础

创建项目

npm i yo generate-code -g
yo code

在打包前

修改README.md文件
在package.json文件里加上"repository": {}
补上LICENSE文件，参考https://choosealicense.com/

运行以及打包

# Ctrl + F5 启动一个新页面调试
pnpm i -D @vscode/vsce
pnpm vsce package --no-dependencies

api教程及接口

https://code.visualstudio.com/api/ux-guidelines/overview

用自定义页面打开文本文件

这里提供一个最简单的示例，在页面打开后，还需要解决vscode特有的权限问题，以及webview和vscode通信问题，还挺麻烦

package.json

"contributes": {
  "customEditors": [
    {
      "viewType": "cloyir.flowcEditor",
      "displayName": "awa",
      "selector": [
        {
          "filenamePattern": "*.flowc"
        }
      ],
      "priority": "default"
    }
  ]
}

extension.ts

import * as vscode from 'vscode';
import { FlowcEditorProvider } from './flowcEditorProvider';

export function activate(context: vscode.ExtensionContext) {
	context.subscriptions.push(FlowcEditorProvider.register(context));
}

export function deactivate() { }

flowcEditorProvider.ts

import * as vscode from 'vscode';

export class FlowcEditorProvider implements vscode.CustomTextEditorProvider {

    public static register(context: vscode.ExtensionContext): vscode.Disposable {
        return vscode.window.registerCustomEditorProvider(
            'cloyir.flowcEditor',
            new FlowcEditorProvider(context),
            {
                supportsMultipleEditorsPerDocument: false,
            }
        );
    }

    constructor(private readonly context: vscode.ExtensionContext) { }

    public async resolveCustomTextEditor(
        document: vscode.TextDocument,
        webviewPanel: vscode.WebviewPanel,
        token: vscode.CancellationToken
    ): Promise<void> {
        webviewPanel.webview.options = {
            enableScripts: true,
        };

        webviewPanel.webview.html = `
        <!DOCTYPE html>
			<html lang="en">
			<head>
				<meta charset="UTF-8">
            </head>
			<body>
				<h1>${document.getText()}</h1>
            </body>
		</html>`;
    }
}