Edited at

手軽にeslint-config-airbnbを導入


概要

規則正しく美しいJavascriptコードを書くためにESLintを導入しておきたいが、Lintルールをイチから検討するのはなかなか大変...

そこでAirbnbのJavascript style guideのLintルールを、お手軽に導入しようという試み

想定する導入所要時間: 10分程度


導入プロジェクト環境

node 10.13.0

webpack 4.26.0


ESLint構築


必要パッケージのインストール

ESlint

$ npm i -D eslint

今回の環境ではwebpack用のloaderも入れておく

$ npm i -D eslint-loader

airbnbルールベースのプラグインを使用するが、

reactを利用しているかどうかでプラグインを変える必要がある


reactを利用する場合

$ npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react


reactを利用しない場合

$ npm i -D eslint-config-airbnb-base eslint-plugin-import



ESLint設定

プロジェクトルート直下に .eslintrc を作成

こちらもreactを利用するかどうかで記述を変える


reactを利用する場合


.eslintrc

{

"extends": "airbnb"
}


reactを利用しない場合


.eslintrc

{

"extends": "airbnb-base"
}

この段階で、エディタ側でLintエラー表示できる設定をしていれば、Lintルールが適用されていることがわかる



webpack連携

webpackでjsバンドルしている場合は、下記の設定をwebpackコンフィグに記述する

pre セクションを使用して、安全に他のloader(babel-loaderなど)によって変更されていないjsファイルをチェックすることが可能


webpack.config.js

module.exports = {

(snip)
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
],
},
}


まとめ

とても手軽にLintルールを適用することができた

もちろんプラグインルールをベースに独自ルールを追加拡張することも可能


.eslintrc

{

"extends": "airbnb",
"rules": {
"comma-dangle": 0
}
}


Appendix

eslint configの書き方

https://eslint.org/docs/user-guide/configuring

eslintルール一覧

https://eslint.org/docs/rules/