読者です 読者をやめる 読者になる 読者になる

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をインストール

www.npmjs.com

Lintingのエンジンです。これが無いと始まらない。Globalにインストールしておいたほうがどっからでも叩けて潰しが効きそうです。

sudo npm install -g eslint

eslint-plugin-reactをインストール

www.npmjs.com

これは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をインストール

github.com

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をインストール

github.com

これはUIからインストールする。クリック一発。インストールが終わるとリフレッシュが走って後、めでたくEsLintでLintingされるようになります。

JSlintの無効化

最後の仕上げとして、brackets.jsonの編集をします。このファイルはBracketsの環境設定メニューで開かれるJSONファイルです。明示的にESLintを登録して、「linting.usePreferredOnly」は登録してるものだけを有効にするという設定。JSLintが暗黙に登録されているのでその抑制のために必要とのこと。

{
省略...
    "language": {
        "javascript": {
            "linting.prefer": [
                "ESLint"
            ],
            "linting.usePreferredOnly": true
        }
    }
}

ハイライトはダメ

ところで、BracketsのJSXハイライトはバグってます。春先から課題スレッド上がってるけど解決してない。

github.com

Sublime Text 3へ設定してみる

普段のテキスト書きではSublime Text 2を愛用していました。Sublimeもコードを書くテキストエディタとしてプラグイン盛り盛りでパワーアップできます。ただしESLintを盛るには永遠のベータ版であるSublime Text 3にする必要がありました。

Sublime Text 3をインストール

Sublime Text - Download

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を試してからの結論としよう。