Vimでreactのjsフォーマッティング

vimでjsフォーマッティングはvim-jsbeautifyを使っているのですが、reactを使い始めてからまともに使えなくなってしまって、放置していましたが、久しぶりに見たらなんとなく対応できてました。

ポイントとしてはver1.0から対応した.editorconfigを書くこと。
以下のように書いて.vim/.editorconfigにおいてます。

[**.js]
e4x = true
indent_style = space
indent_size = 2

[**.jsx]
e4x = true
indent_style = space
indent_size = 2

別の選択肢 esformatter + esformatter-jsx

jsbeautifyでもいいのですが、esformatter-jsxならjsxをもっと綺麗に整形してくれるようです。

インストール

別途esformatter達を入れます。

npm install -g esformatter esformatter-jsx

余談ですが、vim-jsbeautifyの場合はvimプラグインリポジトリからjs-beautifyをsubmodule参照してるんですね。

vim側はvim-esformatterをインストールします。
NeoBundleなりで入れてください。

キーバインド参考

nnoremap <silent> <leader>es :Esformatter<CR>
vnoremap <silent> <leader>es :EsformatterVisual<CR>

例えば以下のようなjsxが、

render() {
  return (
    <div>{this.props.text}</div>
  );
}

このようにフォーマットされます。great!!

render() {
  return (
    <div>
      {this.props.text}
    </div>
    );
}