月曜日, 11月 23, 2020

VS Codeで制御(Tab、Space)文字を表示する手順

勝手に推奨している3つのエディターでの制御文字(Tab、Space)の表示方法を整理しました。第一弾はVS Code(Visual Studio Code)です。

例えばTabキーなどでインデント処理をしているときに間違って全角スペースを入れてしまうと、上の様に位置がズレてしまったりします。スペースも全角は御法度ですが、VS Codeでもデフォルトの状態ではスペースの違いは目視出来ません。スペースは制御コード扱いなので、表示出来るように設定します。なお、VS Codeの日本語化については以下を参考にして下さい。


まずファイルメニューから[ユーザー設定]>[設定]を選びます。

すると画面が変わるので[テキストエディター]の中(アルファベット順なので、かなり下の方)から[Render Whitespace]から設定項目を選びます。それぞれの意味は・・・

■空白文字の描画方法を切り替える
[none]空白文字を描画しない
[boundary]単語を分ける単一の空白文字以外は描画する
[selection]既定(デフォルト)
[all]空白文字を全て描画する
■全角の空白文字を描画する
[zenkaku]拡張機能を利用する
取り敢えず[all]を選んでおくと良いでしょう。
ちなみに、設定メニューで「文字」と検索すれば制御文字の表示も同時に設定出来ます。

ちなみにVS Codeの場合、全角スペースは何も表示されないので、表示されていない空間は全角スペースということになります。

Visual Studio Code V1.51.1