LoginSignup
1
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-09-27

最近、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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1