手軽にeslint-config-airbnbを導入

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