# 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.