Monaco 是微软开源的一个编辑器，VSCode 也是基于 Monaco 进行开发的。如果在 React 中如何使用 Monaco，本文将介绍如何在 React 中引入 Monaco。

安装 React 依赖

<code>yarn add react-app-rewired --dev

yarn add monaco-editor-webpack-plugin --dev

yarn add monaco-editor

yarn add react-monaco-editor

创建Webpack 配置文件并添加插件

在项目的根目录下创建 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;

}

引入 Monaco 组件

核心函数 handleEditorDidMount，行选中时，在行尾添加一句话，通过事件监听函数 onDid