Back to Gatsby

Add a custom ESLint config

deprecated-packages/gatsby-recipes/recipes/eslint.mdx

2.20.01.7 KB
Original Source

Add a custom ESLint config

Introduction to ESLint

ESLint is an open source JavaScript linting utility. Code linting is a type of static analysis that is frequently used to find problematic patterns. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.

JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. Without the benefit of a compilation process, JavaScript code is typically executed in order to find syntax or other errors. Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.

Why use this recipe

Gatsby ships with a built-in ESLint setup. For most users, the 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 recipe makes that possible.

This recipe replicates (mostly) the ESLint config Gatsby ships with and then you can add additional presets, plugins, and rules.

This recipe:


Installs necessary packages.

<NPMPackage name="eslint-config-react-app" dependencyType={"development"} /> <NPMPackage name="gatsby-plugin-eslint" dependencyType={"development"} />


Installs gatsby-plugin-eslint.

<GatsbyPlugin name="gatsby-plugin-eslint" />

Writes out a basic .eslintrc.js file that you can extend with your own chosen eslint plugins and presets.

<File path=".eslintrc.js" content='https://gist.githubusercontent.com/KyleAMathews/5c4cfa4f58cc2707094f3ae5048e72f6/raw/5a57b14ccc957c8d21c4c6b2f10bba9d179254a1/.estlintrc.js'/>


Once the recipe is installed, you can edit the eslint config by opening .eslintrc.js in your code editor.