最近になって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で効率よく書けるようになった。