【React】Monaco真是yyds，都来搞个ts代码编辑器吧~

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

介绍

我们今天就用React实现一个可以写ts代码的网页编辑器。

效果如下：

注意，这不是在vscode内，而且在网页内。是不是眼前一亮，其实，本期只是为大家介绍一个库，来实现该效果的。它就是大名鼎鼎的Monaco Editor。它是一个支持vscode功能强大的代码编辑器，简直是yyds。接下来，我们就讲述怎么在react中来使用它。

使用

1.创建应用

npx create-react-app app --template typescript

我们先用官方的脚手架工具创建一个应用。

2.安装Monaco

因为我们现在的技术栈用了React所以我们会用react-monaco-edotor，专门在React组件的形式使用。

我们先来安装一下：

yarn add monaco-editor react-monaco-editor

3.引入Monaco

然后新建一个tsx我们将其引入到页面上

import React, { useState, FC, ReactElement } from "react";
import MonacoEditor from "react-monaco-editor";
interface Props {}
const MyEdit: FC<Props> = (): ReactElement => {
  const [text, setText] = useState("");
  function onChangeHandle(value: any) {
     setText(value);
  }
  return (
      <div>
        <MonacoEditor
          width="100%"
          height={window.innerHeight - 16}
          language="typescript"
          theme="vs-dark"
          value={text}
          onChange={onChangeHandle}
          options={{
            selectOnLineNumbers: true,
            matchBrackets: "near",
          }}
        />
      </div>
  );
}
export default MyEdit;

此时此刻，我们执行打开这个页面看看编辑器已经出来了~

但是我们发现了一个问题，就是明明语言设置了typescript，可以编辑器并没有识别出关键词变色。别急，我们还差一步。

4.关键词识别

我们要识别关键词要借助一个webpack插件

yarn add monaco-editor-webpack-plugin -D 

因为是官方脚手架搭建，所以我们要执行：

yarn eject

把webpack.config.js解出来，在里面把plugin引入。

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = function (webpackEnv) {
     // ...
    return {
        // ...
        plugins: [
            // ...
              new MonacoWebpackPlugin(),
            // ...
        ]
        // ...
    }
}

然后我们重新运行，再看，成功识别出来了！！

拓展

我们还可以在Monaco文档探索更多内容来健全我们的自己的编辑器，比如，样式风格，各类标记等等等，值得探索一番~