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

URL: https://webrandum.net/vscode-trailing-spaces/
公開日: 2019-11-14
更新日: 2019-11-16
カテゴリー: コーディング
タグ: Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

いつの間にか行末に余計なスペースが付いていたり空行の中にスペースが付いていたりすると、コードの動作的には問題ないにしても、気持ち悪いですしカーソル移動時に邪魔になります。

今回紹介するTrailing Spacesを使うと行末の余計なスペースがハイライトされるのと、ハイライトされた余計なスペースを一括で削除できます。

## Trailing Spacesのインストール

![Trailing Spaces](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_1-9-1024x624.png)

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/cb494f78c14b37bea44866823a39a6d134e58cb0ea41d433d43393f2a919437b.webp)Trailing Spaces - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

Trailing Spacesは[マーケットプレイス](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)からインストールするか、Visual Studio CodeのExtensionで「Trailing Spaces」と検索すると出てきます。

## Trailing Spacesの有効化

![Trailing Spaces無効化](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_2-9-1024x398.png)

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

![Trailing Spaces有効化](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_3-9-1024x398.png)

個人的に、いかにも不要そうなキツい赤色でハイライトされるのがいいなと思っています。

単なるスペースのハイライトだと、わざわざ消そうという気にはならず後回しにしてしまいますが、こんな色でハイライトされてしまっては消したくなります。

### 不要スペースの一括削除

不要スペースを一括で削除したい場合は、command + Pでコマンドパレットを表示して「Trailing Spaces: Delete」と検索して出てきたコマンドを実行すると一括で削除できます。

## 利用シーン

Trailing Spacesを有効化しておけば、自分でわざわざ行末の不要スペースを入力することがなくなります（そもそも初めから余計なスペースを入力することがありませんが…）。

他の人から渡されたコードを組み込んだりする場合に、たまに不要なスペースが混じっていて気持ち悪い思いをするので、使用するのは主にそのタイミングです。

あとは、複数人で作業をする場合は`.vscode`内にこのTrailing Spacesを追加しておいて、拡張機能ごと共有すると良さそうです。

細かいことですし、正直コードの動作に影響はないのであってもなくてもどっちでもいいのかもしれませんが、こういうところをちゃんとしておきたいです。