JSX は JavaScript のコード中に XML を記述するのでシンタックスハイライトがうまく当たりません。vim-jsx を使うことで JSX 部分にうまくシンタックスハイライトが当たり捗ります。
インストール
Vundle を使っている場合以下のように設定してインストールします。vim-javascript に依存しているので合わせてインストールします。
.vimrc
Bundle "pangloss/vim-javascript"
Bundle "mxw/vim-jsx"
有効にならないときは、vim-javascript が正しくインストールされているか確認してください。vim-javascript 以外の JavaScript シンタックスファイルと相性が悪いようなので注意してください。
設定
デフォルトでは .jsx
拡張子の場合のみシンタックスハイライトが設定されるようになっています。.react.js
などで設定したい場合は、以下のように設定します。
.vimrc
" js 拡張子でも有効にするletg:jsx_ext_required =0" @jsx React.DOM プラグマがある場合のみ有効にするletg:jsx_pragma_required =1