monaco-editor

大前端

关于编辑器的使用，网上一搜一大堆，这里不再赘述

这里主要介绍编辑器使用时，遇到的关键问题和痛点

语法解释器

需要使用webpack插件monaco-editor-webpack-plugin
全局注册window.MonacoEnvironment对象，供monaco编辑器内核调度
根据当前编辑器的语言模式，读取对应的语法解释器worker

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
new MonacoWebpackPlugin({
    // 指定编辑器默认加载的语言
    languages: ['json', 'javascript', 'typescript', 'yaml'],
    // 自定义语言解释器worker
    customLanguages: [
        {
            label: 'yaml',
            // TODO: restore once https://github.com/pengx17/monaco-yaml/pull/48 is merged
            entry: 'monaco-yaml/lib/esm/monaco.contribution',
            worker: {
                id: 'vs/language/yaml/yamlWorker',
                // TODO: restore once https://github.com/pengx17/monaco-yaml/pull/48 is merged
                entry: 'monaco-yaml/lib/esm/yaml.worker.js'
            }
        }
    ]
})

语法提示（低代码编辑使用）

参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// validation settings
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
  noSemanticValidation: true,
  noSyntaxValidation: false
});

// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
  target: monaco.languages.typescript.ScriptTarget.ES2016,
  allowNonTsExtensions: true,
  allowJs: true
});

// extra libraries
monaco.languages.typescript.javascriptDefaults.addExtraLib(`
declare class getValue {
    /**
    * 这是什么
    */
    antd: {
        message:{
            success:()=>void;
        }
    },
}
`,
  'filename/facts.d.ts'
);

代码编辑时，需要加上这个注释

1
2
3
4
5
6
/**
 * @param {getValue} event
 */
function getValue(event) {
    event.antd.message
}
大前端