React Monaco编辑器不支持语法高亮。

Question

我刚刚安装了React Monaco Editor，看起来除了没有语法高亮之外，一切都正常。我试图使用“python”作为语言，但字体仍然保持相同的灰色默认颜色：

你有没有关于如何纠正这个问题的想法？

这是我的Code.js文件，我正在运行Monaco编辑器：

import React from "react";
import MonacoEditor from "react-monaco-editor";

class Code extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: 'print("Hello, World!")'
    };
  }
  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,
      fontSize: 18,
      colorDecorators: true
    };
    return (
      <MonacoEditor
        width="800"
        height="600"
        language="python"
        theme="vs-dark"
        value={code}
        options={options}
        onChange={this.onChange}
        editorDidMount={this.editorDidMount}
      />
    );
  }
}

export default Code;

我已经添加了以下代码到webpack.config.js文件的顶部：

const path = require('path');
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: ['python']
    })
  ]
};

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

module.exports = {
  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'],
}

- StackUnderFlow

Answer 1

如果您正在使用 Monaco 编辑器与 create-react-app，而不想弹出应用程序（以允许手动编辑 webpack 配置文件），则需要采用不同的方法。这段 段落 解释得很清楚。

The easiest way to use the react-monaco-editor with create-react-app is to use the react-app-rewired project. For setting it up, the following steps are required:

• Install react-app-rewired: npm install -D react-app-rewired
• Replace react-scripts by react-app-rewired in the scripts section of your packages.json
• Create a config-overrides.js in the root directory of your project with the following content:

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

module.exports = function override(config, env) {  
    config.plugins.push(new MonacoWebpackPlugin({
        languages: ['json']
    }));
    return config;
}

For more information checkout the documentation of react-app-rewired here.

我不需要指定其他任何内容就可以使它工作。无需手动为webpack指定加载器。

- Mike Lischke

Answer 2

对我来说，上述两个答案都不起作用 - 不确定是否与Codesandbox有关或者我犯了一个错误。

但是使用@monaco-editor/react可以在不更改CRA设置的情况下正常工作。

使用方式唯一的区别是默认导出不是受控组件 - 因此onchange无法使用。

要使用受控组件，请使用import {ControlledEditor as MonacoEditor} from "@monaco-editor/react"。 onchange 处理程序需要稍作修改，首先是事件，然后是newText - 只是实现上的小差异。

用法如下所示：

import React, { useState } from "react";
import { ControlledEditor as MonacoEditor } from "@monaco-editor/react";
export const Editor = () => {
  const [code, setCode] = useState(`const greeting = () => {
    alert("Hello world");
}`);

  const options = {
    minimap: {
      enabled: false
    }
  };

  const changeHandler = (evt, newText) => {
    setCode(newText);
  };

  const editorDidMount = (editor, monaco) => {
    console.log("editorDidMount", editor);
  };

  return (
    <MonacoEditor
      width="100%"
      height="100%"
      language="javascript"
      theme="vs-dark"
      value={code}
      options={options}
      onChange={changeHandler}
      editorDidMount={editorDidMount}
    />
  );
};

options可以用于修改Monaco编辑器。在我的情况下，我不想显示缩略图。所有可用的选项都可以在编辑器API文档中找到。

您可以在此Codesandbox中找到工作演示。

我发现唯一不起作用的是撤销/重做，如下问题所述。没有触发任何更改事件，但稍后我会检查 - 目前我很满意。

- AWolf

---

使用 @monaco-editor/react 对我只有部分效果 - 我没有看到任何高亮显示。 - cipacda

Answer 3

你在Webpack中配置Monaco编辑器的CSS失败了吗？也许这是问题所在，因为其他一切看起来都很好。

const path = require('path');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');

{
  test: /\.css$/,
  include: MONACO_DIR,
  use: ['style-loader', 'css-loader'],
}

解决方案

问题并不在于配置文件，而是配置文件的位置。 如果要定制React CRA模板中的webpack配置，必须弹出应用或者使用customize-cra（如果您不想弹出应用），然后进行配置。此处的OP将webpack配置在node-modules/中，这不是正确的webpack配置方式。请使用react-app-rewired和customize-cra进行配置。

- Pushkin

---

尝试添加了这个，但似乎没有任何效果。也没有出现错误。我已经在上面更新了webpack代码，准确地插入了我所添加的内容。我是否插入了不正确的东西？ - StackUnderFlow

@StackUnderFlow 你在使用哪个样板文件？你确定 webpack 正常工作了吗？ - Pushkin

使用Create React App并编辑webpack.config文件，路径为：/node_modules/react-scripts/config/webpack.config.js。 - StackUnderFlow

那不是正确的配置webpack的方式，完全错了。使用react-app-rewired与customize-cra。 - Pushkin

现在这很有道理，并且可以与rewired + cra一起使用。谢谢！ - StackUnderFlow