Atom エディター sublim text のように選択時のみ不可視文字を表示させる方法

選択時のみ不可視文字を表示させる方法

まだそういったパッケージはない

実はこれsublimから移行した人はみんなここで不便をしてると思います。
日本語で検索してもヒットしないですね。英語で検索すると出てきます。
https://github.com/atom/atom/issues/6669
まあ一言で言うとそう言うパッケージはまだないから自分で設定いじってね
ってことです。

自分で設定する

Macでの操作
バーからAtomを選択しstylesheet...を開きます。

ここに設定を書いていきます。下のコードを全てコピペしましょう

// この一行をファイルの一番最初に置きましょう
@import "syntax-variables";

/*
  範囲選択時のみ不可視文字を表示させるようにします。
*/
atom-text-editor.editor {
  .invisible-character {
    // 1. 不可視文字を背景と同じ色にすることで通常の不可視文字の状態を隠します
    color: @syntax-background-color;

    // 2. カーソルラインの時に不可視文字を表示させる (ここは意味わからないけどとりあえず書いとく)
    // Should work by default but just in case.
    .cursor-line & {
      color: @background-color-highlight;
    }
    // 2a. または現在のラインで表示させない (ここは意味わからないけどとりあえず書いとく)
    .cursor-line & {
      color: transparent;
    }

    // 3. テーマによってインデントガイドで不可視文字が表示されることがあるためここを追加する
    &.indent-guide {
      box-shadow: inset 1px 0 0 0 @syntax-indent-guide-color;
    }
  }

  // 無駄なスペースやタブなどは赤で表示させる (カーソルライン以外のところ)
  div.line:not(.cursor-line) { 
    .trailing-whitespace {
      background-color: @background-color-error;
      color: contrast(@background-color-error);
    }
  }
}

完成系

補足

設定で不可視文字を表示するにチェックを入れないと不可視文字は見れませんよ。
全く関係ないがstylesheetに下記のように書くことでカーソルの文字の色も変えられる

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
   border-color: #FCC800;
}