Atomとは
有名なテキストエディタです。宇宙服のOctocatかわいい。
記事を書いたきっかけ
git diffで差分をチェックしたら、コードを全く変更していないはずの箇所が表示されたから。こんな感じ。
その後、今回紹介するのAtomの機能を使い、不可視文字（タブ・スペース）が原因と判明。さらに、勝手に不可視文字が除去されていたことが分かった。
スマートに解決できたわけではありませんが、忘れないうちに書き記しておこうと思った次第です。
不可視文字は、目には見えない
初期設定のままだと不可視文字が表示されません。それを変更します。
タブと半角スペースの表示
メインメニューからPreferencesを選択
Settingsが開くのでEditorタブを選択し、Show Invisiblesをチェックする。
これでタブと半角スペースが視覚的に表示されます。
タブと半角スペースの区別
初期設定のままでは、タブと半角スペースの表示が同じになってしまいました。
しかし、これについては決定的な解決策が見つかりませんでした。本来は以下のように区別して表示されるはずなんですが・・・
ここでちょっと気になる機能があったので、ご紹介します。
shift+command+P(Mac)またはShift+Ctrl+P(Windows)でコマンドパレットを開き、convertと入力します。
Whitespace:Convert Spaces To Tabsを選択し、Enterで確定します。これ以降、タブと半角スペースの表示が区別されます。
しかし、この方法ではAtomを再起動した時に設定が元に戻ってしまいます。しかもファイルごとに実行する必要があります。
さらにメニュー自体がスペースをタブに一括して変更する機能なので、スペースのままにしておきたい部分もタブに変更されてしまいます。
あくまで参考に・・・
全角スペースの表示
全角スペースは上記の方法では表示できません。そのためshow-ideographic-space
というパッケージをインストールして表示させます。
SettingsのInstallタブから検索し、インストールします。
これで作業完了です。全角スペースが□で表示されるようになります。
注意点
phpファイルではタブと半角スペースの表示が区別されましたが、htmlファイルでは区別がされませんでした。
自分が見落としている機能もあると思いますが、無ければ別の方法を考えた方が良いかもしれませんね・・・。
個人的にはEditorConfigを試したい。以下、参考記事です。
不可視文字は、残したい
不可視文字の箇所は分かりました。しかしgit diffでまだ表示されてしまう。
これはAtomの不可視文字除去機能（？）が原因でした。ちなみに除去される瞬間は、保存のタイミングで一瞬確認できます。
以下の記事を参考にしました。
この機能が必要な場合もあるかもしれませんが、今回の作業は既存のコードの修正だったので、機能そのものを停止しました。
SettingsのPackagesを選択し、whitespaceと入力。Settingsをクリックする。
Remove Trailing Whitespaceのチェックを外す。
これで不可視文字はそのまま残ります。
タブVSスペース
どちらを使用するか、あらかじめ職場内・プロジェクト内で確認しておいた方が良いです。ちなみに自分の周辺はスペース派多し。
仮にタブ・スペースが入り混じったファイルがあったとしても、修正すればgit diffで全て表示されてしまいます。ファイルをそのままにしておくか、もし修正するならそのタイミングはどうするか、これも要相談だと思います。
ちょっとした疑問
タブ、スペースは正確には何と言うのでしょうか？（今回は不可視文字で統一しましたが。）
不可視文字？制御文字？空白？whitespace？
まとめ
今回の件は、自分一人の作業であればさほど気にする必要はないかもしれません。しかし、コードレビューなど他人に見られる状況であれば、無視できないことだと思います。加えて、不可視文字が予期しない動作を引き起こす可能性もあります。
防げるものは防ぎ、円滑な作業を目指しましょう〜（＾ω＾）