みなさんWEB開発をする際はどのエディターを使用していますか？私はAtomを使って開発をしています。そこで今回はAtomユーザーに向けて実際に私が開発する際に使用しているプラグインを9つ紹介したいと思います。

おすすめのプラグイン

japanese-menu

URL：https://atom.io/packages/japanese-menu

japanese-menuはAtomを日本語化するプラグインです。インストールした時は英語になっているかと思いますが、このプラグインでAtomを日本語化することができます。

file-icons

URL:https://atom.io/packages/file-icons

file-iconsはファイルのアイコンをカラフルにしてくれるプラグインです。ファイルの拡張子ごとにアイコンがつくので、視覚的に見やすくなります。

minimap

URL：https://atom.io/packages/minimap

minimapは画面の右に今開いているファイルを全画面に表示してくれるプラグインです。構築が進むと記述するコードの量も増えてきます。いちいちスクロールするのが大変ですが、minimapを使うと任意に位置まですぐにスクロールすることができます。

color-picker

URL：https://atom.io/packages/color-picker

color-pickerは色をエディター上で視覚的に選ぶことができます。通常色は色コードで記述しますが、color-pickerを使うことでパネル上で色を選択することができます。ショートカットは「Command + Shift + C」です。

pigments

URL：https://atom.io/packages/pigments

pigmentsは色コードに色をつけてくれるプラグインです。視覚的に色を見ることができるのでその色コードがどんな色なのか一目でわかります。

highlight-column

URL：https://atom.io/packages/highlight-column

highlight-columnは字下げ(インデント)をわかりやすくしてくれるプラグインです。しっかりとインデントすることで綺麗なコードになります。コードは誰が見てもわかるように綺麗に書くようにしましょう。

selection-highlight

URL：https://atom.io/packages/selection-highlight

selection-highlightでは選択したテキストをダブルクリックするとその単語がハイライトされるプラグインです。

emmet

URL：https://atom.io/packages/emmet

emmetはコードを書く上で覚えておくと開発速度がかなり上がります。例えば.headerと入力すると

に変換されます。またpタグでクラス名をtextとしたい場合はp.textで変換されます。

emmetは「Enter」の代わりに「Command + Shift + E」を押すと変換されます。これを覚えるとタイピングをする回数がへるので、タイピングミスなどの防止にも繋がります。

まとめ

いかがだったでしょうか？今回紹介したプラグインは私が現場で使っているものなので、実用性はかなりあるかと思います。これらのプラグインを導入して、素早い開発をできるようになりましょう。

弊社では、そうしたツールを活かして、素早い構築を心がけています。短期間で高品質なホームページをお求めの方はぜひ、弊社Esolabにご依頼ください。