在 umijs 項目中使用 Monaco Editor 的配置

在 umijs 項目中使用 Monaco Editor 的配置

1. 安裝相關包
   yarn add monaco-editor、yarn add monaco-editor-webpack-plugin、yarn add react-monaco-editor
2. 添加 chainWebpack 配置

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
...
const chainWebpack = (config, { webpack }) => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
        {
            languages: ['yaml']
        }
    ])
};
export default{
    ...
    chainWebpack
}

3. 使用

<Monaco
    width="100%"
    height="100%"
    language="yaml"
    theme="vs-light"
    value={code}
    options={{ selectOnLineNumbers: true }}
/>