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

2015年 07月 30日

はてなブックマークはてブ
Google+1Google+
PocketPocket
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までご連絡いただければ幸いです。

    この記事をシェアする

    はてなブックマークはてブ
    Google+1Google+
    PocketPocket

    この記事へのコメント

    このサイトをシェア

    このサイトをシェアするボタンです。

    各記事ごとのシェアは各記事のタイトルの下のボタンから。

    SNSのアカウントのページへのリンクは画面最下部のフッター内にあります。