一、说明

之前写过一片文章,在 react 中使用 monaco-editor,然后有好几个读者私聊我说代码不高亮,我一开始没放在心上,但是后面我研究了一下,我的代码中使用的是 0.18.1 版本,而最新的 0.25.1 版本,使用我的代码是无法高亮。

react-monaco-editor@0.25.1 文档地址:https://www.npmjs.com/package/react-monaco-editor

发现 0.25.1 版本增加了 webpack.config.js 的 plugin 的说明,如果代码不高亮,则需要增加一个 webpack - plugin

二、使用 0.25.1 版本

说明: 我使用的是 create-react-app 脚手架。

安装

安装最新版本的 react-monaco-editor:

tnpm install react-monaco-editor -S

组件代码

其实我的代码和之前的文章中是没有任何变化的,这里只是又重复了一遍而已。

建议代码部分还是看之前的文章即可

import React, {Component} from 'react';
import logo from './logo.svg';
import MonacoEditor from 'react-monaco-editor';
import './App.css';

const defaultCode = `export default {
  name: 'name',
  code: 'code'
}`;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: defaultCode
    }
    this.onChangeHandle = this
      .onChangeHandle
      .bind(this);
  }
  onChangeHandle(value, e) {
    this.setState({code: value});
  }
  editorDidMountHandle(editor, monaco) {
    console.log('editorDidMount', editor);
    editor.focus();
  }
  render() {
    const code = this.state.code;
    const options = {
      selectOnLineNumbers: true,
      renderSideBySide: false
    };
    return (
      <div >
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo"/>
            <h1 className="App-title">Welcome to React</h1>
          </header>
        </div>
        <div className="wrapper">
          <div className="editor-container">
            <MonacoEditor
              theme="vs-dark"
              language="javascript"
              value={code}
              options={options}
              onChange={this.onChangeHandle}
              editorDidMount={this.editorDidMountHandle}/>
          </div>
          <div className="view" contenteeitable={'true'}>
            {this.state.code}
          </div>
        </div>
      </div>
    );
  }
}

export default App;

如果此时运行程序,发现是不高亮的:

20190413205123.jpg

三、代码如果不高亮的解决办法

代码不高亮,文档中有说明:

第一种方法是使用 monaco-editor 提供的 webpack plugin,如果要注入新的 plugin,就需要修改 webpack.config.js

因为我使用的是 create-react-app 脚手架生成项目文档,本身是没有暴露 webpack.config.js,因此需要将 webpack.config.js 暴露出来

暴露 webpack.config.js:

create-react-app 提供了命令可以直接将编译到 react-scripts 中的脚本和配置文件反编译或者反注入到项目目录中,这样子就能够可控 webpack。

npm run eject

修改 webpack,注入新的 plugin:

注意我只修改了 webpack.dev.config.js ,生产环境需要修改 webpack.prod.config.js

完整文档见:https://github.com/Microsoft/monaco-editor-webpack-plugin#using

npm install monaco-editor-webpack-plugin
// webpack.config.dev.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
// 下面只列了 MonacoWebpackPlugin 的注入
module.exports = {
  ...
  plugins: [
    new MonacoWebpackPlugin(['apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml'])
  ],
  ...
};

修改完成后,重新运行:

tnpm run start

此时编辑器无论是代码高亮还是代码提示都没有问题:

222.jpg

四、其他脚手架

如果是其他脚手架而非 create-react-app,则同样需要修改 webpack.config.js,脚手架肯定会暴露给你修改 webpack 的方式,否则是一个不称职的脚手架。

webpack.config.js 按照上面方式注入 plugin 之后即可使用。

有问题可以联系我,见【联系】页面。

五、完整代码示例

https://github.com/postbird/react-monaco-editor-demo/tree/dev/0.0.1