Aire Project Blog

ATOM

フロントエンジニアが最初にAtomに入れるべきパッケージ

フロントエンドの開発で使われるIDEはいくつもありますが、Atomエディタを使っている人も多いのではないでしょうか?
DreamWeaverなどの重厚なツールよりも、最近はAtomSublime Text 3のような軽量のエディタの方が好みですね。
Atomは無料で使えるので、今はAtomを使っています。

Vue.jsの記事を書き足す前に、Atomのカスタマイズをやっておかなければ、というわけでまずはパッケージのインストールからです。

日本語系

Japanese Menu

Atom のメニューバーとコンテキストメニュー、設定画面を日本語化します。

japanese-word-selection

ワード境界を日本語対応させて、単語を選択しやすくするAtomパッケージ。

auto-encoding

文字エンコードを自動判別してくれるパッケージ。
今はほぼUTF-8になっているけど、たまに古いプロジェクトでShift-JISなんかのファイルを開いたときに、盛大に文字化けするのを防げます。

見た目変更系

Show Ideographic Space

全角スペースを明示的に見えるようにします。
プログラミングでインデントに全角スペースを入れてしまうのを防げるので、なにげに必須です。

File Icons

開いているファイルの種類をアイコンで表示してくれるようになります。
見た目もきれいになるし、わかりやすい。

Highlight Line Package

選択している行をハイライト表示してくれるようになる。

Minimap

右側にファイルの全体を表示する。
コードの全体像を見ながらスクロールできるので便利。

コーディング補助系

Emmet

コーダーにとっては必須プラグインですね。
省略記法で書いたコードをtabキーで展開してくれる、Zen Codingと呼ばれていたやつです。

autocomplete+ paths suggestions

ディレクトリのパスを自動補完してくれるプラグイン。これも必須。

Multi-cursor

alt+up, alt+down でマルチカーソルを増やすことができる。
通常だと、⌘を押しながらクリックしないといけないので、これがないと不便。

Pigments

カラーコードの背景にその色を表示してくれる。
入力したカラーコードを実際の色で確認できる。あと、単純にきれい。

atom-beautify

自動的にコードのインデントなどを整形してくれる、ありがたい。

atom-alignment

イコールやコロン記号の位置を自動的に揃えてくれる。
見やすいコードをサクサク書くにはすごい便利。