ESLintの設定事始め - Umi Uyuraのブログ

先日、とりあえずEmacsでESLintを使う環境を作ってみましたが。

umi-uyura.hatenablog.com

チェック内容を設定しておかないと意味がないので、基本的なものだけでも設定しておこうと思い、調べてみました。

設定ファイル雛形の生成

そもそも、これまでESLintの導入まで至らなかったのは、設定項目が多すぎて、使うまで時間がかかりそうという印象があったからでした。

ところが、どうやら.eslintrcの雛形を生成してくれる機能がESLintにはあるもよう。

eslint --init を実行すると、ウィザード形式で.eslintrcを生成できます。

$ eslint --init
? What style of indentation do you use? Spaces              # インデントのスタイルはスペース
? What quotes do you use for strings? Single                # 文字列の引用符はシングルクォーテーション
? What line endings do you use? Unix                        # 改行コードはUnixタイプ
? Do you require semicolons? Yes                            # セミコロンは使う派
? Are you using ECMAScript 6 features? Yes                  # ES6の機能は使っていきたい
? Where will your code run? Node, Browser                   # Nodeもしくはブラウザで動かす
? Do you use JSX? Yes                                       # JSXも使う
? Do you use React Yes                                      # Reactも使う
? What format do you want your config file to be in? JSON   # 設定ファイルはJSON形式
Successfully created .eslintrc file in /Users/username

上記のように答えていくと、できあがったのは、こんな感じ。

.eslintrc

{
  "rules": {
    "indent": [
      2,
      4
    ],
    "quotes": [
      2,
      "single"
    ],
    "linebreak-style": [
      2,
      "unix"
    ],
    "semi": [
      2,
      "always"
    ]
  },
  "env": {
    "es6": true,
    "node": true,
    "browser": true
  },
  "extends": "eslint:recommended",
  "ecmaFeatures": {
    "jsx": true,
    "experimentalObjectRestSpread": true
  },
  "plugins": [
    "react"
  ]
}

前回設定しておいた env の "es6": true や、 ecmaFeatures の "jsx": true も含まれているので、これをベースに育てていくことにしました。

推奨ルール (eslint:recommended)

生成された.eslintrcに、 "extends": "eslint:recommended" という設定がありますが、これは List of available rules に掲載されているルールのうち、 (recommended) と付いている推奨ルールが有効になる設定。

ESLintは初期状態だと何もチェックしないようなので、ひとまずこれを設定しておけば、最低限のルールはチェックできるようです。

日本語で解説してくださった方がいるので、こちらを参照しつつ、必要に応じてチェックレベルを変更しようと思います。

eslint-recommended.md

設定ツール (.eslintrc editor)

タイミングよく、.eslintrcを簡単に生成するツールを作ってくれた方もいらっしゃいました。

既存ファイルのインポートもできますが、未対応の項目があると、編集時に消えてしまうようです。（上記の experimentalObjectRestSpread など）

最初からこのツールを使って作る場合は良いですが、既存の設定をベースにする場合は、このツール上でRulesなどを設定したものを自分の.eslintrcに反映する、というのが当面は良いかもしれません。

React用プラグイン (eslint-plugin-react)

生成した.eslintrcの中で、 plugins にある react を使うには、eslint-plugin-reactをインストールする必要があるようなので、これは入れておきます。

$ npm install -g eslint-plugin-react

合わせて、とりあえず一通りのルールを有効にするために、GitHubのREADMEに掲載されていた設定を.eslintrcに追加。

{
  "rules": {
    "react/display-name": 1,
    "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": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 1,
    "react/jsx-no-undef": 1,
    "react/jsx-quotes": 1,
    "react/jsx-sort-prop-types": 1,
    "react/jsx-sort-props": 1,
    "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": 1,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  }
}

Reactも勉強中なので、自分の使い方に合わせて設定を調整していこうと思います。