チームスピリットデベロッパーブログ

チームスピリット開発者のブログ

サクラエディタからVisual Studio Codeへ乗り換えたくて拡張機能を作った

本記事はエントリーブログを兼ねた、チームスピリット Advent Calendar 2019 の7日目の記事です。 adventar.org

こんにちは!
2019年7月にTeamSpiritにジョインした里石です。

弊社のSDチームでは、サービスの開発にEclipseまたはVisual Studio Code(VS Code)を用いています。
私は前職ではサクラエディタを多用していましたが、その上位互換なVS Codeも注目はしていたものの、カーソルの操作感などに違和感があって乗り換えには至りませんでした。
そこで今回、入社を機にその違和感を乗り越えるべく、勉強も兼ねてVS Code拡張機能を2つ作りました。

カーソル移動の改造(skr Jp Word Handler)

marketplace.visualstudio.com

VSCodeでの日本語圏向け拡張機能としては、Suguru Yamamoto氏の「Japanese Word Handler」という優れた拡張機能がすでにあります。

今回はそれを参考にさせていただきつつ、開発しました。

概要

Windowsのサクラエディタライクなカーソル移動を行います。
実際には、サクラエディタっぽい挙動に加えて、VSCodeのcursolWordPartLeftcursolWordPartRightのカーソル移動の挙動も取り入れています。

下記のように、単語や文字種毎にカーソル移動を行います。

実装機能

  • カーソル移動 および 選択
    f:id:satoishi_ts:20191205232923g:plain

  • 句切り文字毎削除
    f:id:satoishi_ts:20191205232918g:plain f:id:satoishi_ts:20191205232909g:plain

対応句切文字パターン

  • VSCodeのSeparateWordに設定する区切り文字
  • スペース
  • 英字(大文字)
  • 英字(小文字)
  • 数字文字
  • 記号
  • タブ制御コード
  • 日本語のひらがな
  • 日本語のカタカナ
  • 日本語の漢字
  • 日本語の句読点
  • 日本語の全角英字(大文字)
  • 日本語の全角英字(小文字)
  • 日本語の全角数字
  • 日本語の全角記号

既知の制限事項

JapaneseWordHandler拡張機能と同様に一部制限があります。
拡張機能は、単語に関する以下の機能を差し替えることができません。

  • ダブルクリックによる単語選択
  • カーソルポジション上の単語の自動ハイライト
  • テキスト検索時の「単語にヒット」

その他

ライセンスは、Suguru Yamamoto氏のJapanese Word Handler拡張機能を継承して、zlibライセンスです。

全角文字の強調表示(flexibleZenkaku)

marketplace.visualstudio.com

VSCodeでは、サクラエディタのように全角スペースをハイライトすることができません。
これを実現するには、mosapride氏の「zenkaku」というシンプル・イズ・ベストな拡張機能があるのですが、 個人的な不満として、ソースを直接編集しないと見た目のカスタマイズができないというのがありました。

それを「設定」画面上からできるよう改造したのが本拡張機能です。

実装機能

readmeにも記載していますが、「設定」画面から、色や線種・塗りのカスタマイズができます。
f:id:satoishi_ts:20191205233458g:plain

その他

ライセンスは、mosapride氏の「zenkaku」拡張機能を継承して、MITライセンスです。

終わりに

とりあえず、自分の思うようなカーソル移動を実現できたので、無事VSCodeに乗り換えることができました。
あとは、「矩形貼り付け」がまだ違和感があるので、そのあたりの拡張機能が作れないか検討中です。

よろしければ是非ご利用いただき、フィードバックをいただけると幸いです!

また今回の拡張機能の開発を通して、VSCode上におけるTypeScriptのテスト環境構築の方法も学ぶことができました。
引き続き、12/14のアドベントカレンダーではその方法について解説しています!

satoishi-ts.hatenablog.com