SublimeTextはコーダーの中でも使用してい割合が最も高く、非常にクオリティの高いテキストエディターです。カラースキームの変更やパッケージのインストールで様々な機能を追加できてものすごく便利なんですが、たった1つだけ難点が...
それは「お金払ってね!」のポップアップが10分に1回くらい出てくること。まぁ払えないほど高価ではないので払ってしまえばいいんですが、払ったら負けかな、ということで払ってませんでした!
一方最近Ver1.0が公開され、より一層完成度が高まっているAtomの方には「お金払ってね!」ポップアップがありません!それだけでなく、テーマやパッケージがかなり充実していて今までSumblimeTextに慣れている人でも十分乗り換え可能なレベルになってます。
ということでここではSublimeTextからAtomに乗り換える人のための環境設定やショートカットの確認を行っていきたいと思います。
SublimeTextからAtomにスムーズに乗り換える方法
Atomのインストール方法
まずはAtomをインストールしましょう。とくに特殊なことはしなくてもよく、通常のアプリと同様の方法でインストール完了できます。
Atomのパッケージの使い方
パッケージはSublimeTextにもありましたが、スニペットやカラーピッカーなど様々な便利機能を追加できるシステム。Atomではセッティング画面から簡単に検索でき、パッケージをインストールした後にオンオフすることもできます。
新しくパッケージをインストールするには、メニューのAtom->preferences、もしくはショートカットのcmd + ,
でセッティング画面を開きます。そのあと、installをクリックしてインストール画面を開き、検索フォームでパッケージを検索すればOK。欲しいパッケージが見つかったらinstallボタンを押すだけでインストール完了です。
フォームの右にはパッケージとテーマを入れ替えるボタンがあるので、テーマを検索したいときはテーマボタンを押してから検索します。
Atomのテーマ
Atomではテーマもかなり充実しています。テーマはパッケージとして提供されているので、インストール方法もパッケージと同じ。インストールしたテーマをクリックすると、テーマに関する詳細情報を見ることができます。
Atomでスニペットを登録する方法
Atomのパッケージを使えばある程度のスニペットをカバーできますが、自分でカスタマイズすることもできます。方法は簡単、Atom -> Open Your Snippets をクリックしてスニペット登録画面を開いて登録します。
スニペットはこの画面で登録していくことになります。サンプルにも記述されていますが、以下のようなフォーマットで登録できます。それぞれの意味は、言語、スニペット名(説明)、ショートコード(トリガー)、展開されるコードとなっています。
'.source.js':
'console.log':
'prefix': 'log'
'body': 'console.log(${1:"crash"});$2'
言語の設定は、packagesページで言語を検索し、詳細ページのscope
をチェックすればOK。
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
カラーの設定に便利なカラーピッカー機能が使えるようになります。
file-icons
ツリービューで表示されるファイルを言語ごとに分かりやすいアイコンで表示してくれます。
minimap
SublimeTextにもあるMinimapを追加してくれます。長いソースコードを編集するときに便利。
その他のパッケージはこちら。
人気のテーマ
monokai
seti-syntax
unity-ui
その他のテーマはこちら。
Atomのショートカットチートシート
Atomで使える基本的なショートカットをまとめたチートシートが以下のページで公開されています。基本的な操作はSublimeTextとほぼ同じなのでスムーズな移行ができそうです。
チートシート – Atom Editor Keyboard Shortcut Cheat Sheet
最後に
今回SublimeTextからAtomに乗り換えてみましたが、なんと言っても超軽量で、パッケージなども充実しており非常に使いやすいというイメージです。僕のようなWeb系フロントエンドに限定されないような様々な機能を追加できるので、Webデザイナーの方にもプログラマーの方にもおすすめできるエディターになっていると思います。
使い方もSublimeに近いところが多いのですぐに移行することができました。あと、最初にも言いましたがポップアップがでないのも地味にポイント高いところ(;´Д`)
エディター選びに迷ってる方、何か新しいエディターないかな〜と探している方にはとくにおすすめです!