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


CSSで::placeholderにスタイルを設定する方法
CodeAnywhereでターミナルに触る練習をする
js-cookieでウェブサイトのダークモード表示設定をユーザーごとに保存しておく方法
Dart Sassの変数の基本的な使い方|Dart Sass入門
Post Snippetsを使ってWordPressでショートコードをの登録と管理をもっと楽に!!
Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する|Nuxt.jsの基本
Movable TypeでAssetURLやEntryPermalink・ContentPermalinkで出力されるパスを絶対パスから相対パスに変える
Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」
Nuxt.jsでのページ遷移設定方法(Vue Routerやnuxt-link)|Nuxt.jsの基本
Visual Studio CodeでDart Sassのコンパイルができる拡張機能「DartJS Sass Compiler and Sass Watcher」
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
AirPodsで片耳を外しても再生が止まらないようにする方法
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
1つのノートアプリにすべて集約するのをやめた理由|2025年時点のノートアプリの使い分け
Notionログイン時の「マジックリンク」「ログインコード」をやめて普通のパスワードを使う
AlfredでNotion内の検索ができるようになるワークフロー「Notion Search」
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
Macでアプリごとに音量を調節できるアプリ「Background Music」
Macのターミナルでパスワード付きのZIPファイルを作成する方法
MacBook Proでディスプレイのサイズ調整をして作業スペースを広げる
SteerMouseの「自動移動」機能で保存ダイアログが表示されたら自動でデフォルトボタンへカーソルを移動させる
iPhoneでタッチが一切効かなくなった場合に強制再起動する方法