Vite+Vue3+Typescript对于MonacoEditor的实践(慢更)

在页面上加载Monaco

这个参考 vite的一个issue

步骤

yarn add monaco-editor

import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from 'monaco-editor';

const root = ref<HTMLElement>()

// @ts-ignore
self.MonacoEnvironment = {
  getWorker(_: string, label: string) {
    if (['typescript', 'javascript'].includes(label)) {
      return new TsWorker()
    }
    return new EditorWorker()
  }
}
let editor: monaco.editor.IStandaloneCodeEditor;

在Mount时候初始化editor，加载对Typescript的语法支持

monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: true,
    noSyntaxValidation: false
  });
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true
  });
editor = monaco.editor.create(root.value as HTMLElement, {
    value: defaultCode,//编辑器初始显示文字
    language: 'typescript',//语言支持自行查阅demo
    automaticLayout: true,//自动布局
    theme: 'vs-dark' //官方自带三种主题vs, hc-black, or vs-dark
  });

如何载入自己的Type Definition

需要使用monaco.languages.typescript.javascriptDefaults.addExtraLib
以及
monaco.editor.createModel

提前准备index.d.ts，如果内容小直接塞代码里。
我这里直接把文件放到了public文件下面。

let libUri = 'ts:filename/index.d.ts';
let libSource = (await axios.get("index.d.ts")).data;
monaco.languages.typescript.javascriptDefaults.addExtraLib(
      libSource,
      libUri
  );
monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));

虽然很别扭，但是曲线救国了。