ESLintでファイルの中身によって設定ファイルを切り替える

yukidarake.hateblo.jp

の続きで、実際やってみたという話です。

雑なメモですがご容赦ください。

ESLint plugin作成

ここではeslint-plugin-fooとしておきましょうか。

package.jsonとindex.jsを作ります。

eslint-plugin-fooという文字列があれば、.eslintrc2.ymlを使うようにします。

ソース

'use strict';
var eslint = require('eslint');
var alternativeCLIEngine = new eslint.CLIEngine({
  configFile: './.eslintrc2.yml',
});

function preprocess(text, filename) {
  if (!/eslint-plugin-foo/.test(text)) {
    return [text];
  }

  var config = alternativeCLIEngine.getConfigForFile(filename);

  var eslintRules = '/*eslint ' + Object.keys(config.rules).map(function(rule) {
    return rule + ':' + JSON.stringify(config.rules[rule]);
  }).join(',') + '*/';

  return [eslintRules + text];
}

function postprocess(messages) {
  return messages[0];
}

module.exports = {
  processors: {
    '.js': {
      preprocess: preprocess,
      postprocess: postprocess,
    },
  },
};

こんな感じ。

https://github.com/yukidarake/eslint-plugin-foo

ソースは↑にあげました。

仕組み

ファイルのどこかにeslint-plugin-fooがあれば、行頭に/*eslint no-var:0*/みたいに付けるという超力技。

動かしてみる

必要なモジュールのインストール

使いたいファイルのあるディレクトリで

npm i eslint
npm i yukidarake/eslint-plugin-foo

してください。

.eslintrcを2つ用意

.eslintrc.yml

---
root: true
plugins:
  - foo
rules:
  no-var: 2

と

.eslintrc2.yml

---
root: true
rules:
  no-var: 0

実行

これで準備は整いました！

a.js

// eslint-plugin-foo
var a = 1;

というファイルを使って、コメント行の文字列を消したり、戻したりしながら実行してみてください。

./node_modules/.bin/eslint a.js

結果

/private/tmp/a.js
  2:1  error  Unexpected var, use let or const instead  no-var

✖ 1 problem (1 error, 0 warnings)

と出たり出なかったり・・・

ソース中のテキストの有無によって.eslintrc.ymlと.eslintrc2.ymlを切り替えできているようです。

まとめ

この方法をうまいこと使えば同じディレクトリ内でES5とES2015のJSファイルが混在していてもうまいことチェックできたりするのでは？

というアイデアでした。

もっと良い方法や指摘事項等あればぜひ教えてください・・・