React開発に最適なテキストエディタ「Atom」を入れてみた（使えるパッケージも公開）

React開発に最適！と言われている「Atom」をインストールしてみましたのでインストール手順や使える設定などをつらつらと。

Atomのインストール

以下のサイトよりダウンロードし、インストールしてください。

Atom

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

Atomは非常に拡張性の高いエディタです。デフォルトで使用するということはまずないでしょう。

ここでは拡張用パッケージのインストール方法について説明します。

Atomを起動し、メニュー [Atom] -> [Preferences]をクリックします。

[Install]を選択します。

インストールしたいパッケージ名を入力し、検索します。検索結果より、インストールするパッケージの[Install]ボタンをクリックし、インストールしてください。

インストールしたら使えたパッケージ達

これ入れたら良かったというパッケージ達を紹介します。

Japanese-menu: メニューバーとコンテキストメニュー、設定画面を日本語化します。
atom-beautify: ソースコードを整形してくれます。主要言語は大抵対応してくれています。
pigments: CSSで設定したカラーコードなど、色情報を視覚化してくれます。
color-picker: CSSのカラー設定の際にカラーピッカーを表示してくれます。
Emmet: Emmetが使えるようになります。
react: Reactサポート用パッケージです。
linter-eslint: ESLintサポート用パッケージです。
ライブでチェックしてくれます。
Minimap: スクロールバーの部分にファイルのミニマップを表示してくれます。Sublime Textでお馴染みですね。
minimap-autohide: ミニマップを自動で表示/非表示にしてくれます。
highlight-selected: 選択したテキストが同じファイル内にある場合、それらをハイライトしてくれます。
file-icons: ファイルアイコンを種類毎に表示してくれます。
tag: マークアップ時に/>と入れると前のタグの閉じタグを入れてくれます。
pretty-json: JSONデータを整形してくれます。

気になったパッケージはあったでしょうか？

使いそうなショートカット

新たなソフトを使用する時に困るのがショートカットです。キーバインド設定可能なのでいくらでもカスタマイズできますが、ここではデフォルトで使用しそうなものを紹介します。

    設定画面を開く：command + ,
タブを閉じる：command + W
スニペット表示：alt + shift + s
ツリーViewの表示・非表示：command + \
単語単位の移動（Back / Forward）：alt-B / alt-F
ファイル内の文字列検索・置換：command + F
プロジェクト内の文字列検索・置換：command + shift + F