On creating a better method to extend the default ESLint configuration

[kelvindecosta]

Overview

The experienced Gatsby user and React dev would have realized that extending Gatsby's default ESLint configuration is a bit tedious.

Creating a new .eslintrc.js file completely overwrites the default configuration.
Moreover, Gatsby stops logging out linting warnings during the development phase.

To combat this, the official documentation recommends copying and pasting the entire configuration and installing a community plugin (which is not actively maintained).
This is not a scalable method, especially when these default rules change as new features are added to Gatsby.

I created gatsby-plugin-eslint-config that solves this issue.

I describe how the plugin uses the default ESLint configuration provided by Gatsby and how users can extend it.

Features

This plugin recommends the default configuration and provides the definitions for Gatsby's custom rules.

// plugin/index.js
const { store } = require("gatsby/dist/redux")
const { eslintConfig } = require("gatsby/dist/utils/eslint-config")
const {
  rules: customGatsbyRules,
} = require("gatsby/dist/utils/eslint/required")
const { reactHasJsxRuntime } = require("gatsby/dist/utils/webpack-utils")

// Load GraphQL schema
const { schema } = store.getState()

// Load default configuration
const config = eslintConfig(schema, reactHasJsxRuntime()).baseConfig

module.exports = {
  configs: {
    recommended: {
      ...config,

      // Remove `gatsby/dist/utils/eslint/required` from `extends`
      // This module loads Gatsby's custom rules without prefixing with the plugin name
      extends: config.extends.filter(
        module => !module.includes("gatsby/dist/utils/eslint/required")
      ),

      rules: {
        ...config.rules,

        // Set defaults for Gatsby's custom rules
        ...Object.entries(customGatsbyRules).reduce(
          (ruleDefaults, [rule, settings]) => ({
            ...ruleDefaults,
            [`gatsby/${rule}`]: settings,
          }),
          {}
        ),

        // Disabled because it causes a Syntax Error
        "graphql/template-strings": "off",
      },
    },
  },

  // Provide definitions for Gatsby's custom rules
  rules: Object.keys(customGatsbyRules).reduce(
    (ruleDefinitions, rule) => ({
      ...ruleDefinitions,
      [rule]: require(`gatsby/dist/utils/eslint-rules/${rule}`),
    }),
    {}
  ),
}

The default configuration (recommended) is loaded similar to how Gatsby loads it for use with eslint-webpack-plugin.

This plugin can be added in .eslintrc.js along with the recommended configuration as follows:

// .eslintrc.js
modules.exports = {
  plugins: ["gatsby"],
  extends: ["plugin:gatsby/recommended"],
}

This is exactly the same configuration used by Gatsby projects by default (i.e., no .eslintrc.js present).

You can add your own rules to .eslintrc.js as usual.

The eslint-webpack-plugin would be required to lint files during the development state.
This can be done using Gatsby's Node API.

// plugin/gatsby-node.js
const ESLintPlugin = require("eslint-webpack-plugin")

exports.onCreateWebpackConfig = (
  { stage, actions },
  { plugins, ...options }
) => {
  if (stage === "develop") {
    actions.setWebpackConfig({
      plugins: [new ESLintPlugin(options)],
    })
  }
}

This plugin should also be added in gatsby-config.js.

Conclusion

In the installation instructions, I recommend using an alias eslint-plugin-gatsby.
This will be an issue only if you use the unrelated eslint-plugin-gatsby (for which you can create another alias if needed).

IMHO this plugin is no more a Gatsby plugin than it is an ESLint plugin.
It's more like a bridge between the two.

Any feedback would be appreciated!

Thank you for your time.

[JustFly1984]

Does eslint-plugin-gatsby currently maintained? Is it possible to request ownership for the package if it is not maintained? can it go to @namespace if ownership transfer is not possible?

PS. I'm definitely overriding default .eslintrc.json in all my gatsby projects.

[kelvindecosta]

Hey @JustFly1984

I just published a new version of gatsby-plugin-eslint-config.

In the installation instructions, I recommend creating an alias eslint-plugin-gatsby that points to the same plugin.
This is necessary for .eslintrc.js to detect and load the plugin along with the recommended configuration.

The new version is a breaking change as .eslintrc.js configuration is now loading an ESLint plugin rather than extending a configuration.

I hope it helps you!