みなさんはHTMLなどのコーディングをする際、どのエディタを使用していますか？
わたしはAtomを愛用しています。
最近Sublimeへの乗り換えを検討しているのですが、果たしてそんな簡単に長年愛用してきたAtomを手放していいものか……
「少し古くなってきて目移りする時はふたりが初めて出逢ったあの日を思い出してね」とトリセツで西野カナが歌っているように、わたしもAtomを使い始めたあの日を思い出すことにしてみます。
Atomといえば、GitHubによって開発されているため豊富なパッケージが特徴的です。
「パッケージがたくさんあるから、色々便利に作業できるよ！」と先輩に教えていただいたのがAtomを使い始めたきっかけです。
そのため、今回はわたしも実際に使っているおすすめのパッケージを皆さんにご紹介したいと思います！
そもそもAtomとは？
Webページを作成する際に、HTMLやCSSなどのソースコードを記述するための「テキストエディタ」が必要となります。
Atomはその「テキストエディタ」の一つです。
前述したように、GitHubによって開発されていて、さまざまな便利機能や豊富なパッケージをカスタマイズすることによって、自分好みの使いやすいエディタにすることができます。
今回は私篠原が特に気に入っている、推しパッケージを5つ紹介します。
atom-beautify
こちらはショートカットキーを叩くだけで、コードの自動整形をしてくれるパッケージです。
HTML/CSS/JavaScript/PHP/SQL…など、色々な言語に対応しています。
コードはできるだけきれいに書きたい性格なので、ソースコードのインデントが汚いと、うわぁ…と一気にやる気がなくなります。
例えばこんな感じの汚いコードも
atom-beautifyを使うと、こんなにきれいになります！
ソースコードを別のエディタなどからコピペしてきた時に使うことが多いです。
control+option+Bで一発でコードの整形が出来るので、かなり重宝しています。
tag
こちらはHTMLの閉じタグを自動で挿入してくれるパッケージです。
開始タグを書いた後に、自動で閉じタグが挿入されます。
control+Alt+.のショートカットキーでも同様に使用できます。
地味ではありますが、あるとありがたいですよね。
自動閉じタグ挿入が出来ない環境でコードを書いている時に、このパッケージのありがたみを実感します。
css-declaration-sorter
こちらはCSSのプロパティをソートしてくれるパッケージです。
以前携わったプロジェクトのコーディング規約に「CSSのプロパティはアルファベット順で」というのがあったので、こちらのパッケージを導入しました。
ソートの種類も、アルファベット順やSMACSSなどを選ぶ事ができます。
何も気にせずにCSSを書いたのちに、control+alt+Cで一気にソートが出来るので、非常に便利です。
用途は限られているかもしれませんが、ハマればかなり便利なパッケージです。
pigments
こちらはCSSファイルなどに書かれているカラーコードの値が、その表示色で強調されるようになるパッケージです。
パッとカラーコードを見ただけでその色がどんな色か分かる人って、あんまりいないですよね。。
このパッケージを使えば、直感的にそのカラーコード値で表された色が何色なのかわかりやすくなります。
また、強調の方法も様々なので、自分の好みのデザインにすることが出来ます。
デフォルトでは下記のように表示されます。
これをpigmentsパッケージを使用することで、以下のようにカスタマイズして表示させることが出来ます！
ハイライトの方法が何種類も選べるのは楽しいですよね。
分かりやすくなる上に、見た目も可愛くなるので個人的にかなりお気に入りのパッケージです。
activate-power-mode
もはや説明は不要、Atomと言ったらこれ！と言いたいくらいに推したいパッケージです。
このパッケージのおかげでわたしのコーディング作業が捗っていると言っても過言ではないです。
文字をタイプするたびに撒き散る何か。
文字をタイプするたびにつながるコンボ数。
たまに他の方にエディタをのぞかれたりいじったりされることがあるのですが、だいたいみなさんびっくりしてます。
業務時は流石に邪魔なのでコンボ数は非表示にしていますが、あったらあったで相当楽しいです。
結果、Atomからは離れられない
冒頭で「Sublimeに乗り換えようかな〜」なんて言っておきながら、やはりどうしてもAtomは最高ですね。
activate-power-modeがAtomにある限り、Sublimeへの乗り換えは出来そうにありません。。
こんなに楽しくコーディングが出来るエディタは、恐らくAtomだけでしょう（篠原調べ）。
今回は比較的初心者の方に役に立つようなパッケージをご紹介しました。
これ以外にも、幅広いスキルや業務内容の方にも役立つようなパッケージがAtomにはたくさんあります。
「大抵のことはパッケージ入れたらとりあえず出来る」的なポテンシャルを持っているエディタだと思っています。
Atomを使用したことがない方は、この機会にぜひインストールしてみてください。
