Atomとは

有名なテキストエディタです。宇宙服のOctocatかわいい。

Atom公式サイト

記事を書いたきっかけ

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
というパッケージをインストールして表示させます。

これで作業完了です。全角スペースが□で表示されるようになります。

phpファイルではタブと半角スペースの表示が区別されましたが、htmlファイルでは区別がされませんでした。

自分が見落としている機能もあると思いますが、無ければ別の方法を考えた方が良いかもしれませんね・・・。

個人的にはEditorConfigを試したい。以下、参考記事です。

ATOM Editor をそろそろ始めようか

不可視文字の箇所は分かりました。しかしgit diffでまだ表示されてしまう。

これはAtomの不可視文字除去機能（？）が原因でした。ちなみに除去される瞬間は、保存のタイミングで一瞬確認できます。

以下の記事を参考にしました。

Atomで保存時の処理の設定を変更する

この機能が必要な場合もあるかもしれませんが、今回の作業は既存のコードの修正だったので、機能そのものを停止しました。

SettingsのPackagesを選択し、whitespaceと入力。Settingsをクリックする。

Remove Trailing Whitespaceのチェックを外す。

これで不可視文字はそのまま残ります。

どちらを使用するか、あらかじめ職場内・プロジェクト内で確認しておいた方が良いです。ちなみに自分の周辺はスペース派多し。

仮にタブ・スペースが入り混じったファイルがあったとしても、修正すればgit diffで全て表示されてしまいます。ファイルをそのままにしておくか、もし修正するならそのタイミングはどうするか、これも要相談だと思います。

タブ、スペースは正確には何と言うのでしょうか？（今回は不可視文字で統一しましたが。）

不可視文字？制御文字？空白？whitespace？

今回の件は、自分一人の作業であればさほど気にする必要はないかもしれません。しかし、コードレビューなど他人に見られる状況であれば、無視できないことだと思います。加えて、不可視文字が予期しない動作を引き起こす可能性もあります。

防げるものは防ぎ、円滑な作業を目指しましょう〜（＾ω＾）