← ClaudeAtlas

monaco-language-setuplisted

vibe-editor の Monaco エディタに新言語サポート (シンタックスハイライト) を追加するときに使う skill。`src/renderer/src/lib/monaco-setup.ts` の selective import (`monaco-editor/esm/vs/basic-languages/<lang>/<lang>.contribution`) と `src/renderer/src/lib/language.ts` の `EXT_MAP` (拡張子 → Monaco 言語 ID) を **2 ファイル同期**で追加する手順、basic-languages に entry が無い言語の代替策 (Issue
yusei531642/vibe-editor · ★ 3 · AI & Automation · score 69
Install: claude install-skill yusei531642/vibe-editor
# monaco-language-setup vibe-editor の Monaco は **selective import** 戦略 (バンドル肥大化防止のため、basic-languages を 1 つずつ import する)。 新言語を足すには **monaco-setup.ts と language.ts の 2 ファイル同期**が必要。 > 現状 27 言語が登録済み (monaco-setup.ts:14-42)。 > 「シンタックスハイライトのみ」 = `basic-languages/<lang>/<lang>.contribution`。**language worker (TS の型チェック等) は登録していない**ので軽量。 --- ## 2 ファイル同期 ``` ┌────────────────────────────────────────────────────────────┐ │ 1. monaco-setup.ts: import '<lang>/<lang>.contribution' │ Monaco に言語を登録 │ 2. language.ts: EXT_MAP['<ext>'] = '<lang>' │ 拡張子 → Monaco 言語 ID └────────────────────────────────────────────────────────────┘ ``` 両方書かないと: - 1 だけ → 言語は知っているが拡張子から引けない (`detectLanguage()` が plaintext 返す)。 - 2 だけ → 拡張子 → 言語 ID は引けるが Monaco がその ID を知らないので結局 plaintext 描画。 --- ## Step 1: 該当言語が basic-languages にあるか確認 [monaco-editor の basic-languages](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) で対応言語を確認する。**バージョン依存**で増減するので、リポジトリの monaco-editor の実物を見る: ```bash ls node_modules/monaco-editor/esm/vs/basic-languages ``` ある場合 → Step 2 へ。ない場合 → Step 1.5 (代替策) へ。 ### Step 1.5: 無い場合の代替策 | 状況 | 対応 | |------------------------------------|-----------------------------------------------------------------------| | 上位互換の言語が basic-languages にある | その ID で代替 (例 Issue #77: `toml` → `ini` で流用、語彙の上位互換) | | 似た構文の別言語で代替 | 例: Zig は明確な entry が無いので `cpp`