Atom

Web制作のお仕事に欠かせないものをといえばテキストエディタですね。SublimeText、Visual Studio Code、Brackets、Codaなどなど色々なエディタがありますが、私はGitHub製のAtomを使ってます。

Atomは軽量でシンプルなエディタですが、デフォルトのままだとちょっと色々足りてない感が否めないんですよね。正直プラグイン追加してなんぼみたいなところあると思います。様々なプラグインが公開されていますが、今回はその中でも個人的に愛用しているもの（=フロントエンド開発にオススメと思われるもの）をご紹介したいと思います。

atom-beautify

ソースコードのインデントなどをいい感じに整形してくれるパッケージ。minifyされたファイルを展開したり使い道いろいろ。

autoclose-html

HTMLの閉じタグを自動的に入力してくれるパッケージ。HTMLは基本的にEmmetで書いてるのであまり使う機会はないけど稀に直接書くこともあるので念のため。

autocomplete-paths

ファイルのパスを相対で書く時に保管してくれるパッケージ。

color-picker

その名の通りCSSの記述の際にカラーピッカーが使えるパッケージ。command + shift + cで使える。

emmet

専用の記法を使うことでHTMLやCSSを爆速で書けるパッケージ。最近はデフォルトで使えるエディタも多いですね。最初は慣れなかったけど、今ではこれがないと書く気起きないくらい重宝してます。作業効率アップに絶大な効果を発揮してくれるので、定時で帰りたい人は必ず導入すべし。

editorconfig

インデントをタブにするかスペースにするか、そのサイズは半角スペース2つにするかどうかなど、エディタの設定を他人と共有するためのパッケージ。チームで開発する時は必須なやつです。

file-icons

拡張子やファイル名に応じて適切なアイコンを表示してくれるパッケージ。ツリービューにはたくさんのファイルが並びますが、これを入れておくと一目で何のファイルかわかるので便利です。

highlight-line

選択中の行をハイライト表示してくれるパッケージ。ハイライトの色はカスタマイズもできる模様。

highlight-selected

選択したWordと同じものがファイル内にあればそれを全てハイライト表示してくれるパッケージ。jsで変数がどこで使われているか調べる時などに便利。

linter

コードを解析して問題があるところがあればWarningやアラートで教えてくれるパッケージ。実際に使うためには、これにプラスしてチェックをしたい言語のlinter用パッケージをそれぞれインストールする必要があります。私が入れているのはこちら↓

pigments

CSSで入力した色指定のコードを実際の色で視覚化してくれるパッケージ。SCSSの変数にも有効。

platformio-ide-terminal

Atom内でターミナルを使えるようにするパッケージ。gulpやら何やら開発時にコマンドを叩くことはよくあるので一画面で完結できるのは非常に便利。terminal-plusの方がメジャーらしいのですが、私の環境ではうまく動かないのでこちらを使ってます。使い勝手はほぼ同じ。

pretty-json

jsonファイルをpretify（読みやすく整形）してくれるパッケージ。

project-manager

Atomにプロジェクト管理機能を追加するパッケージ。プロジェクトを素早く切り替えることができる。

regex-railroad-diagram

正規表現の処理内容を可視化してくれるパッケージ。正規表現はいまだにこんがらがりやすいので重宝してます。

script

エディタ上でコードを実行できるパッケージ。関数の処理結果をサクッと知りたい時などに使ってます。

split-diff

2画面に分割し、左と右の差分（diff）を調べられるパッケージ。よく使いますね。

trailing-spaces

ソースの行末にできてしまった半角スペースにわかりやすい色をつけて教えてくれるパッケージ。不要なスペースはない方が良いのでこの色がつかないソースが望ましい。