React项目集成Monaco Editor相关包区别及Neutrino配置咨询

1. 安装所需依赖 #

你一共需要安装3个包即可满足需求：

• react-monaco-editor：社区维护的React封装Monaco组件，省去手动封装原生编辑器实例的成本
• monaco-editor：微软官方核心编辑器包，自带SQL语法基础校验、关键字补全能力
• monaco-editor-webpack-plugin：微软官方webpack插件，用于处理编辑器语法Worker、资源加载逻辑，为必需配置项

安装命令：

npm install react-monaco-editor monaco-editor monaco-editor-webpack-plugin

2. 配置neutrinorc.js #

你的项目用Neutrino管理配置，无需修改现有webpack.config.js，直接在.neutrinorc.js中添加插件配置即可，示例如下：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  use: [
    // 保留你项目原来的其他preset配置，比如React预设等
    // 新增以下Monaco相关自定义配置
    (neutrino) => {
      neutrino.config
        .plugin('monaco')
        .use(MonacoWebpackPlugin, [{
          // 仅加载SQL语言相关资源，大幅减小打包体积
          languages: ['sql']
        }]);
    }
  ]
};

3. 业务组件中使用编辑器 #

默认指定language="sql"后，编辑器会自动开启基础SQL语法校验、关键字补全能力，无需额外配置。如果需要扩展自定义的表名、字段名补全，可以按以下示例扩展：

import React, { useRef } from 'react';
import MonacoEditor from 'react-monaco-editor';

const SqlEditor = () => {
  const editorRef = useRef(null);

  const editorDidMount = (editor, monaco) => {
    editorRef.current = editor;
    // 不需要自定义补全的话可以删除以下逻辑
    monaco.languages.registerCompletionItemProvider('sql', {
      provideCompletionItems: () => {
        const suggestions = [
          {
            label: 'BUSINESS_USER_TABLE',
            kind: monaco.languages.CompletionItemKind.Table,
            insertText: 'BUSINESS_USER_TABLE',
            detail: '业务用户主表'
          }
        ];
        return { suggestions };
      }
    });
  };

  return (
    <MonacoEditor
      width="100%"
      height="600px"
      language="sql"
      theme="vs-light"
      value="SELECT * FROM test"
      options={{
        // 开启自动补全
        quickSuggestions: true,
        // 开启SQL语法校验
        sql: { validate: true },
        lineNumbers: 'on',
        tabSize: 2
      }}
      editorDidMount={editorDidMount}
      onChange={(newValue) => console.log('编辑器内容：', newValue)}
    />
  );
};

export default SqlEditor;

内容的提问来源于stack exchange，提问作者tRuEsAtM