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

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

(Last modified: 2024-05-31日)

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

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

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

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

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

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

none

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

boundary

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

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

selection

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

通常時は空白文字を何も表示しません。

テキストを選択したときだけ、選択した部分に含まれる空白文字を表示します。

trailing

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

分かりにくいですが、文の末尾に空白文字がある場合だけ表示されています。

all

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

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

-- --

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