どのように私はVSCodeのような自分のテキストエディタを作った

Hello World! 新しい記事に戻る🎉....
今日は私が作ったエディタについて話します👉 小さな編集者;これは非常にWebブラウザと多くのコードを書くのに便利です..
それで、どうやって作ったの?

ライブラリ/フレームワーク

反応する

コランダム

モナコエディタ

tiny-unique-id

フォントアイコン

サンドボックスエディタ

データベース(コードとauthの保存)

クラウド・ファイアストア

どのようにコード入力/エディタ?

エディター/入力を作るには

<ControlledEditor 
            onBeforeChange={handleChange}
            value={value}
            className="code-mirror-wrapper"
            options={{
                lineWrapping: true,
                lint: true,
                mode: language,
                theme: 'material',
                lineNumbers: true,
                autoCloseBrackets: true,
                matchBrackets: true,
                autoCloseTags: true,
                matchTags: true,
            }}
/>

そして、vscodeエディタのために、私はモナコエディタを使いました

<Editor
     defaultLanguage="javascript"
     theme="vs-dark"
     value={js}
     onChange={setJs}
     className='editor'
   />

出力方法

出力を表示するにはiframe

<iframe
      srcDoc={srcDoc}
       title="output"
       sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals"
       frameBorder="0"
       width="100%"
       height="100%"
      />

どのようにコードの保存/更新?

コードを保存するには、JSONでコードを保存するFireFirestore

これは私がvscodeのような私自身のテキストエディタを作った方法です.
私はそれを公開するビデオを作ったので、ビデオをチェックアウトし、私のチェックアウトを忘れないでください