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

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

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱