Visual Studio Codeの拡張機能「Trailing Spaces」でコードの中にある余計なスペースを表示する

いつの間にか行末に余計なスペースが付いていたり空行の中にスペースが付いていたりすると、コードの動作的には問題ないにしても、気持ち悪いですしカーソル移動時に邪魔になります。
今回紹介するTrailing Spacesを使うと行末の余計なスペースがハイライトされるのと、ハイライトされた余計なスペースを一括で削除できます。
Trailing Spacesのインストール

Trailing Spacesはマーケットプレイスからインストールするか、Visual Studio CodeのExtensionで「Trailing Spaces」と検索すると出てきます。
Trailing Spacesの有効化

Trailing Spacesをインストールして有効化すると、上の画像のような行末に半角スペースが混じっているコードも、ハイライトされて不要な部分がひと目で分かるようになります。

個人的に、いかにも不要そうなキツい赤色でハイライトされるのがいいなと思っています。
単なるスペースのハイライトだと、わざわざ消そうという気にはならず後回しにしてしまいますが、こんな色でハイライトされてしまっては消したくなります。
不要スペースの一括削除
不要スペースを一括で削除したい場合は、command + Pでコマンドパレットを表示して「Trailing Spaces: Delete」と検索して出てきたコマンドを実行すると一括で削除できます。
利用シーン
Trailing Spacesを有効化しておけば、自分でわざわざ行末の不要スペースを入力することがなくなります(そもそも初めから余計なスペースを入力することがありませんが…)。
他の人から渡されたコードを組み込んだりする場合に、たまに不要なスペースが混じっていて気持ち悪い思いをするので、使用するのは主にそのタイミングです。
あとは、複数人で作業をする場合は.vscode内にこのTrailing Spacesを追加しておいて、拡張機能ごと共有すると良さそうです。
細かいことですし、正直コードの動作に影響はないのであってもなくてもどっちでもいいのかもしれませんが、こういうところをちゃんとしておきたいです。


Neovimを使い始める最初の一歩として便利な「LazyVim」
.gitignoreに含めた方がいいファイル・フォルダが一覧でまとまっている「gitignore.io」
Visual Studio Codeの基本|概要やインストールから日本語化など最低限の設定方法
WordPressの常時SSL化で、下層ページのhttpからhttpsへのリダイレクトがうまくいかない場合に確認すること
Google Maps APIでピンのアクティブ時にピン画像を変える方法
「EWWW Image Optimizer」を使ってWordPressをWebPに対応する方法
Visual Studio Codeでファイル差分の比較を行う方法
WordPressのContact Form 7で送信時に回転アイコンが出たまま止まってしまうときのチェックリスト
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Post Snippetsを使ってWordPressでショートコードをの登録と管理をもっと楽に!!
カーソルハイライトや入力したキーの表示など、デモに便利な機能が使える「Mouseposé」
Google タグマネージャー(GTM)の設定をして、コードを触らなくても確認用スクリプトの設定ができるようにする
BetterTouchToolでHTMLを使った表示を作成できる「Floating WebView」機能
macOSのシステム環境設定「Siri」の設定見直し
FigmaのVariants機能でコンポーネントの状態を管理する方法
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
FigmaのSearch Menuを使用して必要なメニュー・コマンドをすばやく実行する
単語登録はルールをキッチリ決めるよりも、とにかく登録・改善を繰り返した方が良さそう