jjb-lc-designable/react-settings-form/components/MonacoInput/config.ts

基于alibaba-designable源码二次封装的表单设计器。

import { loader } from 'jjb-lc-plugin-monaco-editor/react'
import chromeTheme from './themes/chrome'
import monokaiTheme from './themes/monokai'
import { format } from './format'

let initialized = false

export const initMonaco = () => {
  if (initialized) return
  loader.init().then((monaco) => {
    // @ts-ignore
    monaco.editor.defineTheme('monokai', monokaiTheme as any)
    // @ts-ignore
    monaco.editor.defineTheme('chrome-devtools', chromeTheme as any)
    // @ts-ignore
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
      // @ts-ignore
      target: monaco.languages.typescript.ScriptTarget.Latest,
      allowNonTsExtensions: true,
      // @ts-ignore
      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
      // @ts-ignore
      module: monaco.languages.typescript.ModuleKind.CommonJS,
      noEmit: true,
      esModuleInterop: true,
      // @ts-ignore
      jsx: monaco.languages.typescript.JsxEmit.React,
      reactNamespace: 'React',
      allowJs: true,
    })
    // @ts-ignore
    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: false,
      noSyntaxValidation: true,
    })
    // @ts-ignore
    monaco.languages.registerDocumentFormattingEditProvider('typescript', {
      async provideDocumentFormattingEdits(model) {
        return [
          {
            text: await format(
              model['getDesignerLanguage']?.() || 'typescript',
              model.getValue()
            ),
            range: model.getFullModelRange(),
          },
        ]
      },
    })
    initialized = true
  })
}