Back

Swapman

VS Code上で2つの選択範囲を入れ替えるための小さな拡張機能です。複数選択を使った文字列交換をコマンドとして実行できるようにし、エディタ操作の自動化を試したプロジェクトです。


swapman は、VS Code上で2つの選択範囲を入れ替えるために作成した拡張機能です。

エディタ上で2箇所を選択し、コマンドを実行すると、選択された2つの文字列を相互に入れ替えます。小さな機能ですが、VS Code Extension APIを使って、エディタの選択範囲、テキスト取得、置換処理を扱う練習として作成しました。

主な機能

  • VS Codeのコマンドとして swapman を実行
  • 2つの選択範囲を取得
  • それぞれの選択範囲にある文字列を取得
  • 取得した2つの文字列を入れ替えてエディタへ反映
  • 選択範囲が2つではない場合はエラーメッセージを表示

技術スタック

  • TypeScript
  • VS Code Extension API
  • Node.js
  • Yarn
  • TSC

作成背景

エディタで作業していると、2つの単語や値を入れ替えたい場面があります。

手作業でも対応できますが、複数選択とコマンド実行を組み合わせれば、エディタ操作として自然に実現できるのではないかと考え、VS Code拡張として試作しました。

実装で意識したこと

VS Codeの activeTextEditor から現在のエディタを取得し、editor.selections を使って選択範囲を扱う構成にしています。

選択範囲が2つの場合のみ処理を実行し、それぞれの Range から文字列を取得して、editor.edit 内で置換しています。拡張機能としては小規模ですが、VS Code上でユーザーの選択状態を読み取り、エディタの内容を書き換える基本的な流れを確認できました。

学んだこと

VS Code拡張では、通常のWebアプリケーションとは異なり、エディタの状態、選択範囲、コマンド登録、ユーザーへのメッセージ表示といった、エディタ拡張特有のAPIを扱う必要があります。

このプロジェクトでは、拡張機能の雛形からコマンドを登録し、実際にエディタ上のテキストを操作するまでの流れを経験しました。小さなツールではありますが、開発環境そのものを拡張するという観点を持つきっかけになったプロジェクトです。