ATOM エラー原因となる文字化けを可視化。

最近、MacのATOMでコーディングをしていると、不可視文字が入力されてしまいエラーでるようになりました。
slackでも文字化け対象になる豆腐文字によるものだと思われます。
ATOMで特定の文字をハイライトしたいというのが今回の目的になります。

下の方法でエラーの原因の文字を可視化出来るようにしました。

不可視文字を可視化するためのプラグインをインストール

show-ideographic-spaceをインストール。
(全角スペースを可視化してくれるためのプラグイン。とても便利。)
こちらのプラグインの中身を加筆して豆腐文字を可視化していきます。
※修正ファイルのバックアップは各自とるようにしてください。

プラグイン内のファイルを修正。

修正ファイルは2つです。

~/.atom/packages/show-ideographic-space/lib/show-ideographic-space.coffee

'':
  type: 'highlight'
  class: 'tofu'

show-ideographic-space.coffeeの10行目あたりの文字charMapの中身に上記を追加します。
''の中にエラーの対象となる文字を貼り付けてください。

~/.atom/packages/show-ideographic-space/styles/show-ideographic-space.less

atom-text-editor, atom-text-editor::shadow {
  .highlight.tofu {
    .region:after {
      color: #800000;
      content: 'X';
      background-color: #CCCCCC;
    }
  }
}

最下部に上記を追記します。

Atomを再起動することによって、豆腐文字がハイライト及びXという文字が入るようになっています。
Atom上ではこのような見た目になります。

以上になります。
そのうちATOM側で修正されるかと思いますが暫時対応として参考になれば。

参考記事
https://teratail.com/questions/39267