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

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

1. NPMパッケージ

https://www.npmjs.com/package/monaco-editor

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


npm install monaco-editor

2. サンプルソースコードの実行方法

以下のとおりコマンドを実行して、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リポジトリは以下にあります。

https://github.com/Microsoft/monaco-editor-samples/

3. 差分表示

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

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

4. Electron

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


electron.cmd electron-amd\main.js

5. Angular 用コンポーネント

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

https://github.com/atularen/ngx-monaco-editor

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

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です