babel な ESLint の設定をがんばった

Lint の設定

やんなくちゃなー、と思っていたので Lint Like It’s 2015 — Medium を眺めながら、ahomu/es6-Kameita の JavaScript Linter を ESLint に乗り換えました。

Lint の設定つくるのがダルイ問題

本当にだるい。この投稿を書いている時点では .eslintrc を以下のようにしました。

スペースの入れ方については、強い意志をもって堅めの設定になっているはず。 max-params はちょい甘めです。consistent-this を全力で否定しているので、流用したい方は気をつけた方がよろしいかと。

{
  "parser": "babel-eslint",

  "env": {
    "browser": true,
    "node": true
  },

  "rules": {
    "strict": 2,

    "default-case": 2,
    "no-self-compare": 2,
    "no-else-return": 2,
    "no-throw-literal": 2,
    "no-void": 2,

    "max-params": [1, 5],
    "max-depth": [1, 3],
    "max-len": [1, 100, 2],
    "indent": [1, 2],

    "comma-style": [2, "last"],
    "brace-style": [2, "1tbs", { "allowSingleLine": false }],
    "consistent-this": [2, "DO NOT USE"],

    "space-in-brackets": [2, "never"],
    "space-before-function-parentheses": [2, "never"],
    "space-before-blocks": [2, "always"],
    "space-after-keywords": [2, "always"],

    "no-var": 2,
    "no-new-require": 2,
    "no-lonely-if": 2,
    "no-nested-ternary": 2,
    "no-multiple-empty-lines": [2, {
      "max": 1
    }],
    "no-unused-expressions": 0,
    "no-use-before-define": 0,
    "quotes": [2, "single"],
    "no-multi-spaces": [2, {
      "exceptions": {
        "Property": true,
        "ImportDeclaration": true,
        "VariableDeclarator": true,
        "AssignmentExpression": true
      }
    }],
    "key-spacing": [2, {
      "align": "colon",
      "beforeColon": true,
      "afterColon": true
    }]
  }
}

gulp-eslint も使う

最近広まりつつある npm run 戦法でもいいんですが、gulp の watch & build アレコレと連動させたいので eslint も素直に gulp プラグイン越しに叩きます。

adametry/gulp-eslint を使用しました。

gulp.task('lint', function() {
  var eslint   = require('gulp-eslint');

  return gulp.src(GLOB_SRC_FILES)
    .pipe(eslint({useEslintrc: true}))
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});

ES6 問題

babel とかで ES6 をゴリゴリ使っていると、ESLint 標準のパーサーではサポートしきれないっぽいので、パーサー（ESLint が評価する対象になる AST の生成器）を差し替える必要があります。

babel-eslint で対応

幸いにも babel が babel-eslint というプラグインを提供しているので利用します。ふつうに npm i -D babel-eslint して、前述の例のように parser フィールドに 'babel-eslint' を指定すればOKです。

NOTE: Please note that this is experimental and may have numerous bugs. It is however successfuly linting the babel core. babel/babel-eslint

README に上記のような NOTE が強調されていたり、冒頭の参考記事でもいくつかの不具合について報告されていたりするので、なにかあっても負けない。泣かない。

ついでに PullRequest 投げた

てなことを設定してたら、babel-eslint が estools/escope の analyze メソッドを書き換えるところで、参照の取り方に不都合があったので丁重に PR 投げた。

• Ensure that it is eslintLoc in the calling context by ahomu · Pull Request #19 · babel/babel-eslint

わりとすぐ取り込まれた。フルタイム臭するので、sebmck 氏の本職が気になる。

おしまい

これで eslint 生活になりました。よかったですね。

---