React向けにLinterを設定する
JavaScriptを書き、Reactに触れるにあたって、エディタをどうしようかと一回りしました。元々Javaな人なんでEclipseなどの統合開発環境でがっちりサポートされてきた身としてはテキストエディタだけでっていうのは不安です。不安なんで一年前には速攻でJetBrainsのWebStorm 7を買いましたね。改めて調べるとJetBrainsにおけるメジャーバージョンというのは相当軽い意味のようで、バージョン11が出ようかというところでした。 一方で、先月MDLを書いてた時には横にいた新井さんから教わったAdobe Bracketsを試してました。Bracketsは無料なので気楽ですし、HTML＆CSS書くのにはいいですねー。ボタンポチッと押すだけでエディタと連携したデバッグ用Chromeブラウザを立ち上げるのが便利。コードをちょっと書き換えるだけでビュー更新が即時されるのが素敵。ただ、Reactはどうかというと以下の問題が生じます。JavaScriptも書きやすいとは言えないかな。
- JSLintが見当違いの文法ワーニングを大量に吐く
- JSXがちゃんとハイライトされない
WebStorm11を試す前に、まずは苦労してみようかとBracketsで環境試し作りしてみました。調査の結果JSLintの問題は、後継のESLintに差し替えるとオッケーです。ESLintはすでにOSSでReact対応が提供されてます。その手順は。。。いろいろ読んでやっとできたよ。。。以下は本日の正解。足が速いので時間がちょっと経つだけで正解じゃなくなりそう。
前提
Node.jsがインストールされていて、npmが使えること。BrewだMacPortだといろいろ方法はありますが、まあ細かなバージョンが云々というような高尚なレベルじゃないので、潔く手を抜いて本家からMacのインストーラ付きバイナリパッケージ落としてくればいい。さらにはgitも必要です。
ESLint を設定してReact文法をLintingする
eslintをインストール
Lintingのエンジンです。これが無いと始まらない。Globalにインストールしておいたほうがどっからでも叩けて潰しが効きそうです。
sudo npm install -g eslint
eslint-plugin-reactをインストール
これはESLintのReact文法のプラグインとしてお目当てのもの。
sudo npm install -g eslint-plugin-react
~/.eslintrcを編集する
細々と状況毎に設定を切り替えるということを求めないならば、RCファイルを一つ作れば動きます。切り替えを求める場合はフォルダ切ってJSONファイルを切り替え環境毎に作ることになるという。下記envではECMAScript6を無効にしています。ES6は早いかなー、でもReactの場合はES6で書いてもプリプロセスとしてコンパイラかけとけばいいですから意外に早すぎることもないかな？
{ "env": { "node": true, "es6": false }, "ecmaFeatures": { "jsx": true }, "plugins": [ "react" ], "rules": { "react/display-name": 0, "react/forbid-prop-types": 1, "react/jsx-boolean-value": 1, "react/jsx-closing-bracket-location": 1, "react/jsx-curly-spacing": 1, "react/jsx-indent-props": 1, "react/jsx-max-props-per-line": 0, "react/jsx-no-duplicate-props": 1, "react/jsx-no-literals": 0, "react/jsx-no-undef": 1, "react/jsx-quotes": 1, "react/jsx-sort-prop-types": 0, "react/jsx-sort-props": 0, "react/jsx-uses-react": 1, "react/jsx-uses-vars": 1, "react/no-danger": 1, "react/no-did-mount-set-state": 1, "react/no-did-update-set-state": 1, "react/no-direct-mutation-state": 1, "react/no-multi-comp": 1, "react/no-set-state": 0, "react/no-unknown-property": 1, "react/prefer-es6-class": 0, "react/prop-types": 1, "react/react-in-jsx-scope": 0, "react/require-extension": 1, "react/self-closing-comp": 1, "react/sort-comp": 0, "react/wrap-multilines": 1 } }
たくさんある「react/...」はLintingの挙動を決める設定で、値0が無視/値1が警告/値2がエラー。ちょこちょこその後の動作を見て書き換えていけばいいでしょう。全部1にするとうざいぐらいに警告が出ますが、JSLintの時と違ってその警告が見当違いということはありません。まさにこのRCファイルにそう設定しているからこそ出る警告となってます。
BracketsでESLintを動かす
brackets-npm-registryをインストール
Bracketsにプラグインをインストールする前段階として、標準のものとは違うパッケージ管理ツールを入れます。
sudo npm install -g gulp-cli cd ~/Library/Application\ Support/Brackets/extensions/user/ git clone https://github.com/zaggino/brackets-npm-registry.git brackets-npm-registry cd brackets-npm-registry npm install
brackets-eslintをインストール
これはUIからインストールする。クリック一発。インストールが終わるとリフレッシュが走って後、めでたくEsLintでLintingされるようになります。
JSlintの無効化
最後の仕上げとして、brackets.jsonの編集をします。このファイルはBracketsの環境設定メニューで開かれるJSONファイルです。明示的にESLintを登録して、「linting.usePreferredOnly」は登録してるものだけを有効にするという設定。JSLintが暗黙に登録されているのでその抑制のために必要とのこと。
{ 省略... "language": { "javascript": { "linting.prefer": [ "ESLint" ], "linting.usePreferredOnly": true } } }
ハイライトはダメ
ところで、BracketsのJSXハイライトはバグってます。春先から課題スレッド上がってるけど解決してない。
Sublime Text 3へ設定してみる
普段のテキスト書きではSublime Text 2を愛用していました。Sublimeもコードを書くテキストエディタとしてプラグイン盛り盛りでパワーアップできます。ただしESLintを盛るには永遠のベータ版であるSublime Text 3にする必要がありました。
Sublime Text 3をインストール
SublimeLinterをインストール
ST3のCommand + Shift + pのメニューで、"install"と入力するとPackage Control: Install Packageが選べる。クリック。"Linter"で探すとSublimeLinterが出てくる。選んでクリックするとインストール
SublimeLinter-eslintをインストール
上記と同様にして、Package Control: Install PackageからSublimeLinter-eslintを選ぶ。クリックするとインストール。
なんということでしょう！Sublime Text 3はJSXもちゃんとハイライティングします。Lintingも動き、軽い使い方ならこれがファイナルアンサーで良さそう。
しかーし。WebStorm 11を試してからの結論としよう。
