Atomでインデントしてコードを整形する
みなさんHTMLやCSSのコーディングをしている時に、インデントはしていますでしょうか？
インデントとは、HTMLやCSSのコードを書く際に、段落の先頭や行頭に半角スペースやタブを入れて、字下げをすることで、コードを整形して見やすくするメリットがあります。（HTMLであればインデントによりタグの階層構造を見やすくなりますね）
インデントによりコードがフォーマットされ見やすくなりますが、していないコードは見辛く、メンテナンス性の観点で好ましくありません。下記の例ではインデントしているコードとしていないコードの例です。
前者のインデントしているコードの方がHTMLの階層構造をつかみやすいですよね！
インデントをする際にはAtomのエディターであれば、自動でサポートしてくれる機能もありますが、一方でインデントを忘れる事があったり、すでに存在しているコードのインデントをフォーマットしたい場合などがあるかと思います。
そこで今回はAtomのエディターで自動インデントをする方法と、インデントの設定の方法についてご紹介していきます。
Atomで自動インデントする方法
それではAtomで自動インデントする方法をご紹介します。
このようなインデントされていないHTMLを自動でインデント（オートインデント）していきます。
メニューから自動インデント
まずは文章全体を選択しましょう。Macであれば「Command + A」Windowsであれば「Ctrl + A」を押して、文章全体を選択します。
次に、Atomのメニューから「Edit」→「Lines」→「Auto Indent」を選択します。
（日本語であれば「編集」→「行」→「自動インデント」
するとHTML全体が自動でインデントされ、整形されます。とても簡単ですね。
もしも自動インデントが上手くいかない方は、タグの閉じ忘れや、入れ子がおかしくなっている場合がありますので、一度タグを見直しして、再チャレンジしましょう。
ショートカットで自動インデント
自動インデントはショートカットでも行えます。
またインデントしたいHTML文章全体を選択した状態で下記を実行しましょう。
コマンドパレットを開きましょう。Macであれば「Command + Shift + P」Windowsであれば「Ctrl + Shift + P」で開きます。
そして、「auto」と入力し、一番上に表示される「Auto Indent」を選択しましょう。
するとすぐに自動インデントされます。慣れればメニューからの選択よりもこちらの方が早いですね！
Atomでインデントの設定
次にAtomでのインデントの設定を行いましょう。
タブ入力時に入力するのを「タブ」「半角スペース」のどちらにするかや、ではタブ1回の入力で、スペース何個分入力するのかなど細かい調整をすることが出来ます。
Atomのメニューから「Preferences...」を選択しましょう。
Atomの設定画面が表示されますので、左側の「Editor」を選択します。
タブ押下時の半角スペースの数・長さ
タブを押した時に半角スペースを何個分入力するかという設定です。デフォルトでは「2個」となっていますので、つまり「1タブ→2半角スペース」となります。
こちらは会社・組織にコーディング規約があればそれに準拠し、特になければ自身で決めましょう。（一般的には2か4が多いです）
タブのタイプ
Tab Typeの設定項目の箇所でタブ入力時に、入力するタブのタイプの選択が出来ます。ここでは「オート」「ソフト」「ハード」の３つから選択が出来ます。
ハードタブ
ハードを選択した場合は、タブの入力で「タブ」がインデントに利用されます。コーディングルールとして、「インデントはタブを利用する」となっている方は、ハードを選択しましょう。
ソフトタブ
ソフトを選択した場合は、タブの入力でインデントに「半角スペース」を利用します。つまりタブキーを押したとしても、半角スペースに変換されて入力される形になります。
ちなみに1タブで何個分の半角スペースが入力されるのかは、先述のタブ押下時の半角スペースの長さ・数の設定値に準拠します。
オート
オートの場合は、Atomのエディターが履歴などから自動判断して、ハードorソフトを自動で決定します。
もしもコーディングルールが決まっている場合は、ハードorソフトで設定して、特に決まっておらず、こだわりもない方はオートのままでも大丈夫でしょう。