はじめに
Reactに入門して約1ヶ月が経ちました。
こちらの記事でも書きましたが、JSXを使うとHTMLと似たように書けるためとても書きやすいです。
しかし、HTMLではtabを使うと補完機能が使えるのに対し、JSXではその補完機能が使えません。
なので今回は、apmを使ってJSXでも補完機能を使えるようにしました。
テキストエディタはAtomです。
1. apm install emment
$ apm install emmet
apmとを使って、emmetというパッケージをインストールします。
apmとは
apmとはAtomのパッケージマネージャーです。
2. keymap.csonを書き換える
Atomに戻ってAtom => keymapからkeymap.csonファイルを開いて、以下のコードをペースとします。
拡張子が.jsxのファイルの場合
keymap.cson
'atom-text-editor[data-grammar="source js jsx"]':
'tab': 'emmet:expand-abbreviation-with-tab'
拡張子が.jsのファイルの場合
keymap.cson
'atom-text-editor[data-grammar="source js"]':
'tab': 'emmet:expand-abbreviation-with-tab'
これで、Atomをリロード(comand + option + control + L)すると
JSXでも、HTMLのようなタグ補完ができるようになります。