
フロントエンジニアが最初にAtomに入れるべきパッケージ
フロントエンドの開発で使われるIDEはいくつもありますが、Atomエディタを使っている人も多いのではないでしょうか?
DreamWeaverなどの重厚なツールよりも、最近はAtomやSublime 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
イコールやコロン記号の位置を自動的に揃えてくれる。
見やすいコードをサクサク書くにはすごい便利。