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までご連絡いただければ幸いです。