How to use ESLint
Gatsby ships with a built-in ESLint setup. For most users, our built-in ESLint setup is all you need. If you know however that you’d like to customize your ESLint config e.g. your company has their own custom ESLint setup, this shows how this can be done.
You’ll replicate (mostly) the ESLint config Gatsby ships with so you can then add additional presets, plugins, and rules.
Now that your packages have been installed, create a new file at the root of the site named
.eslintrc.js using the command below.
Copy the snippet below to the newly created
.eslintrc.js file. Then add additional presets, plugins, and rules as desired.
Note: When there is no ESLint file Gatsby implicitly adds a barebones ESLint loader. This loader pipes ESLint feedback into the terminal window where you are running or building Gatsby and also to the console in your browser developer tools. This gives you consolidated, immediate feedback on newly-saved files. When you include a custom
.eslintrc file, Gatsby gives you control over the ESLint configuration. This means that it will override the built-in
eslint-loader only leaving the required rules activated (
limited-exports-page-templates). For the non-required config you’ll need to activate each rule on your own. One way to do this is to use the Community plugin
gatsby-plugin-eslint. This also means that the default ESLint config Gatsby ships with (the
eslintConfig export) will be entirely overwritten. If you would still like to take advantage of those rules, you’ll need to copy them to your local file.
Creating an empty
.eslintrc file at the root of your project will mostly disable ESLint for your site. The empty file will disable the built-in
eslint-loader because Gatsby assumes once you have an ESLint file you are in charge of linting. However, the required ESLint rules for Fast Refresh (
limited-exports-page-templates) will still be activated and shown in the terminal output.