SublimeText3をReact用のテキストエディタにカスタマイズする方法

Reactを書くならテキストエディタはSublimeText3がおすすめ!

今回は人気のテキストエディタ、SublimeText3の設定方法をご紹介します。

最近、Reactを書いているのですが、まだJSXなどReact特有の書式に対応していないエディタが多い中、SublimeText3のプラグインはReactに対応させるものが色々とあるため、探して設定してみました。

基本としてPackageControlのインストールから

メニューバーから「View > Show Console」を選択し、表示されたコンソールの下側の入力欄にPackage ControlのINSTALLATION内、SUBLIME TEXT3のタブの中に書かれているソースコードをコピー&ペーストします。

やはり基本として日本語化

メニューバーから「Tools > Command Palette」を選択し、入力欄は何も書き換えずに下の一覧から「Package Control: Install Package」を選択します。

パッケージインストール用のモーダルウィンドウが現れるので、入力フォームに「Japanize」と入力し、下に表示された候補から「Japanize」を選択します。

インストールしただけでは日本語化されないので、次の手順に沿って日本語化を完了させます。

Windows7の日本語化手順

基本的には「Japanize」インストール後に表示される「changelog.txt」の通りに進めていけば問題ないのですが、少しわかりにくい部分を補足します。

2. コピーしたファイルをオリジナルのファイル(.jpが付かないファイル)と置き換えます。

という部分なのですが、これはつまり「Default」のフォルダーに移動したあと、拡張子の「.jp」を削除するという意味です。

拡張子が表示されていない場合には、Microsoft atLifeのファイルの拡張子を表示するを参考に表示してください。

MacOSXの日本語化手順

Finderで「/Users/ユーザー名/Library/Application Support/Sublime Text 3/Packages/」まで移動します。

ここに「Default」というディレクトリを作成し、あとはWindows7のほうと同様に「changelog.txt」の内容通りに進めてください。

2. コピーしたファイルをオリジナルのファイル(.jpが付かないファイル)と置き換えます。

という部分で、Windows7同様に「Default」ディレクトリ内にコピー&ペーストしたファイルのファイル名から拡張子の「.jp」を削除してください。

日本語入力も最適化しておこう

MacOSXでは必要ないのですが、Windows7で標準では日本語入力の際、上部にバーが出てEnterを押してエディタ内に反映されます。

これは使いにくいので、日本語入力を最適化しましょう。

もういちどメニューバーから「Tools > Command Palette」を選択し、「Package Control: Install Package」を選択します。

インストール用のモーダルウィンドウが表示されたら、「IMESupport」を検索してインストールします。

React用のスニペット集をインストール

「Package Control: Install Package」で「ReactJS」を検索してインストールします。

これを入れておくと、JavaScirptの編集中に、たとえば「rcc」と入力してTabキーを押すと、次のようにReactのコンポーネントのスケルトンが展開されます。

var React = require('react');

var  = React.createClass({
  render: function() {
    return (<div />);
  }
});

module.exports = ;  

「var」と「module.exports =」の後にカーソルがフォーカスされているので、そのままコンポーネントの名前を入力できます。

Reactのコンポーネントを作る際には、ほぼ毎回この書式を入力することになるので、Emmetのようにスニペットから展開されるのは大変便利です。

他にも、componentDidMountやthis.refs、this.stateなど、JSXで頻繁に使用する記述をスニペットから展開できます。

sublime-reactのGitHubページ内の「Documentation of available snippets (JSX):」の部分に掲載されていますので、普段よく使うものだけでも覚えておくと快適にJSXをコーディングできます。

React用のシンタックスハイライトをインストール

「Package Control: Install Package」で「Babel」を検索してインストールします。

シンタックスハイライト、シンタックスカラーリング、コードカラーリングなどと呼ばれるもので、JSXに対応しています。

インストールしたあと、「表示 > シンタックス > Babel > JavaScript(Babel)」を選ぶことで表示中のソースコードを見やすく彩色してくれます。(SublimeText3の画面右下の部分からでも選択可)

また、「JavaScript(Babel)」を設定していれば、Emmetのように「div.hoge」から「Ctrl+e」で次のように展開できます。

<div className="hoge"></div>

展開する際、「ctrl+e」ではなく「tab」で展開するようにキーバインドを変更したいのですが、どなたか設定方法をご存知ないでしょうか。
Twitterで@wildwest_kazyaまでご連絡いただければ幸いです。