Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-plugin-eslint-v2

⚠️ The main plugin was built by mongkuen and you can find it here. I’ve just made a new version which adds support for Gatsby v2 until mongkuen updates his package but keep in mind that he made everything. Kudos for him ❤️


Adds ESLint to your Gatsby dev environment, maintaining code quality as you develop.

Install

  1. Install the gatsby-plugin-eslint-v2 plugin:

    npm install --save-dev gatsby-plugin-eslint-v2

    or

    yarn add --dev gatsby-plugin-eslint-v2

  2. Install ESLint and eslint-loader:

    npm install --save-dev eslint eslint-loader

    or

    yarn add --dev eslint eslint-loader

Usage

Add into gatsby-config.js.

// gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-plugin-eslint-v2'
  ]
}

If no options are specified, the plugin defaults to:

  1. Lint .js and .jsx files.
  2. Exclude node_modules, .cache, and public folders from linting.
  3. Default ESLint-Loader options.

You can specify your own linting filetypes, exclusions, and ESLint-Loader options:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-eslint-v2',
      options: {
        test: /\.js$|\.jsx$/,
        exclude: /(node_modules|cache|public)/,
        options: {
          emitWarning: true,
          failOnError: false
        }
      }
    }
  ]
}

Configuring ESLint

You’re free to install your own ESLint plugins and rules. Here are 2 easy ways to start linting:

Basic eslint-plugin-react Linting

  1. Follow eslint-plugin-react plugin installation procedures:

    npm install --save-dev babel-eslint eslint-plugin-import eslint-plugin-react

    or

    yarn add --dev babel-eslint eslint-plugin-import eslint-plugin-react

  2. Add .eslintrc file to project root:

    {
      "parser": "babel-eslint",
      "rules": {
        "strict": 0
      },
      "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
      ]
    }

AirBnB’s eslint-config-airbnb Linting

  1. Follow eslint-config-airbnb plugin installation procedures:

    npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

    or

    yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

  2. Add .eslintrc file to project root:

    {
      "extends": "airbnb"
    }
Docs
Tutorials
Plugins
Blog
Showcase