如何通过monaco-editor-webpack-plugin使antdesignpro中config.ts的react-monaco-editor代码高亮

要使用`monaco-editor-webpack-plugin`来实现Ant Design Pro中的config.ts的React Monaco Editor代码高亮，需要进行以下步骤：

1. 安装依赖

npm install monaco-editor-webpack-plugin --save-dev

2. 在webpack配置文件中添加插件

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

module.exports = {
  //...
  plugins: [
    //...
    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: ['json', 'javascript', 'typescript', 'html', 'css']
    })
  ]
};

3. 在config.ts中引入monaco-editor

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

//...
const CodeEditor: React.FC<Props> = (props) => {
  const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
    console.log('editorDidMount', editor);
  };
  return (
    <div className={styles.container}>
      <MonacoEditor
        height="100%"
        language="typescript"
        theme="vs-dark"
        value={props.code}
        options={{
          selectOnLineNumbers: true,
          automaticLayout: true,
          minimap: {
            enabled: false
          }
        }}
        editorDidMount={handleEditorDidMount}
      />
    </div>
  );
};

export default CodeEditor;

4. 在config.ts中使用CodeEditor组件

import CodeEditor from './components/CodeEditor';

//...
const Config: React.FC<RouteComponentProps> = () => {
  const [code, setCode] = useState('const a = 1;');
  return (
    <div className={styles.container}>
      <CodeEditor code={code} />
    </div>
  );
};

export default Config;

这样就可以在Ant Design Pro的config.ts文件中使用React Monaco Editor，并且实现代码高亮了。