MENU
カテゴリー

VSCodeで必要のないスペースを表示する拡張機能 「Trailing Spaces」

  • URLをコピーしました!
目次

「Trailing Spaces」という拡張機能

自分が出したプルリクエストをレビューしていただいたときに、こんな指摘をもらった。

レビュアーの先輩エンジニア
「def createのあとにいらない半角スペース入ってしまっているので、消しておいてください」

ぼく
「あ、はい。ありがとうございます。(すげーよくこんな細かいところ気づくなこの人、、、、)」

こんなやりとりが実際に僕の体験としてありました。
そのときに、なぜこんな細かいところに気づくのかと質問してみたところ、VSCodeのある拡張機能を入れているとのことだった。

「Trailing Spaces」

あわせて読みたい
Trailing Spaces - Visual Studio Marketplace Extension for Visual Studio Code - Highlight trailing spaces and delete them in a flash!

このTrailing Spaces という拡張機能をVSCodeに入れれば、スペースをハイライトしてくれる。

例えばこんな感じ↓

VSCodeでTrailing Spaces拡張機能を有効にした状態。不要な半角スペースが行末に赤くハイライト表示されている画面

この画像のように、スペースがあるところにはでわかりやすく表示してくれる。

Trailing Spacesのインストール手順

導入はとても簡単で、VSCodeの拡張機能マーケットプレイスから数クリックで設定できる。

  • VSCodeを開き、左サイドバーの拡張機能アイコン(四角が4つのマーク)をクリックする。
  • 検索ボックスに「Trailing Spaces」と入力する。
  • 「shardulm94」が公開している拡張機能を選んで「インストール」をクリックする。
  • インストールが終わると、行末の不要な半角スペースが自動で赤くハイライトされるようになる。

保存時に不要なスペースを自動で削除する設定

ハイライト表示だけでなく、ファイルを保存したタイミングで不要なスペースを自動的に取り除くこともできる。VSCodeの設定(settings.json)に次の1行を追加すればいい。

"trailing-spaces.trimOnSave": true

この設定を入れておくと、保存するたびに行末の余分なスペースが消えるので、レビューで指摘される前に自分で防げる。

なぜ不要なスペースを消すのか

行末の余分なスペースは動作に影響しないことが多いけど、Gitの差分(diff)に余計な変更として現れたり、コードの一貫性を損なったりする。チーム開発では「不要なスペースを残さない」のがレビューの基本マナーになっている現場も多く、この拡張機能はそういう細かい指摘を未然に防いでくれる。

関連記事

VSCodeをもっと快適に使うためのTipsはこっちでも紹介している。VSCodeでディレクトリ一覧を一気に折りたたむ方法では、ファイルツリーの操作を効率化する方法をまとめた。SQLエディタを使うなら【DBeaver】SQLエディタの文字を拡大(元に戻す)する方法も参考になるはず。

ぜひ、この拡張機能は入れておこう。

よかったらシェアしてね!
  • URLをコピーしました!
目次