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));

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

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值