Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

最近、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上ではこのような見た目になります。

SS 2017-09-27 10.22.56.png

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

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

_hk
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away