SublimeTextからAtomに乗り換えたのでまとめ

Pocket

sublimeTextからAtomに乗り換えたのでまとめ

SublimeTextはコーダーの中でも使用してい割合が最も高く、非常にクオリティの高いテキストエディターです。カラースキームの変更やパッケージのインストールで様々な機能を追加できてものすごく便利なんですが、たった1つだけ難点が...

それは「お金払ってね!」のポップアップが10分に1回くらい出てくること。まぁ払えないほど高価ではないので払ってしまえばいいんですが、払ったら負けかな、ということで払ってませんでした!

一方最近Ver1.0が公開され、より一層完成度が高まっているAtomの方には「お金払ってね!」ポップアップがありません!それだけでなく、テーマやパッケージがかなり充実していて今までSumblimeTextに慣れている人でも十分乗り換え可能なレベルになってます。

ということでここではSublimeTextからAtomに乗り換える人のための環境設定やショートカットの確認を行っていきたいと思います。

SublimeTextからAtomにスムーズに乗り換える方法

Atomのインストール方法

まずはAtomをインストールしましょう。とくに特殊なことはしなくてもよく、通常のアプリと同様の方法でインストール完了できます。
Atomのインストール方法

Atomのパッケージの使い方

パッケージはSublimeTextにもありましたが、スニペットやカラーピッカーなど様々な便利機能を追加できるシステム。Atomではセッティング画面から簡単に検索でき、パッケージをインストールした後にオンオフすることもできます。

新しくパッケージをインストールするには、メニューのAtom->preferences、もしくはショートカットのcmd + ,でセッティング画面を開きます。そのあと、installをクリックしてインストール画面を開き、検索フォームでパッケージを検索すればOK。欲しいパッケージが見つかったらinstallボタンを押すだけでインストール完了です。

フォームの右にはパッケージとテーマを入れ替えるボタンがあるので、テーマを検索したいときはテーマボタンを押してから検索します。
Atomのパッケージをインストールする方法

Atomのテーマ

Atomではテーマもかなり充実しています。テーマはパッケージとして提供されているので、インストール方法もパッケージと同じ。インストールしたテーマをクリックすると、テーマに関する詳細情報を見ることができます。
Atomのテーマの使い方

Atomでスニペットを登録する方法

Atomのパッケージを使えばある程度のスニペットをカバーできますが、自分でカスタマイズすることもできます。方法は簡単、Atom -> Open Your Snippets をクリックしてスニペット登録画面を開いて登録します。
Atomでスニペットを登録する方法

スニペットはこの画面で登録していくことになります。サンプルにも記述されていますが、以下のようなフォーマットで登録できます。それぞれの意味は、言語、スニペット名(説明)、ショートコード(トリガー)、展開されるコードとなっています。

'.source.js':
  'console.log':
    'prefix': 'log'
    'body': 'console.log(${1:"crash"});$2'

言語の設定は、packagesページで言語を検索し、詳細ページのscopeをチェックすればOK。
Atomでスニペットのソースを探す方法

body部分には$マークを使うことで、tabを押したときのストッパーを設置できます。また、{1:"crash"}のように記述することで、テキストを選択状態にできるため、より素早くコードの編集が可能に。

展開されるコードが複数行になる場合は、"""を使って以下のようにすればOK。

'.source.js':
  'if, else if, else':
    'prefix': 'ieie'
    'body': """
      if (${1:true}) {
        $2
      } else if (${3:false}) {
        $4
      } else {
        $5
      }
    """

Atomのおすすめパッケージ

Atomにはデフォルトで70以上のパッケージがインストールされていますが、さらに追加していくことで自分の環境に合ったエディターにカスタマイズすることができます。と言っても大量にあるパッケージの中から探すのは結構大変。なのでここではとくに人気のおすすめできるパッケージを紹介します。

人気のパッケージ
atom-beautify
ダーティーなコードを綺麗に整列してくれるパッケージ。普段コードを書いてると一貫性がなくなってきたりしますが、これなら人に見せても感動されるコードを納品できます!やりかたはページ内でctrl+alt+bを押すか、右クリックからBeauty editor Contentを選ぶだけ。

emmet
HTMLやCSSを短縮コードで記述でき、コーディング作業を効率化できる便利な機能。Emmetの使い方はこちら

color-picker
カラーの設定に便利なカラーピッカー機能が使えるようになります。
atomのcolor-picker

file-icons
ツリービューで表示されるファイルを言語ごとに分かりやすいアイコンで表示してくれます。
atomのfile-icons

minimap
SublimeTextにもあるMinimapを追加してくれます。長いソースコードを編集するときに便利。
atomのminimap

その他のパッケージはこちら

人気のテーマ
monokai
monokai
seti-syntax
seti
unity-ui
unity-ui

その他のテーマはこちら

Atomのショートカットチートシート

Atomで使える基本的なショートカットをまとめたチートシートが以下のページで公開されています。基本的な操作はSublimeTextとほぼ同じなのでスムーズな移行ができそうです。
チートシート – Atom Editor Keyboard Shortcut Cheat Sheet

最後に

今回SublimeTextからAtomに乗り換えてみましたが、なんと言っても超軽量で、パッケージなども充実しており非常に使いやすいというイメージです。僕のようなWeb系フロントエンドに限定されないような様々な機能を追加できるので、Webデザイナーの方にもプログラマーの方にもおすすめできるエディターになっていると思います。

使い方もSublimeに近いところが多いのですぐに移行することができました。あと、最初にも言いましたがポップアップがでないのも地味にポイント高いところ(;´Д`)

エディター選びに迷ってる方、何か新しいエディターないかな〜と探している方にはとくにおすすめです!