Visual Studio Code ライクなテキストエディタJavascriptモジュール monaco-editor

Visual Studio Code かなり便利ですよね。自動補完できますし。VSCodeによく似たエディタでJavascriptのモジュールである monaco-editor を紹介します。

1. NPMパッケージ

インストール方法は以下のとおりです。

npm install monaco-editor

以下のとおりコマンドを実行して、monaco-editor のモジュールとサンプルソースコードをインストールしてください。

git clone https://github.com/Microsoft/monaco-editor-samples.git
cd monaco-editor-samples
npm install 
npm run simpleserver

http://localhost:8888にアクセスします。

browser-amd-editorにアクセスすると、VSCodeライクなテキストエディタが表示されます。

インテリセンスもばっちりです。

ダウンロードしたソースコードを見ると分かりますが、 script タグ内でプログラム言語が定義されています。

サンプルソースのgithubリポジトリは以下にあります。

差分表示もできるようです。

browser-amd-diff-editorにアクセスして表示できます。

Electronで使用するサンプルも electron-amd の中に含まれています。 Electron をインストールして、以下のコマンドで表示できます。

electron.cmd electron-amd\main.js

ngx-monaco-editorというNPMモジュールがあります。

まだ使ったことないので、使ってみたらブログに残します。