漫画の地球儀

『Atom』で自動インデントする方法!【タブ、スペース、設定方法、HTML、CSS、コーディング】

スポンサーリンク


f:id:rick1208:20200916173253p:plain

みなさんHTMLやCSSのコーディングをしている時に、インデントはしていますと思いますか?

インデントとは、HTMLやCSSのコードを書くときに、段落の先頭や行頭に半角スペースやタブを入れて、字下げをすることで、コードを整形して見やすくするメリットがあります。(HTMLであればインデントによりタグの階層構造を見やすくなりますね)

インデントによりコードがフォーマットされ見やすくなりますが、していないコードは見辛く、メンテナンス性の観点で好ましくありません。下記の例ではインデントしているコードとしていないコードの例です。

前者のインデントしているコードの方がHTMLの階層構造をつかみやすいです

インデントをするときにはAtomのエディターであれば、自動でサポートしてくれる機能もありますが、一方でインデントを忘れる事があったり、すでに存在しているコードのインデントをフォーマットしたい場合などがあるかと思います。

そこでここではAtomのエディターで自動インデントをする方法と、インデントの設定の方法についてご説明していきます。
A

Atomで自動インデントする方法

f:id:rick1208:20201111210652p:plain

それではAtomで自動インデントする方法をご解説します。

このようなインデントされていないHTMLを自動でインデント(オートインデント)していきます。
f:id:rick1208:20201111210705p:plain

メニューから自動インデント

まず最初は文章全体を選びましょう。Macであれば「Command + A」Windowsであれば「Ctrl + A」を押して、文章全体を選びます。

次に、Atomのメニューから「Edit」→「Lines」→「Auto Indent」を選びます。
(日本語であれば「編集」→「行」→「自動インデント」
f:id:rick1208:20201111210732p:plain

するとHTML全体が自動でインデントされ、整形されます。とても簡単です。
f:id:rick1208:20201111210749p:plain
もしも自動インデントが上手くいかない人は、タグの閉じ忘れや、入れ子がおかしくなっている場合がありますので、1回タグを見直しして、再チャレンジしましょう。

ショートカットで自動インデント

f:id:rick1208:20201111210855p:plain
自動インデントはショートカットでも行えます。

またインデントしたいHTML文章全体を選びた状態で下記を実行しましょう。
f:id:rick1208:20201111210906p:plain
コマンドパレットを開きましょう。Macであれば「Command + Shift + P」Windowsであれば「Ctrl + Shift + P」で開きます。

そして、「auto」と記入し、一番上に表示される「Auto Indent」を選びましょう。

するとすぐに自動インデントされます。慣れればメニューからの選択よりもこちらの方が早いです。

Atomでインデントの設定

f:id:rick1208:20201111210924p:plain
次にAtomでのインデントの設定を行いましょう。

タブ記入時に記入するのを「タブ」「半角スペース」のどっちにするかや、ではタブ1回の記入で、スペース何個分記入するのかなど細かい調整をすることが出来ます。

Atomのメニューから「Preferences、、、」を選びましょう。
f:id:rick1208:20201111210938p:plain
Atomの設定画面が表示されますので、左側の「Editor」を選びます。
f:id:rick1208:20201111210951p:plain

タブ押下時の半角スペースの数・長さ

タブを押した時に半角スペースを何個分記入するかという設定です。デフォルトでは「2個」となっていますので、要するに「1タブ→2半角スペース」となります。

こちらは会社・組織にコーディング規約があればそれに準拠し、特になければ自身で決めましょう。(一般的には2か4が多いです)
f:id:rick1208:20201111211056p:plain

タブのタイプ

Tab Typeの設定項目
Tab Typeの設定項目の箇所でタブ記入時に、記入するタブのタイプの選択が出来ます。ここでは「オート」「ソフト」「ハード」の3つから選択が出来ます。
f:id:rick1208:20201111211128p:plain

ハードタブ

ハードを選びた場合は、タブの記入で「タブ」がインデントに使用されます。コーディングルールとして、「インデントはタブを使用する」となっている人は、ハードを選びましょう。

ソフトタブ

ソフトを選びた場合は、タブの記入でインデントに「半角スペース」を使用します。要するにタブキーを押したとしても、半角スペースに変換されて記入される形になります。

ちなみに1タブで何個分の半角スペースが記入されるのかは、上で書いたタブ押下時の半角スペースの長さ・数の設定値に準拠します。

オート

オートの場合は、Atomのエディターが履歴などから自動判断して、ハードorソフトを自動で決定します。

もしもコーディングルールが決まっている場合は、ハードorソフトで設定して、特に決まっておらず、こだわりもない人はオートのままでも大丈夫と思います。