vscodeのcustom editorに関する記事が少なかったので日本語での資料が少ない部分を中心に解説していきます。
custom editorとは？
一応上記に説明がありますが、簡単に言うと自分で作成したeditor画面を埋め込むためのapiです。webviewを用いて作成します。（chromium）
イメージとしてはこんな感じです。
注意点としてはextention-webview間はweb workerのように通信を行わなければならないということです。つまり通常通りyo codeによって生成されるエントリポイントに加えて、webview用のエントリポイントが必要となります。
上記のサンプルで、src/entention.tsに加えてmedia/以下にjsが入っていることからも見て取れます。
実際の開発ではwebview側のjsは別のリポジトリに分けてしまったほうがやりやすいでしょう。大きくなりそうであれば普通にwebpackやtypescriptなどを導入しても良いかと思います。
custom editorとcustom text editor
エディタは2種類あり、サンプルでは両者の実装があります。基本的にはバイナリファイルはcustom editor、テキストファイルはcustom text editorを使用しておけば間違いありません。custom text editorの場合、ユーザーの判断でビルドインのテキストエディタに切り替えることも可能です。
やらなくちゃいけないこと
大きく分けると３つあって
- extentionでの
vscode.Custom(Text)EditorProviderの実装 webviewの実装package.jsonへの登録
です。特にpackage.jsonでcontributes.customEditorsの登録を忘れるととeditor自体起動しないので注意して下さい。
デバッグについて
webviewでのjsについてもデバッグを行うことは可能です。extentionを起動し、custom editorが読み込めたらCtrl+Shift+Alt+Pのタスク一覧からDeveloper: Open Webview Developer Toolsを開くことでデバッガを起動させることができます。ベースはchromiumなのでDeveloperツールもそのままです笑