Help us understand the problem. What is going on with this article?

手軽にeslint-config-airbnbを導入

More than 1 year has passed since last update.

概要

規則正しく美しい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/

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away