SublimeTextのEmmetでJSXファイルをTab補完できるようにする

最近になってReact.jsに手をつけはじめた。

Reactといえば、独特の記法であるJSXが初学者にとって第一のハードルとなるのだが、普段使っているエディタ「Sublime Text」ではEmmetプラグインのTab補完がJSXに対して適用されない。

調べてみると設定ファイルを少し編集するだけで、JSXにも対応することができたので、その設定方法をまとめておく。

Emmetの「Key Bindings – User」を編集

設定ファイルは、Preferencesから以下のとおり辿っていく。

そして設定ファイル内（角括弧の中）に下記のコードを追記する。

[
    {
        "keys": ["tab"],
        "command": "expand_abbreviation_by_tab",
        "context": [
            {
                "operand": "source.js.jsx",
                "operator": "equal",
                "match_all": true,
                "key": "selector"
            }
        ]
    }
]

これで設定完了。

JSXファイルを開いて、Emmet記法でコードを書いてみよう。

// Emmet記法
h1.App-title

// 「Tab」キーを押すと以下のように変換される
<h1 className="App-title"></h1>

SublimeTextでもJSXをEmmetで効率よく書けるようになった。