プログラミングでは、テキストエディタが欠かせません。Web制作ではSublime TextやAtom、Codaあたりが人気です。Adobeが提供しているDreamweaverのテキストエディタを使っている方も多いことでしょう。
中でも、Atomは圧倒的な人気を誇っています。もともとWeb制作に特化したテキストエディタということもあって、Webアプリケーションやホームページの作成に向いているのです。GitのホスティングサービスであるGitHubが開発していることも、人気に拍車をかけていると言えます。
本稿では、Atomのおすすめパッケージを14個ご紹介します。Atomはもともと高機能なテキストエディタなのですが、パッケージを活用することでより快適で効率的なプログラミング環境が整えられます。Atomを使っている方はぜひ参考にしていただければと思います。
入力関連
emmet
» emmet
emmetとはWeb開発者向けのツールのことで、HTMLやCSSなどのコードの入力を効率化してくれます。Atom用のパッケージもリリースされているので、Web開発で使うのであればインストールしておくことをおすすめします。
emmetがどれくらい便利なのか、いくつか例をあげてみましょう。例えば、下のように入力して「Ctrl + e」をクリックしてください。
html:5
すると、自動で下のコードと置き換わって表示されます。このように、emmetを使えばコードの記述量を圧倒的に少なくすることができます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
次に、下のように書いて「Ctrl + e」を押します。
nav>ul>li
すると、下のように階層構造を持たせてnavを記述できます。
<nav>
<ul>
<li></li>
</ul>
</nav>
他にもいろいろな使い方があるのですが、一度使いはじめたら離れられなくなるほど便利です。
tag
» tag
HTMLのコーディングを楽にしてくれるパッケージです。閉じタグを自動で挿入してくれるので、HTMLのコーディングが捗るでしょう。
autocomplete-paths
プログラミングでは、外部のファイルを指定することが結構多いです。スタイルを読み込んだり、画像ファイルのパスを指定することも良くあります。ご存じのように、パスを書くのは結構面倒です。しかも、書き間違いがあっても案外気付きにくいです。
autocomplete-pathsは外部ファイルのパスを補完してくれるパッケージです。パスを書く手間もなくなりますし、書き間違いも大幅に減らすことができるようになるでしょう。
表示関連
minimap
» minimap
minimapは、Atomの画面右側にマップを表示するためのパッケージです。いま自分が見ている（編集している）部分が確認できるので、ソースコード全体の見通しが良くなります。Sublime Textで人気の機能の一つだったのですが、それをAtomでも使えるようにしてくれるパッケージです。
minimap-autohide
上でご紹介したminimapは、常に画面端に表示されています。それがメリットでもあるのですが、画面の大きくないラップトップ（ノートPC）で使っている時など、少し邪魔に感じるときもあります。
そこでおすすめなのが、minimap-autohideというマップを自動で隠してくれるパッケージです。コードの編集中はマップは非表示になっていて、見たいときに画面端にマウスをホバーすると、マップがスライドされて表示されます。
highlight-selected
Atomは検索機能も備わっています。「Command + F」を押して、検索ワードを入力。Enterを押せば検索ができます。Atomに限らず、どういったツールやソフトでも似た操作が必要なのですが、Atomにはもっと簡単に検索を行えるパッケージがあります。
highlight-selectedは、選択した部分の同じワードをハイライトしてくれるパッケージです。いちいち検索を実行する手間もなく、素早く予約語や変数を探すことができるようになります。
カラー関連
pigments
» pigments
Webページを作る時には、HTMLやCSSを使いますよね。HTMLはページのコンテンツや構造を、CSSがデザインを司っています。
CSSでデザインする時は、colorプロパティを頻繁に使うかと思います。要素の色を指定するのですが、pigmentsを導入するとコード内で色を視覚的に表示することができるようになります。右クリックでcolorコードを変換したり、プロジェクトで使われている色を検索できたりと、機能も豊富です。
color-picker
Atom内でカラーピッカーを使えるようにしてくれるパッケージです。右クリックをして「Color Picker」を選択すると、カラーピッカーが表示されます。カラーフォーマット間の変換も可能で、自動でアッパーケースにしてくれる機能もついています。
Git関連
git-plus
» git-plus
AtomはGitHubが開発したテキストエディタなので、Gitとの親和性も高いです。Git関連のパッケージも豊富で、git-plusもGitを便利に使うためのAtomパッケージです。
Gitを使う時はターミナルからコマンドを実行することが一般的ですが、それだとAtomとターミナルを行ったり来たりする必要が出来てしまいますよね。git-plusを導入すると、AtomのタブからGitコマンドが打てるようになるのでGit関連の作業が効率化できます。
merge-conflicts
Gitのコンフリクトを表示するためのパッケージです。画面下に一覧が表示され、コンフリクトの移動も素早く行うことができます。
その他
project-manager
Atomで複数のプロジェクトを使っている時に重宝するのが、project-managerです。プロジェクトを一覧で確認したり、プロジェクト間を素早く移動することもできるようになります。プロジェクトはリストとして管理していくことができます。
file-icons
プロジェクトをツリー表示したときのファイルアイコンを表示するためのパッケージです。拡張子によって、適当なアイコンが表示されるようになります。ファイルの識別がしやすくなるので、シンプルですが役に立ちます。
term3
» term3
Atomからターミナルの操作ができるようになります。ターミナルがタブの一つとして表示されます。
sync-settings
Atomの設定やパッケージ、キーマップなどを同期するためのパッケージです。会社と自宅など、複数のPCでAtomを使っている方におすすめです。
あとがき
Web制作者向けのテキストエディタ、Atomのおすすめパッケージを14個ご紹介しました。ご紹介したように便利なパッケージも多く、インストールや管理も簡単です。使えそうなプラグインがあったらぜひ積極的に導入していきましょう。