ESLint

ESLint is a powerful open source utility for JavaScript aimed at detecting malformed syntax using a type of static analysis known as code linting. Due to JavaScript’s loosely typed and dynamic nature, the language is prone to syntax errors committed by developers. ESLint allows developers to run tests across their code without executing the logic.

As with Webpack, Gatsby provides a built-in ESLint configuration, and these settings should be suitable for the vast majority of Gatsby sites. However, there may be scenarios where you need to customize the ESLint configuration to adhere to certain other requirements. To do this, first replicate the configuration that is built into Gatsby by installing necessary dependencies into your development dependencies:

$ npm install --save-dev eslint-config-react-app

Then, create a configuration file for ESLint within your Gatsby project root as follows:

$ touch .eslintrc.js

NOTE

When there is no ESLint configuration file available, Gatsby instead adds a rudimentary ESLint loader implicitly that is responsible for piping feedback from the ESLint checker into the terminal or console. This is done through the built-in eslint-loader utility.

Add the following initial configuration to your ESLint configuration file, after which you’ll be able to include any additional presets, plugins, and linting rules required for your unique needs:

// .eslintrc.js
module.exports = {
  globals: {
    __PATH_PREFIX__: true,
  },
  extends: `react-app`,
}

WARNING

If you create an empty ESLint configuration file devoid of any data, this will disable ESLint for your Gatsby site, because Gatsby will assume your configuration file should override its own built-in ESLint configuration.