VS Codeで全角スペースを可視化するには?

VS Code上で全角スペースが見えずにハマる

まあ、恥ずかしい話ですが、ソースコード内の全角スペースに気づかず、プログラムの実行エラーの原因にいつまでも気づけなかった話です。

今時のソフトウェア開発なら、頭語開発環境(IDE)を使うのが当たり前で、全角スペースが混在していようものなら、コンパイルエラーでさっさと気づけますよね。

JavaならeclipseIntelliJ、C#からVisual Studioといったところですが、たまたま現在のプロジェクトで実装していたのがPostgreSQLのトリガー関数でして、IDEという代物が無い状況だったんですね。

とりあえずテキストエディタでコーディングして、毎回DB上でクリエイトし直していたのですが、今思えばサクラエディタとか使っていれば良かったのですが、たまたまVisual Studio Codeを使っていました。

何故VS Codeだったのか?
大した理由ではなかったのですが、単に「ダークモード」で作業したかったからです。

最近、VS Codeに限らず、ダークモードを搭載しているものは全てダークモードにしています。その理由は、「背景が白いと眩しくて目が辛いから」。
年を重ねると、白って長時間見続けるのが辛いんですよ。。。

そんな理由で、たまたまVS Codeをダークモードで使っていたのですが、ここで重大な欠陥がありました。

「デフォルトではVS Code上で全角スペースと半角スペースの区別がつかない事」。

結論から言うと、トリガー関数内のカーソル分に含まれる全角スペースに気づかないまま、2時間以上ムダな時間を費やしていました。
しかも、最終的にその誤ちに気づけたのは自分ではなく同じチーム内の他メンバー。

私が手間取る姿に業を煮やして、同じソースを解析していたら全角スペースに気づいてくれたようです。ちなみにその彼は、別のエディタを使っていました。

全角スペースを可視化する拡張機能

あまりの恥ずかしさに、今後もうVS Codeを使うのはやめてサクラエディタにしようかと本気で考えました。
サクラエディタなら、全角スペースは淡いグレーの四角枠で表示されるので一目瞭然。

ただ、背景はダークに変えられないので、サクラエディタで長時間作業するのは辛い。何とかVS Codeで全角スペースを判別する方法は無いものか。

VS Codeには、たくさんの拡張機能があるので、ひょっとして全角スペースを判別するための拡張機能もあるのでは?
そう思い、検索してみることにしました。

すると、すぐに見つけることができました。
その名も「zenkaku」。

見た感じ、日本人ではなく外国の方が開発した拡張機能なのでしょうか。
説明も英語のみですが、全角スペースを可視化するための拡張機能と書かれています。

どうやら全角スペースの部分がグレー表示されるらしく、これなら万が一全角スペースが混在していても目視で確認するのが楽です。

ものは試しに、早速インストールして、再度VS Codeを起動し直します。
半角文字の間に全角スペースを入力してみると、確かに薄いグレーで表示されるので、これから見落とすこともありません。

以下が実際に全角スペースを間に埋め込んでみたドキュメントの例です。

これがあれば、引き続きVS Codeを使い続けることができそうです。
VS Codeは星の数ほど拡張機能が存在するので、ダメもとで欲しい機能が無いか検索してみる価値アリです。

それにしても、全角スペースに気づけないなんて、まるで未経験からエンジニアになったばかりの人が陥りそうな状況。
40代半ばにもなって、なかなか恥ずかしいことをやらかしてしまいました。

連日残業で疲れが出ていたとはいえ、もう少し落ち着いて実装をしたいものですね。反省。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする