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

2014/11/11

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 のインストール」を参照ください。

【導入&日本語化】Sublime Text はプログラミングに最適なエディタ!
長年テキストエディタとして サクラエディタ を使用してきたのですが、もう一歩踏み込んだ機能が欲しくて、新たなテキストエディタとの出会いを求めていた昨今。ようや...
  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」は、行末の余白をハイライトしてくれるプラグインです。上記サンプルの設定を適用すると、行末のスペースについてもハイライトされるようになります。

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

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!

プラグインを使わず WordPress の投稿ページで PHP の外部ファイルを呼び出す方法

Feedly ボタンが機能していない?!正しい URL の情報に変更する方法