空白文字(タブ、スペース)のエディター上での表示方法に関する設定

広告

Visual Studio Code のエディターで新規ファイルを作成した場合や既存のファイルを開いた場合に、スペースやタブなどの空白文字をどのように表示するかに関する設定方法について解説します。デフォルトでは選択した時にだけ表示しますが、常に表示したり常に非表示にすることができます。

空白文字の表示に関する設定

Visual Studio Code でファイルを開いた場合にスペースやタブなどの空白文字を表示するかどうかの設定を行うには、「ファイル」メニューの中にある「ユーザー設定」をクリックし、さらに表示されたサブメニューの中から「設定」をクリックしてください。

空白文字の表示に関する設定(1)

Visual Studio Code の設定画面が表示されます。

空白文字の表示に関する設定(2)

画面上部の検索ボックスに「whitespace」と入力してください。いくつか設定項目が表示されますが、「Editor:Render Whitespace」の設定項目が関係する設定項目です。

空白文字の表示に関する設定(3)

「Editor:Render Whitespace」では次のいずれかの値を選択します。デフォルトの値は selection です。

none : 表示しない
boundary : 単語間の単一空白文字以外を表示する
selection : 選択している間のみ空白文字を表示する
trailing : 末尾の空白文字のみ表示する
all : すべての空白文字を表示する

空白文字の表示に関する設定(4)

表示されるように設定したとき、スペースは一文字毎に「・」、タブは右矢印で表示されます。それぞれの設定について見ていきます。

none

「Editor:Render Whitespace」 を none に設定した場合はすべての空白文字を表示しません。

空白文字の表示に関する設定(5)

boundary

「Editor:Render Whitespace」 を boundary に設定した場合、単語と単語を区切る一文字の空白文字以外について表示します。例えば blue sky などのように単語と単語の間の空白文字です。

空白文字の表示に関する設定(6)

スペースやタブは表示されていますが、単語と単語の間のスペースは表示されません。

空白文字の表示に関する設定(7)

selection

「Editor:Render Whitespace」 を selection に設定した場合、通常は空白文字を表示しませんが、選択したテキストに空白文字が含まれる場合は選択中だけ表示されます。デフォルトの設定は selection となっています。

空白文字の表示に関する設定(8)

trailing

「Editor:Render Whitespace」 を trailing に設定した場合、文の末尾に空白文字がある場合だけ表示されます。

空白文字の表示に関する設定(9)

all

「Editor:Render Whitespace」 を all に設定した場合、すべての空白文字が常に表示されます。

空白文字の表示に関する設定(10)

boundary に設定した場合と異なり、単語と単語の間の空白文字も表示されています。

-- --

Visual Studio Code のエディターで新規ファイルを作成した場合や既存のファイルを開いた場合に、スペースやタブなどの空白文字をどのように表示するかに関する設定方法について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。