Sublime Text 3でスペース(半角・全角)やタブを可視化する方法

2016/07/02

Sublime Text 3 の初期インストール状態では、タブやスペースに色がついていないため、一体何が設定されているのか文字を反転させないと分からない状態となっています。

以下のソースの L.7 ~ L.11 のインデントはスペースのみでしょうか、タブ混在でしょうか?ひょっとして全角スペースも混ざってたりしていないでしょうか?

highlight-whitespace-characters-on-sublime-text01

半角スペースやタブは設定で見えるようにできる

Sublime Text で設定を行えば、スペースやタブは可視化できるようになります。残念ながら全角スペースは設定だけでは可視化できないので、そちらについては後述で。

メニュー [基本設定] → [基本設定 – ユーザ] を開きます。日本語化していない場合は、[Preference] → [Settings – User]

highlight-whitespace-characters-on-sublime-text02

Sublime Text 3 の場合、このような画面が表示されます。ここで空白を可視化するために、以下のコードを付け加えます。

"draw_white_space": "all"

この設定ファイルは JSON 形式で記載されているので、それぞれの項目はカンマ区切りで、要素と値は半角コロンで設定するようにしてください。実際に設定した例が以下の画像です。

highlight-whitespace-characters-on-sublime-text03

ここで設定値として「all」を指定しましたが、他に「selection」と「none」の設定が可能です。「selection」はデフォルト値です。文字列を選択した場合に、空白文字の状態が分かるようになります。「all」は常に表示する場合に指定します。そして「none」はスペースの描画を行いません。つまり入力しようが選択しようが、分からないままです。

設定後、保存するとご覧の通り、半角スペースが可視化された状態となります。(タブも同様に可視化されます。)

highlight-whitespace-characters-on-sublime-text04

全角スペースが混ざっていたら識別できない

実際に一部の半角スペースを全角に変換してみると、以下の状態になります。

highlight-whitespace-characters-on-sublime-text05

こちら、全角スペース 2文字分なのです。Sublime Text では全角スペースだからと言って 2文字分の幅で設定されないのが難点ですね。日本語入力モードのままスペース入力しても、全角スペースが入力されたと一瞬では気付きません。

全角スペースを設定で可視化することはできないので、ここはプラグインを用いて可視化するようにします。

TralingSpaces で全角スペースを可視化する

プラグインは「Package Control」を利用してのインストールを行いますので、Package Control をインストールしていない場合は、こちらのエントリーの「Package Control のインストール」を参照ください。

  1. メニューから ツール(T) > コマンドパレット を選択
  2. Package Control: Install Package を選択
  3. 別のパレットが立ち上がるので TralingSpaces を検索し、選択

TralingSpaces の設定

TralingSpaces のインストールが完了すると、同プラグインのメニューが登場します。

[基本設定] → [PackageSetting] → [TrailingSpaces] → [Setting – User]

インストール直後の場合、設定ファイルの中身は空っぽです。全角スペースを可視化すべく、以下のコードを記載して保存してください。

{
    "trailing_spaces_regexp": " |[ \t]+"
}

これでご覧の通り、全角スペースも可視化することができるようになりました。

highlight-whitespace-characters-on-sublime-text06

TralingSpaces は行末の余白を表示するプラグイン

名前の通り「TralingSpaces」は、行末の余白をハイライトしてくれるプラグインです。上記サンプルの設定を適用すると、行末のスペースについてもハイライトされるようになります。

単に全角スペースをハイライトする為だけのプラグインではありませんので、その点ご注意ください。

minecraft-kuda-shaders01
2016/12/03

Minecraft 低スペックパソコンで使える影 MOD の代表格 KUDA SHADERS の導入方法

odaiba-gundam-last-day01
2016/12/02

お台場のガンダムいつまで見られるか?!ダイバーシティーからの撤去が決まる

new-year-2017
2016/12/01

一人用おせち料理のすすめ【2017】人気店のおせちが通販で手に入ります

jayfi-touch-h1-ja-22-01
2016/11/30

イヤホンからの乗り換えにおすすめ Jayfi Touch H1 はスマホの通話機能を持つ低音重視のワイヤレス Bluetooth ヘッドホン【レビュー】

android-smartphone-case01
2016/11/30

Android 用スマホケースはどこで売っている?店に行っても売ってない場合どうすれば良いか

remove-crc-sha-from-context-menu01
2016/11/29

ファイルを右クリックすると表示される CRC SHA を消す方法

rakusuru01
2016/11/29

ラクスルで初めてのポスター発注!時間は掛かるが料金は安い!

file-archiver-7-zip01
2016/11/29

ZIP より圧縮率の高いアーカイバー 7-Zip を今更ながら紹介する

install-minecraft-mod-optifine01
2016/11/29

Minecraft 軽量化 MOD OptiFine の導入方法 【1.11対応済み】

minecraft02
2016/11/28

Minecraft のビデオ設定を変更して軽くすれば低スペックパソコンでも十分に遊べる

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑