【３分クッキング】ReactでVSCodeを作ろう！【React_Ace】

はじめに

Ace Editorという、ブラウザで使えるJS製のテキストエディタがある。
↓参考
https://qiita.com/naga3/items/1bc268243f2e8a6514e5

以前、WEBアプリ開発の中で「テキストエディタほしいな～」という場面に遭遇したのだが、０からコンポーネント云々を作るのは大変なのでこのAceというのを導入した経験がある。

それもありがたいことに、

• 数十種類のテーマ（ライトモード、ダークモード対応）
• 言語を設定できる
• ↑　設定した言語で自動補完が使える

と、ほしい機能が満載で至れり尽くせりなのである。
特に自動補完なんかは個人で作ってられないので神機能だと思う。

さて、インターネットにはバニラなAceの解説記事しかないため、ここではReactでAceを使える「react_ace」についてまとめてみようと思う。

ちなみにタイトルは釣りです。

インストールしよう

ちなみにこの記事よりドキュメント一読したほうが早い。
https://github.com/securingsincity/react-ace

npm install react-ace ace-builds

もしくは

yarn add react-ace ace-builds

サンプルコード

'use client';

import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-crimson_editor";
import "ace-builds/src-noconflict/ext-language_tools";

export const Editor = () => {
    function onChange(newValue: any) {
        console.log("change", newValue);
    }
    return (
        <AceEditor
        mode="python"
        theme="crimson_editor"
        onChange={onChange}
        enableLiveAutocompletion={true}
        name="editor"
        width="100%"
      />
    )
}

• useclient使わないとだめだよ！！

• ace-builds/src-noconflict/を見るとテーマ一覧があるよ！！
  https://ace.c9.io/build/kitchen-sink.html
  ↑　ここにも

• onChangeが便利だよ！！

最後に

ちなみに今確認したら、atcoderのエディタもAce使ってました！