VS Codeの日本語編集を便利にする拡張機能(Word Divider)を作ってみた

はじめに

本拡張機能を使うと、下記画像のようにVS Codeで日本語の単語間移動ができるようになります。

開発の背景

私はソースコードだけでなくドキュメントもVS Codeで書くことが多いです。

しかし、VS Codeで日本語を編集する際にCtrl + →やCtrl + ←で単語の先頭や末尾に移動しようとすると、日本語の単語を区切りとして扱ってくれません。

一方、ブラウザのテキストエリアで日本語を編集するときにCtrl + →やCtrl + ←で単語の先頭や末尾に移動しようとすると、単語間をきちんと移動してくれます。

似たようなことを実現した拡張機能としてJapanese Word Handlerがあります。
私は何年もこの拡張機能を使っており大変重宝していたのですが、こちらは単語ではなくひらがなやカタカナ、漢字で区切るためブラウザの単語間移動よりは少し使い勝手が悪いです。

そこでVS Codeでもブラウザでの単語間移動と同じようなことが実現できないかなと思い、拡張機能(Word Divider)を作ってみました。

動作イメージ

Word Dividerの場合

【参考】Japanese Word Handlerの場合

同じテキストで、Japanese Word Handlerを使った場合は以下のようになります。

Word Dividerでは拡張機能を拡張と機能に分割していたり、使うとを使うととと分割しているのに対して、Japanese Word Handlerでは拡張機能を拡張機能、使うとを使とうととして扱っていることがわかります。

実装

単語の分割はIntl.Segmenterを利用しています。
もうこれがこの拡張機能のすべてといっても過言ではありません。

あとは、VS CodeのCtrl + →やCtrl + ←のキーバインドの挙動を拡張機能でも同じように実装するだけです。だけといっても、仕様を把握するのに時間がかかりました。

たとえば記号が1つだと単語として認識されませんが、記号が2つ以上だと単語として認識されます。
そういった仕様を把握して反映することが手間でした。実際に動作させながら仕様を把握したので、今も間違いがないか不安です。

リポジトリはyutotnh/word-dividerにあります。

また、今まで何個かVS Codeの拡張機能を作っていますが今回ははじめてWeb Extensionsに対応したり、キーバインドの設定をしたり、ローカライズに対応したりといったことをやってみました。

あと、reviewdogを導入してLinterやFormatterでメッセージがある場合にPull Requestにコメントをつけるようにしてみました。
今までよくわからずに使っていなかったのですが、使ってみると便利でした。

まとめ

今までVS Codeで日本語を編集するときに気になっていた点を解決できてかなり満足しています。

もし同じような悩みを持っている方がいましたら、ぜひお試しください。