在 umijs 项目中使用 Monaco Editor 的配置
- 安装相关包
yarn add monaco-editor
、yarn add monaco-editor-webpack-plugin
、yarn add react-monaco-editor
- 添加
chainWebpack
配置
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
...
const chainWebpack = (config, { webpack }) => {
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
{
languages: ['yaml']
}
])
};
export default{
...
chainWebpack
}
- 使用
<Monaco
width="100%"
height="100%"
language="yaml"
theme="vs-light"
value={code}
options={{ selectOnLineNumbers: true }}
/>