GitHub製テキストエディタAtomのおすすめパッケージ&テーマ計12選!

2017年2月16日

TOOL

僕も愛用中のGitHub製テキストエディタAtom。個人的に以下のような特徴があると思っています。

  • 便利で扱いやすい文字列&ファイル検索機能
  • GitHub製というだけありGitとの相性が良い
  • キーマップを簡単に自分好みにカスタマイズできる
  • パッケージ&テーマが豊富で管理もしやすい
  • (VimやSublimeTextなどと比較すると)少し動作がもっさりしている
  • Chromeに次ぐメモリ消費量

色々挙げましたが、とにかく自分好みにカスタマイズしやすい点が最大の魅力ですね。
ただしカスタマイズパッケージが大量にあり、はじめはどれをインストールすればいいのかわからないのが難点です。
なので今回は特にWeb開発者におすすめのパッケージを厳選して紹介します。

Atomのインストールはこちらから atom.io

パッケージの検索とインストール方法

パッケージのインストール方法は以下のように複数あるので、今回は太字の一番簡単な方法を紹介します。

  • AtomエディタのSettingsタブ→Installから検索してインストール
  • apmコマンドでインストール
  • パッケージのGitHubページから直接ダウンロードして専用ディレクトリに配置する

まず、Atomを立ち上げcommand + ,を押すか(Mac)、以下のようにして設定画面を開いた後、Installを選択します。

すると検索フォームが表示されるので、ここからパッケージ名を入力して検索します。

おすすめパッケージ7選

パッケージを利用するためのショートカットキーはすべてMac用のみを表記しています。ご注意ください。

1. advanced-open-file

ファイルパスを入力してファイルの選択、作成を行うパッケージ。

このパッケージの魅力は以下の2点だと思います。

  • 現在開いているファイルのディレクトリからパスがスタートする
  • ファイル選択だけでなく作成も行える

このおかげで同じディレクトリにある別ファイルを素早く選択したり、ツリービューを使わなくても新しいファイルをサクッと作成できます!
探したいファイル名を素早く検索して開きたい場合は、Atom標準ショートカットcommand + pのファイル検索がとても強力なので、うまく使い分けてみるといいでしょう。

デフォルトではalt-command-oでこの機能をトグルできます。

advanced-open-file

2. chary-tree-view

ツリービューのファイルをダブルクリックで開くようにするパッケージ。

デフォルトではツリービューのファイルを1度クリックしただけでファイルが開かれてしまいます。
うっかりクリックしてファイルが開かれるという事が続くとストレスになるので、入れておくことをおすすめします。
このパッケージはインストールするだけで有効になり、特に設定は必要ありません。

chary-tree-view

3. clipboard-plus

Atom内でのクリップボードを拡張してくれるパッケージ。

このパッケージを呼び出すことで、クリップボードの履歴から必要なものを選択してペーストできるようになります。
ただし、このパッケージはデフォルトのショートカットキーが設定されておらず、自分でキーマップを設定しないといけません。
設定方法は以下リンク先のKeymap欄を参考にしてください。

clipboard-plus

4. goto-definition

メソッド、関数の定義元にジャンプすることができるパッケージ。

メソッド、関数名にカーソルを合わせた状態でalt-command-Enterを押すと、定義元にジャンプすることができます。
現在対応している言語などは以下のリンク先で確認してください。

goto-definition

5. jumpy

ショートカットを利用してエディタ内の好きな場所にジャンプするパッケージ。

ファイルを表示している状態でshift-Enterを押すと、エディタ内にショートカットが表示されます。
あとはジャンプしたい場所のショートカットを入力すればOKです。

jumpy

6. pigments

CSSなどで入力したカラーコードをそのカラーコードの色でハイライト表示するパッケージ。

入力したカラーコードがどのような色なのかをすぐ確認できるだけでなく、コード数の多いファイルから目的の色を目印に探し出せたりと地味に便利です。
インストールするだけで使用できます。

pigments

7. vim-mode-plus

AtomにVimの機能を導入するVimユーザーには必須のパッケージ。

Atom公式パッケージにvim-modeというほぼ同機能のプラグインがあるのですが、現時点でDeprecated、このvim-mode-plusを使ってねとアナウンスしてあります。
インストールするだけで大体のVimコマンドをそのまま使用することができます。もちろんAtomの設定を使って好みのキーマップを作成することも可能です。
ex-modeは別パッケージとして提供されているので、合わせてインストールしましょう。

vim-mode-plus
vim-mode-plus-ex-mode

8. zentabs

同時に開かれるタブの数を制限するためのパッケージ。

デフォルトで最大5タブまでの制限となっており、それ以上開いた場合は古いタブから閉じられていきます。
タブの最大数は設定で好みの数に変更することができるので、とりあえずインストールしてタブバーがパンパンになってしまった際のストレスを予め回避しておくことをおすすめします。

zentabs

おすすめテーマ

Atomのテーマは、UIテーマとSyntaxテーマに分かれています。同じタイプのもので統一したい場合は、UIテーマとSyntaxテーマ両方をインストールしてください。
※ どちらか一方しかないテーマもあります。

デフォルトのone-dark-uione-dark-syntaxでも十分良いと思いますが、その他おすすめなテーマを紹介します。

1. atom-material-ui

個人的に1番好きなUIテーマで同名のSyntaxテーマと共に愛用しています。
サンプル画像だと色が少々派手ですが、現在は落ち着いた色合いになっています。
背景色はSyntaxテーマの色と合わせられるので、どのSyntaxテーマとも相性がいいです。

2. atom-material-syntax

atom-material-uiのSyntax版です。
デフォルトのone-dark-syntaxよりも青みが増し、カラフルで明るい印象のテンションが上がるテーマです。
全体的に暗くなったatom-material-syntax-darkもあります。合わせてインストールして比べてみるといいかも。

atom-material-syntax
atom-material-syntax-dark

3. firewatch-syntax

Firewatchというゲームからインスパイアされ作られたSyntaxテーマだそうです。
全体的に目に優しい配色でとても見やすいため、落ち着いてコーディングしたい時におすすめですね。

firewatch-syntax

4. gruvbox-plus-syntax

さまざまなテキストエディタ等に移植されている人気テーマGruvbox。
設定でDarkテーマとLightテーマを切り替えることができます。土色っぽい配色が好みの方はこのテーマがおすすめです。

gruvbox-plus-syntax

さいごに

いかがだったでしょうか?
今回紹介した他にもたくさん便利なパッケージがあるので、自分に合うものがあるか是非探してみて下さい。

パッケージをGitHubで管理したい場合は GitHub製テキストエディタAtomの設定ファイルとパッケージをGitHubで管理する方法 をご覧ください。