ES2015の構文チェックと言えば ESLint ですね。
ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から
自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要があります。
ただ、さすがに一から自分でルールを構築するのは面倒なので、通常は Shareable Configs と呼ばれる機能を使い、他の人が大体いい感じにセットアップしたものを共有することができます。
eslint-config-airbnb もこの Shareable Configs の1つで、React に関する lint も含まれているのでとりあえずはここから始めるのが良さそうです。
インストールと設定
（package.json は作成済みとします）
eslint-config-airbnb の README の通りに、必要なパッケージをインストールします。
$ npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint
インストール後、設定ファイル .eslintrc に extends: airbnb を追加します。
{ "extends": "airbnb" }
ESLint の実行
package.json に以下のように記述し、npm scripts として実行できるようにします。
（以下は、ソースコードが src ディレクトリにある場合）
{ "scripts": { "lint": "eslint src/**/*.js" }, ... }
ESLint を実行します。
$ npm run lint
> react-es6-tutorial@1.0.0 lint /Users/yamazaki/workspace/react/react-es6-tutorial
> eslint src/**/*.js
/Users/yamazaki/workspace/react/react-es6-tutorial/src/app.js
5:7 error 'data' is defined but never used no-unused-vars
6:3 error A space is required after '{' object-curly-spacing
...
構文チェックに引っかかった箇所がずらーっと表示されます。
eslint-config-airbnb のカスタマイズ
デフォルトの設定を遵守してもいいですが、自分好みにカスタマイズしたいルールもあると思います。
たとえば、eslint-config-airbnb そのままでは comma-dangle というルールが有効になっているようです。
これは、オブジェクトリテラルの最後の要素にも , がついてないと警告するものです。
var foo = { bar: "baz", qux: "quux", // ここにも , が必要 };
このルールを無効にしてみます。
ルールのカスタマイズは .eslintrc に rules という項目を記述することで実現できます。
{ "extends": "airbnb", "rules": { "comma-dangle": 0 } }
rules にはルール ID（一覧は ここ）と 0 ~ 2 までの値のペアを列挙します。
0 ~ 2 までの値はそれぞれ以下の意味を持ちます。
0または"off": 無効1または"warn": 警告2または"error": エラー
（Configuring Rules の項を参照）
警告とエラーの違いはよくわかってませんが。。。
おまけ：エディタから ESLint を実行する
npm scripts から実行すると src ディレクトリ内のファイルすべてがチェック対象になってしまい、警告が多いと結果を確認するのが大変です。
かといって、対象ファイルを指定するために毎回 package.json を修正するのも面倒です。
というわけで、エディタと ESLint を連携し、編集中のファイルに ESLint を実行できるようにしておきます。
順番は前後しますが、これについては Vim の設定方法を記事に書きました。
また、記事の最後に Atom の設定で参考になりそうな記事も載せています。
さらにおまけ：ESLint の parser オプションについて
たまに、.eslintrc の parser に babel-eslint を指定しているのを見かけます。
{ "parser": "babel-eslint", "extends": "airbnb", "rules": { ... } }
指定するべきなのかな、と思ったのですが、README の冒頭に
Note: You don't need to use babel-eslint if you are only using ES6/ES2015. ESLint actually supports ES6/ES7, JSX, and object rest/spread by default now.
と書かれているので、とりあえず ES2015 で React 書いてる分には必要なさそうという結論になりました。
リファレンス
eslint-config-airbnb 以外の Shareable Configs も紹介されてます。
また、eslint-config-airbnb は比較的厳しめと聞いてますが、コメント欄読むとそれでも十分でない項目もあるみたいです。
