在 umijs （Ant Design）项目中使用 Monaco Editor 的配置高亮配置

最新推荐文章于 2025-11-24 16:53:21 发布

原创最新推荐文章于 2025-11-24 16:53:21 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何在UmiJS项目中配置并使用MonacoEditor，包括安装必要的依赖包、设置chainWebpack配置及指定支持的语言类型。

在 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
}