VimでReactの開発を楽々


## 前提

* ES6で開発する。
* javascript補完にはternjsを使う。
* javascriptスタイルガイドはeslint（airbnb）を使う。

## JavaScriptのSyntax関連プラグイン

* pangloss/vim-javascript
* othree/yajs.vim
* othree/es.next.syntax.vim
* othree/javascript-libraries-syntax.vim
* othree/html5.vim
* maxmellon/vim-jsx-pretty
* ternjs/tern_for_vim

### vim-javascript

vimでのjavascriptの開発を行うとき定番みたいなプラグインだ。
syntaxについてはyajsを使っているがyajsはindentationを提供していない。
再度確認したが、vim-javascriptがないとindentationが効かなかった。

```vim
Plug 'pangloss/vim-javascript', { 'for': ['javascript', 'javascript.jsx'] }
```

* https://github.com/pangloss/vim-javascript

### yajs.vim、es.next.syntax.vim、javascript-libraries-syntax

vimでjavascriptのsyntax highlightingやindentationのために使っていたのは「vim-javascript」というものだった。
以前まではこれで十分だったが、reactなどには対応されていない部分があり、「__yajs.vim__」を入れた。

* https://github.com/othree/yajs.vim

syntax highlightingの比較画面をみればどっちがいいのかわかると思う。

* http://qiita.com/QuestionDriven/items/83cba09d0010e8e31315

ECMAScript（ES）で開発するので、同じ人が作った「__es.next.syntax.vim__」も入れる。

* https://github.com/othree/es.next.syntax.vim

「__javascript-libraries-syntax.vim__」を使えばjQueryやAngularJSなど他のライブラリにも綺麗に表示される。

* https://github.com/othree/javascript-libraries-syntax.vim

```vim
Plug 'othree/yajs.vim', { 'for': ['javascript', 'javascript.jsx'] }
Plug 'othree/es.next.syntax.vim', { 'for': ['javascript', 'javascript.jsx'] }
Plug 'othree/javascript-libraries-syntax.vim', { 'for': ['javascript', 'javascript.jsx'] }
```

javascript-libraries-syntaxは使いたいライブラリを指定する必要がある。
functionを作って.jsファイルを開くときに呼び出せばいい。

```vim
function! EnableJavascript()
  " Setup used libraries
  let g:used_javascript_libs = 'jquery,underscore,react,flux,jasmine,d3'
  let b:javascript_lib_use_jquery = 1
  let b:javascript_lib_use_underscore = 1
  let b:javascript_lib_use_react = 1
  let b:javascript_lib_use_flux = 1
  let b:javascript_lib_use_jasmine = 1
  let b:javascript_lib_use_d3 = 1
endfunction
autocmd MyVimrc FileType javascript,javascript.jsx call EnableJavascript()
```

これは僕の設定で、他のJavaScriptライブラリを有効にする必要がある方はreadmeを参考にしていただければと思う。
ちなみに、MyVimrcはautocmd!をやってくれるものだ。

```vim
augroup MyVimrc
  autocmd!
augroup END
```

### html5.vim

htmlのファイル内でcssのindentationが効かなかったので、othreeさんのhtml5.vimプラグインを入れた。（追記 2017.7.7）

```vim
Plug 'othree/html5.vim'
```

* https://github.com/othree/html5.vim

そして、すべて確認したことではないが、以下の機能を提供している。

* Support all new elements and attribute.
* Support SVG and MathML
* Support microdata.
* Support RDFa.
* Support WAI-ARIA.
* Support Electron webview.

### vim-jsx-pretty

jsxのSyntaxフラグインとして「mxw/vim-jsx」を使っていたが、
閉じる"｝"で警告の表示になっていて「__vim-jsx-pretty__」に変更した。

* https://github.com/MaxMEllon/vim-jsx-pretty

readmeにDemo画面が出ているので、どっちがいいのか確認してみよう。

```vim
Plug 'maxmellon/vim-jsx-pretty', { 'for': ['javascript', 'javascript.jsx'] }
```

### tern_for_vim

ternjsを使えばpowerfulなコード補完が可能だ。
いろんなEDITORに対応されていてvim pluginも提供している。
npmが設置されている必要がある。

```vim
Plug 'ternjs/tern_for_vim', { 'for': ['javascript', 'javascript.jsx'], 'do': 'npm install' }
```

ternjsの公式サイトのドキュメントよりatomのドキュメントがもっと参考になった。
次は、atomのドキュメントを参考にして作成した。

```sh
% vim ~/.tern-project
```

.tern-projectファイルを次のように作成する。

```javascript
{
  "ecmaVersion": 6,
  "libs": [
    "browser",
    "ecma5",
    "ecma6",
    "ecma7"
  ],
  "loadEagerly": [
    "node_modules/react-dom/**/*.js",
    "node_modules/react/**/*.js",
    "node_modules/whatwg-fetch/fetch.js",
    "src/**/*.js"
  ],
  "plugins": {
    "es_modules": {},
    "node": {},
    "doc_comment": {
      "fullDocs": true,
      "strong": true
    }
  }
}
```

| プロパティ  | 説明                                      |
| ---         | ---                                       |
| ecmaVersion | デフォルトで使うecmaを指定                |
| libs        | 入力補完に使うlibraryを指定               |
| loadEagerly | libs以外に入力補完に使えたいlibraryを指定 |
| dontLoad    | 入力補完に使えたくないlibraryを指定       |
| plugins     | サーバープラグインを指定                  |

__loadEagerly__
名前の通りeager loadなので、使う場合はそれなりにコストが高い。
node_modules以下を全部読み込むのはやめた方がいい。

__dontLoad__
確実に使えたくないものを指定するとき使う。

__plugins__
もっと多いが、詳細はternjsの公式マニュアルを参考していただければと思う。
ここでは設定ファイルに書かれているものだけ説明する。

| プラグイン  | 説明                                   |
| ---         | ---                                    |
| es_modules  | ES6のimportとexportに対応              |
| node        | nodeで使う変数やプラグインのloadに対応 |
| doc_comment | jsdocスタイルのコメントに対応          |

詳細が知りたい場合は下記のリンクを参考にしよう。

* http://ternjs.net/doc/manual.html
* https://atom.io/packages/atom-ternjs

## Airbnbのスタイルガイドの適用

```sh
% vim ~/.eslintrc
```

.eslintrcファイルを次のように作成する。

```javascript
{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "node": true
    },
    "settings": {
        "ecmascript": 6,
        "jsx": true
    },
    "plugins": [
        "react",
        "import"
    ],
    "rules": {
        "react/prefer-stateless-function": 0,
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"]  }],
    },
    "extends": "airbnb"
}
```

設定ファイルをみれば大体わかる。
詳細は次の記事を参考にしよう。

* [Airbnb JavaScript Style Guide](http://qiita.com/park-jh/items/488d43e2d0b87991207e#airbnb-javascript-style-guide)
* [ESLint、Airbnbのスタイルガイドをすべて守るのは難しいね。](http://qiita.com/park-jh/items/8e1770e8482b6c27187b)

## その他のVimプラグイン

* honza/vim-snippets
* Shougo/vimproc.vim
* Shougo/neoyank.vim
* Shougo/neosnippet
* Shougo/neosnippet-snippets
* Shougo/neocomplete
* ervandew/supertab
* scrooloose/syntastic

これはあくまで、スタイルガイドやコードの補完、スニペットに関するプラグインだけだ。
Vimを使っている開発者であればこのくらいは使いこなした方がいいと思う。
このほかにも開発に役立つプラグインは盛りだくさんあるが、次の機会にね。