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を追加しておいて、拡張機能ごと共有すると良さそうです。
細かいことですし、正直コードの動作に影響はないのであってもなくてもどっちでもいいのかもしれませんが、こういうところをちゃんとしておきたいです。


Visual Studio Codeの基本|概要やインストールから日本語化など最低限の設定方法
Gitで最初に設定しておくユーザー名とメールアドレスのグローバル設定
npm-scriptsでSCSSをコンパイルする環境を構築する方法
「とりあえず無料版!」ではなく、機能を知った上で判断したいMAMPとMAMP PROの比較
WordPressの自動バックグラウンド更新を無効にする方法とその注意点
思考したり情報整理したい時はMarkdown記法で文章を書き出そう!!Webデザイナーの情報整理術
Bracket Pair ColorizerでVisual Studio Codeの括弧を色分けして見やすくする
resizeイベントを使用する場合は、iOS Safariでの挙動に注意
WordPressのカスタム投稿タイプを追加後、ページは存在しているはずなのに404になる場合の解決方法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法