こんにちは。職業「戸倉彩」です。
VS Codeの最新バージョンにアップデートしたら、全角スペースがデフォルトで黄色い四角で表示されるようになったことに驚いた方はいらっしゃっしゃいませんか。
これまではVS Codeの設定で半角スペースの表示の有無を指定することができましたが、今回は全角対応したかっこうとなり、エディタ編集の際に半角か全角スペースを見分けたり、意識して作業を行いたいユーザーにとっては便利な機能の一つとなったと言えます。
しかしながら、利用しないユーザーにとってはノイズのように思えるかもしれません。VS Code設定でこの機能を有効化にするかどうか設定ができますので、今回はその設定方法を共有いたします。
<h2 id="vs-code-1.63-%E6%96%B0%E6%A9%9F%E8%83%BD---unicode%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E8%A1%A8%E7%A4%BA">
<a class="header-anchor-link" href="#vs-code-1.63-%E6%96%B0%E6%A9%9F%E8%83%BD---unicode%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E8%A1%A8%E7%A4%BA" aria-hidden="true"></a> VS Code 1.63 新機能 - Unicodeハイライト表示</h2>
VS Codeバージョン1.63の変更点の一つとして、全角スペースを表示する機能が追加されました。正確にお伝えすると、ソースコード内に一般的でない非表示の文字(スペース)がデフォルトで強調表示されるようになりました。さらにASCII文字と混同される可能性のある文字(スペース)も強調表示されます。
<blockquote>
参考情報: <a href="https://code.visualstudio.com/updates/v1_63" target="_blank" rel="nofollow noopener noreferrer">VS Code 1.63 リリースノート (November 2021)</a> 
Unicode highlighting 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--98591QwQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://code.visualstudio.com/assets/updates/1_63/unicode-highlighting-invisible.png" alt loading="lazy" class="md-img">
</blockquote>
<h2 id="%E8%A1%A8%E7%A4%BA%E3%81%BE%E3%81%9F%E3%81%AF%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E8%A1%A8%E7%A4%BA%E3%81%BE%E3%81%9F%E3%81%AF%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 表示または非表示の設定方法</h2>
<ol>
<li>VS Codeを起動する</li>
<li>画面左下の「管理」アイコン(歯車アイコン)をクリックする</li>
<li>
[設定] ページ内の検索ボックスで [Unicode Highlight] を検索する</li>
<li>下記の設定をカスタマイズする</li>
</ol>
<ul>
<li>
Editor &gt; Unicode Highlight: Ambiguous Characters 
現在のユーザーロケールで一般的な文字を除き、基本的なASCII文字と混合される可能性のある文字を強調表示するかどうかを制御します。デフォルトでオンになっているので、表示したくない場合にはチェックボックスでチェックを外します。</li>
<li>
Editor &gt; Unicode Highlight: Include Comments 
コメントないの文字をUnicode強調表示の体表にするかどうかを制御します。
<ul>
<li>inUntrustedWorkspace (規定)</li>
<li>ture (制御したい場合)</li>
<li>false (制御したくない場合)</li>
</ul>
</li>
<li>
Editor &gt; Unicode Highlight: Invisible Characters 
スペースを予約するだけの文字または幅がまったくない文字を強調表示するかどうかを制御します。デフォルトでオンになっているので、表示したくない場合にはチェックボックスでチェックを外す。</li>
<li>
Editor &gt; Unicode Highlight: Non Basic ASCII 
基本以外のすべてのASCII文字を強調表示するかどうかを制御します。U+0020からU+007Eの間の文字、Tab、改行コード、行頭復帰のみが基本ASCIIと見なされます。
<ul>
<li>inUntrustedWorkspace (規定)</li>
<li>ture (制御したい場合)</li>
<li>false (制御したくない場合) 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--k_4r0N14--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/88ffee571fb9b31dfdc7b7e9.png%3Fsha%3Dd546167c532ad8e08b531383d72985d40f8a03d8" alt loading="lazy" class="md-img">
</li>
</ul>
</li>
</ul>
いかがでしたでしょうか。より詳細な設定を行いたい場合には、settings.jsonで記述をすることで設定もできますので、冒頭にご紹介した公式サイトで公開されている情報を参考にしてください。
もし、周りに困っている方がいらっしゃったら、こちらの情報を教えてあげてください。今回は以上です 🙌
📱 Twitter <a href="https://twitter.com/ayatokura" target="_blank" rel="nofollow noopener noreferrer">@ayatokura</a> で、最新情報も配信していますので、よろしければフォローも是非お願いします。

VS Codeで全角スペースを表示または非表示に設定する方法

VS Code 1.63 新機能 - Unicodeハイライト表示

Discussion