Markdownのテーブル編集を快適にするVSCode拡張機能を作成しました

はじめに

VSCodeの拡張機能を作成しました。拡張機能の紹介と実装時の苦労した箇所、実装の進め方を説明します。

拡張機能の概要

今回作成した拡張機能は、Markdownのドキュメント内にあるテーブルをWebviewのエディタで編集できる機能です。

通常のMarkdownエディタでは、テーブルの編集が手間になることが多いですが、この拡張機能を使えば、VSCode内で完結したまま画像のようにスプレッドシート風の操作での編集が可能です。またスプレッドシートからの貼り付けにも対応しています。

主な機能

• スプレッドシート風のテーブル編集
  • Markdown内のテーブルを専用のUIで編集
• 行・列の追加・削除
  • 最終位置の行や列の挿入・削除
• セルのコピー＆ペースト
  • Excelのようにセル単位でコピペ可能
• 整形機能
  • 編集したテーブルを整形してMarkdownに反映

拡張機能は以下URLからインストールできます。

GitHubリポジトリは以下のページです。

実装時の苦労したポイント

開発を進める中で、特に苦労したポイントをいくつか紹介します。

1 contentEditable

文字列を入力する欄はHTMLではinputタグやtextareaタグを使うことがほとんどですが、文字サイズ、文字色、などよりリッチな見た目にしたい場合はdivタグなど任意のタグにcontentEditable属性を有効にすることでタグの中身を編集可能にできます。

この属性とReactの組み合わせがうまくいかず苦労しました。カーソルが左端に固定されてしまい文字を思い通りに入力できなかったり、そもそも何も反応しないなどの挙動に悩まされました。contentEditableに関する記事を読み動作確認を繰り返すことで不具合を解消していきました。

• https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable
• https://zenn.dev/karintou/articles/35e9e314c5579f

2.状態管理

テーブルを操作する上で選択されている状態、編集している状態など複数の状態がありキーボード操作によりどのような処理がされるかが実装をすすめるうち複雑になっていきました。

例えば選択しているときにEnterを押すと編集状態、編集状態ではEnterを押すと編集の完了。編集状態ではカーソルによるセル移動は無効ですが、Tabによる移動は可能であるなど条件分岐が多く不具合も多発しました。これについてはキーイベントの関数に大量のifが連なり改善の余地ありです。

実装の進め方

実装にはCursor + Claude 3.7を活用し、プロンプトを通じてコードを生成しながら進めました。

まず、Askモードで開発したい機能をリストアップし、それをRulesに追加。次に、使用する開発言語、テスト、リンタを指定して環境を整えました。

ライブラリ設定時にテストライブラリも含めることで、新しい機能を追加する際にテストコードの自動生成とリンタの修正を同時に行えるようになりました。

その後は、1つずつ機能をプロンプトで指示し、動作確認しながら進める流れです。問題がなければコミット、バグがあればロールバックします。ただし、開発の後半では生成されるコードが意図した動きをしなくなり、手動での修正が増えました。

手動で一部のコードを削除・コメントアウトすると、次回のプロンプト入力時に削除したコードが復活することが多く、うまく活用しきれなかった部分もありました。

感想

VSCode拡張機能の開発を初めて行いましたが、テンプレートの作成やデバッグ機能がVSCode自体に搭載されているため、快適に開発することができました。拡張機能はHTMLの取り扱いが独特なのですが、そのあたりはCursorに対応してもらうことで意識せずに進められました。ちょっとした拡張機能やツール類を暇つぶしに作成する場合、Cursorに頼ることでより高度なことが短時間でできるようになったのは良い点と思いました。

また、開発するにあたりExcelやGoogleスプレッドシートを改めて見ると非常に多機能であることを再認識しました。

フィードバックや改善点があればコメントで教えていただけると嬉しいです！