読者です 読者をやめる 読者になる 読者になる

まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

Atom(テキストエディタ)で初めに設定しておくと便利な機能

Atom

こんにちは、まちいろの井上です。

HTMLやCSSをコーディングする際には、テキストエディタが必要になってきますよね。

私はこれまでSublime Text3を利用していたのですが、まちいろではAtomを利用しているメンバーも多く、社内でのCSS勉強会の際もAtomの機能の説明が登場したので、これを機に私もAtomを使ってみようと思い、初めてインストールしてみました。

そこで今日は、AtomのHTML・CSSコーディングを行う際に初めに設定しておくと便利な機能をご紹介したいと思います。

インストール

Atomのページからソフトをダウンロードし、exeを実行しインストールを行います。

f:id:yu_inoue:20160913201406p:plain

設定しておくと便利な機能

半角スペース、タブの可視化

デフォルト設定では、半角スペースなのか、タブが挿入されているかを見た目だけでは判断することができません。そこで、半角スペースなのか、タブなのかがわかるように設定していきたいと思います。

Fileメニューの「Settings」を選択し、「Setting」タブを表示します。 f:id:yu_inoue:20160913193611p:plain

「Setting」タブの左メニューの項目から「Editor」を選択し、下にスクロールしていくと「Show Invisible」という項目があるのでチェックを入れます。 f:id:yu_inoue:20160913193921p:plain

すると、以下の図のように半角スペース( )、タブ( )、改行( ¬)を可視化することができます。 f:id:yu_inoue:20160913194348p:plain

インデントに縦線を表示する

先程と同じように「Setting」タブの左メニューから「Editor」を選択し、「Show indent Guide」にチェックを入れます。

すると以下のようにインデントに縦線が表示され、HTMLのタグの構造がわかりやすくなります。 f:id:yu_inoue:20160913195434p:plain

Tabの設定(タブ表示、半角スペース表示の切り替え)

Tabキーを押下した際に、通常のタブ入力(ハードタブ)にするのか、あるいは半角スペースを複数個使用することでタブの代わり(ソフトタブ)にするのかを設定することができます。

①「Setting」タブの「Editor」の中の「Tab Type」がデフォルトではautoになっているので、これをhardまたはsoftに切り替えることで設定が可能となります。

②タブのインデント幅はデフォルトで半角スペース2つ分になっていますが、「Tab Length」から半角スペースの数をお好みのサイズに変更することが可能です。 f:id:yu_inoue:20160913195730p:plain

共同で開発をしている場合は、ハードタブにするのか、ソフトタブにするのか、また半角スペースは何個にするかなどルールがあると思うので、開発前に設定しておきましょう。

HTMLタグを自動で閉じる

HTMLを書いていると、自動でタグを閉じてほしいなと思ってしまいます。

そこで開始タグの>を入力すると、自動で閉じタグを入力してくれるパッケージautoclose-htmlをインストールしたいと思います。

①「Setting」タブの左メニューから「Install」を選択し、Install Packagesの検索欄にautoclose-htmlを入力して検索します。

②検索するとパッケージの候補が表示されるので、対象のパッケージをインストールします。

f:id:yu_inoue:20160913195910p:plain

インストールが完了すると、開始タグを閉じたタイミングで自動で閉じタグを入力してくれるようになります。

全角スペースを表示する

HTMLタグの中や、CSSの中に全角スペースが入っていしまい、レイアウトが思うように表示されないという経験はありませんか?

そんな時に役に立つのが、全角スペースを表示してくれるパッケージshow-ideographic-spaceです。

インストールすると以下のように、全角スペースを表示してくれるようになります。

f:id:yu_inoue:20160913200139p:plain

最後に

今日ご紹介したのは本当にごく一部の設定で、Atomにはたくさんのパッケージが準備されています。

ぜひ色々なパッケージを試して、ご自身の開発しやすい環境にカスタマイズしてみてください。