Edited at

eslint-config-airbnbを守りたかった

More than 3 years have passed since last update.

ESLint のルールに eslint-config-airbnb v5.0 を採用してみたけど、一部のルールが厳しかったという話です。


eslint-config-airbnb の設定

おそらく、一番デフォルトの全部入りの設定


Our default export contains all of our ESLint rules, including EcmaScript 6+ and React. It requires eslint and eslint-plugin-react.

npm install --save-dev eslint-config-airbnb eslint-plugin-react eslint

add "extends": "airbnb" to your .eslintrc



no-param-reassign

http://eslint.org/docs/rules/no-param-reassign

https://github.com/airbnb/javascript#7.12

https://github.com/airbnb/javascript#7.13


  • 引数を更新してはいけない

  • オブジェクトのプロパティも更新してはいけない

こういうのが作れない。

const preventDefaultEvent = (event) => {

if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false; // For IE8
}
};

ルールを無効にする以外にエラー抑止ができない。

議論済み なので今後も変わらなそう。


arrow-body-style

http://eslint.org/docs/rules/arrow-body-style


パターン1

これは一文にすべきと言われるので

const foo = () => {

return [
1,
2,
];
};

こうしたり、

const foo = () => {

const result = [
1,
2,
];
return result;
};

こうしないといけない。

const foo = () => (

[
1,
2,
]
);


パターン2

これは空の関数作るなよといわれるので、

const foo = (callback = () => {}) {

};

色々修正すると、修正が修正を呼びこうしないといけない。

const foo = (callback = function callbackName() {}) {

};


no-unused-vars

http://eslint.org/docs/rules/no-unused-vars の厳しい方 { "args": "all" }

これは x, y 使ってないからダメ。

const foo = (x, y) => {

};

destructing を使って、こんな風に雑に引数仕様を残したいときに不便だった。

this.on('foo', ({ a, b, c }) => {

});


react/jsx-no-bind

https://github.com/airbnb/javascript/tree/master/react#methods

二つあって、片方は理由が示されているが、以下のもうひとつの方


Do not use underscore prefix for internal methods of a React component.


理由を調べたら、"React is a special subset" という結論でモヤモヤした。

https://github.com/airbnb/javascript/issues/490


以上

マモレナカッタ..