React Monaco Editor 没有语法高亮

Question

刚刚安装了React Monaco Editor，除了没有语法高亮外，似乎运行正常。我正在尝试使用“python”作为语言，但字体保持相同的灰色默认颜色：

关于如何纠正问题的任何想法？

这是我运行 Monaco 编辑器的 Code.js：

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'],
}

Answer 1

如果您正在使用 Monaco 编辑器，create-react-app您将需要不同的方法，如果您不想弹出应用程序（以允许手动编辑 webpack 配置文件）。这一段描述得很好：

使用 react-monaco-editor 和 create-react-app 的最简单方法是使用 react-app-rewired 项目。要进行设置，需要执行以下步骤：

• 安装 react-app-rewired： npm install -D react-app-rewired
• 在packages.json 的脚本部分用react-app-rewired 替换react-scripts
• 在你的项目根目录下创建一个 config-overrides.js ，内容如下：

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

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

有关更多信息，请在此处查看react-app-rewired 的文档 。

我无需指定任何其他内容即可使其工作。无需手动为 webpack 指定加载器。

Answer 2

您是否在 Webpack 中为 Monaco Editor 配置 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。