手軽に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/