
今回はAtomでスペースをみやすくしたい場合にどうすればいいのかみていこうと思います。
また、その時に">>"(大なり二つ)、"¬"(否定)、"・"(中点)の記号が出てきますが、それらの意味も合わせて解説します。
スペース箇所がよくわかるようにしたい
半角スペースがいくつ有るのかとか、正確にみたかったりしませんか?


Atomでは、そんな人のために、半角スペースを入力した箇所に"・"(なかてん)、Tabキーで入力した箇所に">>"(大なり二つ)、改行(Enter)を入力した箇所に"¬"(否定)、が表示されるようにできます。
まずはこれを設定していきましょう!
では、早速、画面上部にあるAtomからPreferencesを選択します。

簡単ですね!
画面中央辺りにあるPackagesを選択後、言語名で検索します。


言語名はご自身の普段よく編集するファイルに合わせてください。(text、php、js...等
検索をすると、下の方に"language-言語名"でCore Packageが表示されます。
そのSettingsを選択します。

すると、設定画面になる。

設定画面が出てきたら、少し下にスクロールして、以下のような項目を探してみてください。
今回使うのは"Show Indent guide"と"Show invisibles"です。

見つけたら、まずは"Show Invisibles"にチェックがついている(上記画像のように青くなっている)状態にします。
こうすることで、半角スペースを入力した箇所に"・"(なかてん)、Tabキーで入力した箇所に">>"(大なり二つ)、改行(Enter)を入力した箇所に"¬"(否定)、が表示されるようになります。

一定間隔毎に縦線を入れる
さて、いい感じにスペースを入れたのですが、上記画像よくみてみるとbodyのインデントずれてますよね(インデントがいきなり8になってるのはちょっと許してくださいw)。
最初のbodyはインデントが半角スペース7個分、後ろのは一個少ないです。
ただ、・だけでは気付きづらいですね...
そんな時に、一定の間隔で縦線を入れることでズレがわかりやすくなるというわけです。
方法は非常に簡単です。
先ほどと同じ手順を行い、"Show Indent Guide"を選択してあげればOKです。

本のファイルをみると...?

簡単ですね!
縦線の間隔を調整したい場合は、すぐ下にあるTab Lengthを修正してあげればOKです!


こんな感じで調節ができます!
ただし、この調節をする上で注意をして欲しいのが、Tab Lengthは別記事にも書いていますが、Tabキーを押した場合の挙動も変わってしまうので、その点は注意です。
例えば半角スペース"4"で書くように社内やプロジェクトで決まりがあり、TabでEnterを押すと一発で4つ分の半角スペースが打てるように設定していたとしましょう。
それから、ちょっと・が4つ並ぶの見辛いからとLengthを"2"に設定し直すと...
確かに点2つ毎に縦線が入り、少しみやすくなるかもしれませんが、今まで一回で入力できていたTabを二回押さなければいけなくなります。
さらに、Tabが半分になるとそれにともないTabが半分のままになってしまったり...と、コーディングのケアレスミスにも繋がるので、基本は決められているスペース分を設定するようにしましょう。
まとめ
意外とスペースが見えるだけでみやすくなると思います。(人によるかもだけど...
ぱっと周りを見るとどちらもつけている人が多い印象なので、是非皆さんもつけてみて、悪かったら外す、よかったらそのまま使い続けるといった形で慣れていくといいと思います!
Atomを便利に使っていきましょう!