VSCodeで、半角スペース & TAB を表示する方法


Visual Studio Codeで、半角スペース & TAB を表示する方法を説明しますね。

ちなみにインストール直後は、マウスやキーボードで選択範囲にすると半角スペース & TABが表示されます。

なお全角スペースを表示するには、別途、拡張機能をインストールする必要があります。

設定方法


エディタに、半角スペース & TAB の表示を制御するには、設定項目 [Editor: Render Whitespace] の値を変更します。

以下の手順で、設定項目 [Editor: Render Whitespace]を表示させます。

  1. Ctrl + ,
  2. [設定の検索]に、Editor: Render Whitespace と入力し、
  3. [Editor: Render Whitespace]を表示させる。

設定値は、以下のいずれかを選択し、半角スペース & TAB をどのように表示するかを決めます。

  • none:表示しない
  • boundary:単語間の単一半角スペース以外を表示する
  • selection:選択したテキストにのみ表示する(デフォルト)
  • trailing:行末尾のみ表示する
  • all:すべて表示する

わたしは all(すべて表示する) にしています。

none ⇔ allの切替だけであれば、コマンドパレットで、簡単


設定値 none(表示しない) ⇔ all(すべて表示する) の切替だけであれば、コマンドパレットから View: Toggle Render Whitespace を使って、簡単にできます。

  1. Ctrl + Shift + p
  2. toogle render whitespace と入力(whitespaceと入力すれば、候補がでてきます)、
  3. View: Toggle Render Whitespace を選択

VSCodeを再起動しても、切り替えた状態が維持されるので、便利です。

設定値の参考例

[Editor: Render Whitespace]の設定値である boundary・trailing は、ちょっとややこしいので、参考例としてご紹介します。

あたまがおかしくなりそう(*_*)なので、参考程度でよいのではないかと思います。

boundary


boundaryは、半角スペース & TABのうち、単語間の単一半角スペース以外を表示します。


たとえば単語間に、2つのスペースがある場合や、TABがある場合は、表示されます


htmlタグも単語として認識されるので、htmlタグとコンテンツに2つのスペースがある場合も、表示されます


行の先頭に 半角スペース または TAB がある場合も、表示します。


半角スペース または TABだけの行の場合も、表示します。

ということで、boundaryは、半角スペース & TABのうち、単語間の単一半角スペース以外を表示します。

trailing


trailingは、半角スペース & TABのうち、行末尾のみを表示します。


たとえば、行末にある半角スペース & TABだけ表示されます。


半角スペースだけの行も表示されます。行末尾にある半角スペースと同じことだからです。


TABだけの行も表示も表示されます。行末尾にあるTABと同じことだからです。

ということで、trailingは、半角スペース & TABのうち、行末尾のみを表示します。

いまのところ、基本 all

いまのところ私は、基本 all に設定していて、邪魔だなぁと思ったらコマンドパレットを使って、all ⇔ noneの切替を利用していこうかなと考えています。VSCodeを再起動しても、切り替えた状態が維持されるので、便利ですし。

というわけで、今日はVisual Studio Codeで、半角スペース & TAB を表示する方法を説明でした。



あっ、いけない! 最後に全角スペースを表示する方法をご紹介します。

全角スペースを表示するには、拡張機能をインストール

全角スペースを表示するには、設定ではなく、拡張機能をインストールして利用することにより行います。

VSCodeで、全角スペースをハイライト表示する方法
Visual Studio Codeで、全角スペースをハイライト表示するには拡張機能zenkakuをインストールして、有効化します。一度有効化すれば、切り替えた状態が維持されるので、extension.jsの変更は不要です。

コメント

タイトルとURLをコピーしました