解决create-react-app & antd pro 中使用monaco-editor

​场景：

你可能需要一个能够写代码的界面，高亮 + 提示  然后保存到数据库中，ui 如下 所以你可能找到npm 上的 react-monaco-editor， 当然你也可以monaco-editor自己搭建

1. 在 create-react-app 中

Installation

npm install react-monaco-editor
npm install monaco-editor-webpack-plugin
npm install monaco-editor #有可能你缺少依赖，不缺少就别安装了
npm run eject #解开不可逆， 为了后面配置webpack

Using with Webpack

import React from 'react';
import { render } from 'react-dom';
import MonacoEditor from 'react-monaco-editor';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '// type your code...',
    }
  }
  editorDidMount(editor, monaco) {
    console.log('editorDidMount', editor);
    editor.focus();
  }
  onChange(newValue, e) {
    console.log('onChange', newValue, e);
  }
  render() {
    const code = this.state.code;
    const options = {
      selectOnLineNumbers: true
    };
    return (
      <MonacoEditor
        width="800"
        height="600"
        language="javascript"
        theme="vs-dark"
        value={code}
        options={options}
        onChange={::this.onChange}
        editorDidMount={::this.editorDidMount}
      />
    );
  }
}

render(
  <App />,
  document.getElementById('root')
);

webpack.config.js:

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']
    })
  ]
};

Monaco Editor 在内部使用 CSS 导入，因此，如果您在项目中使用 CSS 模块，则默认情况下可能会发生冲突。为了避免这种情况 - 应用程序和monaco编辑器包的单独css加载器：

/ Specify separate paths
const path = require('path');
const APP_DIR = path.resolve(__dirname, './src');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');

{
  test: /.css$/,
  include: APP_DIR,
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
      namedExport: true,
    },
  }],
}, {
  test: /.css$/,
  include: MONACO_DIR,
  use: ['style-loader', 'css-loader'],
}

到了这里你可能运行成功了， 但是也有可能没有运行成功， 没成功的话，那就升级你的版本号为最新吧

0.25.X版本后增加了 webpack.config.js 的 plugin 的说明

2.在antd pro中，主要是umi\

install

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

config webpack\

这里可以是.umirc.js文件

// .umirc.js
const chainWebpack = (config, { webpack }) => {   
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [{          
        languages: ['javascript']       
   }]
)};
export default {   
    ...,   
    chainWebpack 
}

也可以是config目录下config.js中配置 

defineConfig

    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [        {            languages: ['javascript']        }    ])};export default defineConfig({  chainWebpack,  hash: true,  antd: {},  dva: {    hmr: true,  },  ....  })

核心理解 chainWebpack这个参数配置即可

umijs.org/config#chai…

当然，到这里基本配置完成了，有以下几种情况\

1. 你成功运行了，且没有bug。那就恭喜你的， 你的版本正好合适嘛
2. 你成功运行，但是发现antd 部分样式被覆盖
3. 你只有一个编辑框，可以撸代码，但是没有提示和高亮语法

针对问题2：

github.com/umijs/umi/i…

当然，如果你的umi是最新的，这个bug已经修复了，如果你的版本比较old， 那就考虑一下吧\

针对问题三：

• 查看你的webpack配置
• 检查版本
• 检查依赖

我觉得更多的可能用不了，依然不能高亮和提示

似乎是monaco-editor在umi里使用有个坑

参考：hub.fastgit.org/umijs/umi/i…

问题收录

• pro中：

  github.com/ant-design/… umi中：

hub.fastgit.org/umijs/umi/i…

那杂么办？

直接推荐 @monaco-editor/react

---

下面的字是不是很感人！！

Monaco Editor for React · use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins

www.npmjs.com/package/@mo…

npm install @monaco-editor/react

import React from "react";
import ReactDOM from "react-dom";

import Editor from "@monaco-editor/react";

function App() {
  function handleEditorChange(value, event) {
    console.log("here is the current model value:", value);
  }

  return (
   <Editor
     height="90vh"
     defaultLanguage="javascript"
     defaultValue="// some comment"
     onChange={handleEditorChange}
   />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React, { useRef } from "react";
import ReactDOM from "react-dom";

import Editor from "@monaco-editor/react";

function App() {
  const monacoRef = useRef(null);

  function handleEditorWillMount(monaco) {
    // here is the monaco instance
    // do something before editor is mounted
    monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
  }

  function handleEditorDidMount(editor, monaco) {
    // here is another way to get monaco instance
    // you can also store it in `useRef` for further usage
    monacoRef.current = editor; 
  }

  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// some comment"
      beforeMount={handleEditorWillMount}
      onMount={handleEditorDidMount}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

install后就可以直接使用了

热度对比

类似的包太多，选择你喜欢的吧~