Open2022/03/04にコメント追加7

[Scrap] VSCode extension を React で作ってみる

VSCode 上で動く Mind Map が作りたい。

参考にするドキュメント

VSCode extension はユースケースごとに document が用意されていて、今回作るマインドマップだとカスタムエディタに該当するっぽい。

サンプルプロジェクト

猫と絵を描くサンプルが用意されている。

webpack

webpack で js を固めるのは以下を参考にした。

参考になりそうな記事があった。

VSCode: Custom Editorサンプルを読む

ファイルの CRUD を作る

一番原始的なプラグインとして CRUD を用意するのが良い気がする。とりあえず、以下の example 内のコードを参考にして作ってみる。

自分で Editor を作成するときは CustomTextEditor と CustomEditor のいずれかを継承して作成する。

CustomTextEditor
- テキストファイルを保存する
CustomEditor
- 独自のファイルフォーマットで保存する。バイナリなど。

今回のマインドマップの場合は、Json ファイルを保存するので、CustomTextEditor で良さそう。

VSCode の WebView 上での状態の保存の仕方

state (setState/getState で使用する)
- webview が閉じても保持されるっぽい
  - scroll 位置とかに使用するのが良さそう?https://code.visualstudio.com/api/extension-guides/webview#getstate-and-setstate