こんにちは、まちいろの井上です。
HTMLやCSSをコーディングする際には、テキストエディタが必要になってきますよね。
私はこれまでSublime Text3を利用していたのですが、まちいろではAtomを利用しているメンバーも多く、社内でのCSS勉強会の際もAtomの機能の説明が登場したので、これを機に私もAtomを使ってみようと思い、初めてインストールしてみました。
そこで今日は、AtomのHTML・CSSコーディングを行う際に初めに設定しておくと便利な機能をご紹介したいと思います。
インストール
Atomのページからソフトをダウンロードし、exeを実行しインストールを行います。
設定しておくと便利な機能
半角スペース、タブの可視化
デフォルト設定では、半角スペースなのか、タブが挿入されているかを見た目だけでは判断することができません。そこで、半角スペースなのか、タブなのかがわかるように設定していきたいと思います。
Fileメニューの「Settings」を選択し、「Setting」タブを表示します。
「Setting」タブの左メニューの項目から「Editor」を選択し、下にスクロールしていくと「Show Invisible」という項目があるのでチェックを入れます。
すると、以下の図のように半角スペース( ・
)、タブ( ≫
)、改行( ¬
)を可視化することができます。
インデントに縦線を表示する
先程と同じように「Setting」タブの左メニューから「Editor」を選択し、「Show indent Guide」にチェックを入れます。
すると以下のようにインデントに縦線が表示され、HTMLのタグの構造がわかりやすくなります。
Tabの設定(タブ表示、半角スペース表示の切り替え)
Tabキーを押下した際に、通常のタブ入力(ハードタブ)にするのか、あるいは半角スペースを複数個使用することでタブの代わり(ソフトタブ)にするのかを設定することができます。
①「Setting」タブの「Editor」の中の「Tab Type」がデフォルトではauto
になっているので、これをhard
またはsoft
に切り替えることで設定が可能となります。
②タブのインデント幅はデフォルトで半角スペース2つ分になっていますが、「Tab Length」から半角スペースの数をお好みのサイズに変更することが可能です。
共同で開発をしている場合は、ハードタブにするのか、ソフトタブにするのか、また半角スペースは何個にするかなどルールがあると思うので、開発前に設定しておきましょう。
HTMLタグを自動で閉じる
HTMLを書いていると、自動でタグを閉じてほしいなと思ってしまいます。
そこで開始タグの>
を入力すると、自動で閉じタグを入力してくれるパッケージautoclose-html
をインストールしたいと思います。
①「Setting」タブの左メニューから「Install」を選択し、Install Packagesの検索欄にautoclose-html
を入力して検索します。
②検索するとパッケージの候補が表示されるので、対象のパッケージをインストールします。
インストールが完了すると、開始タグを閉じたタイミングで自動で閉じタグを入力してくれるようになります。
全角スペースを表示する
HTMLタグの中や、CSSの中に全角スペースが入っていしまい、レイアウトが思うように表示されないという経験はありませんか?
そんな時に役に立つのが、全角スペースを表示してくれるパッケージshow-ideographic-space
です。
インストールすると以下のように、全角スペースを表示してくれるようになります。
最後に
今日ご紹介したのは本当にごく一部の設定で、Atomにはたくさんのパッケージが準備されています。
ぜひ色々なパッケージを試して、ご自身の開発しやすい環境にカスタマイズしてみてください。