# gatsby-plugin-eslint

> Gatsby plugin to add support for ESLint

Latest version **4.0.4** (published 2023-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-eslint
pnpm add gatsby-plugin-eslint
yarn add gatsby-plugin-eslint
bun add gatsby-plugin-eslint
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.4 |
| Published | 2023-03-25 |
| First published | 2018-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mong-Kuen Sun |
| Maintainers | mongkuen |
| Keywords | gatsby, gatsby-plugin, eslint |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-eslint
- Repository: https://github.com/mongkuen/gatsby-plugin-eslint
- Issues: https://github.com/mongkuen/gatsby-plugin-eslint/issues
- npm.io page: https://npm.io/package/gatsby-plugin-eslint

## Dependencies (1)

- [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@pandacss/eslint-plugin](https://npm.io/package/@pandacss/eslint-plugin.md) — 18.7K weekly downloads

## Recent versions

- 4.0.4 (latest) — 2023-03-25
- 4.0.3 — 2022-11-14
- 4.0.2 — 2021-11-11
- 4.0.1 — 2021-10-28
- 4.0.0 — 2021-08-18
- 3.0.0 — 2021-01-31
- 2.0.8 — 2019-11-05
- 2.0.7 — 2019-11-04
- 2.0.6 — 2019-11-04
- 2.0.5 — 2019-04-28
- 2.0.4 — 2019-01-28
- 2.0.3 — 2019-01-14
- 2.0.2 — 2019-01-14
- 2.0.1 — 2018-08-16
- 2.0.0 — 2018-08-16
- … 3 more at https://npm.io/package/gatsby-plugin-eslint/versions

## README

# gatsby-plugin-eslint

**Now working with Gatsby V3**

Replaces Gatsby's ESLint Webpack configs, giving you full control to customize linting with the rules and developer experience you specifically need to maintain code quality.

This will COMPLETELY OVERWRITE any ESLint Webpack Plugins that Gatsby uses.
The installation instructions will help you reactivate the [two required rules as of writing](https://www.gatsbyjs.com/docs/how-to/custom-configuration/eslint/#configuring-eslint):

- [`no-anonymous-exports-page-templates`](https://github.com/gatsbyjs/gatsby/blob/fbfe3f63dec23d279a27b54b4057dd611dce74bb/packages/gatsby/src/utils/eslint-rules/no-anonymous-exports-page-templates.ts)
- [`limited-exports-page-templates`](https://github.com/gatsbyjs/gatsby/blob/fbfe3f63dec23d279a27b54b4057dd611dce74bb/packages/gatsby/src/utils/eslint-rules/limited-exports-page-templates.ts)

## Installation

`npm install --save-dev gatsby-plugin-eslint eslint eslint-webpack-plugin`

or

`yarn add --dev gatsby-plugin-eslint eslint eslint-webpack-plugin`

## Default Settings

1. Lints development mode in the `'develop'` stage. Add other [Webpack Config Stages](https://www.gatsbyjs.com/docs/production-app/#webpack-config) into `stages` array to enable linting during other Gatsby stages (eg. `build-javascript`)
2. Lint `.js`, `.jsx`, `.ts`, and `.tsx` files.
3. Excludes `node_modules`, `bower_components`, `.cache`, and `public` folders from linting
4. Otherwise uses [`eslint-webpack-plugin`](https://github.com/webpack-contrib/eslint-webpack-plugin#options) option defaults

## Usage

1. Create `.eslintrc` file in project root.

   ```javascript
   // .eslintrc

   // Gatsby's required rules
   {
     "rules": {
       "no-anonymous-exports-page-templates": "warn",
       "limited-exports-page-templates": "warn"
     }
   }
   ```

2. Add plugin into `gatsby-config.js`

   ```javascript
   // gatsby-config.js

   const path = require("path");
   // Get paths of Gatsby's required rules, which as of writing is located at:
   // https://github.com/gatsbyjs/gatsby/tree/fbfe3f63dec23d279a27b54b4057dd611dce74bb/packages/
   // gatsby/src/utils/eslint-rules
   const gatsbyRequiredRules = path.join(
     process.cwd(),
     "node_modules",
     "gatsby",
     "dist",
     "utils",
     "eslint-rules"
   );

   module.exports = {
     plugins: [
       // ...other plugins
       {
         resolve: "gatsby-plugin-eslint",
         options: {
           // Gatsby required rules directory
           rulePaths: [gatsbyRequiredRules],
           // Default settings that may be omitted or customized
           stages: ["develop"],
           extensions: ["js", "jsx", "ts", "tsx"],
           exclude: ["node_modules", "bower_components", ".cache", "public"],
           // Any additional eslint-webpack-plugin options below
           // ...
         },
       },
     ],
   };
   ```

3. Additionally as of writing, [Gatsby's default ESLint config](https://github.com/gatsbyjs/gatsby/blob/fbfe3f63dec23d279a27b54b4057dd611dce74bb/packages/gatsby/src/utils/eslint-config.ts) may be copied over if you would still like to take advavntage of those rules.

## Configuring ESLint

Mix and match your own ESLint plugins and rules depending on the React/Javascript/Typescript patterns you want to enforce. Here are three ways you can get started:

### Basic React Linting with [`eslint-plugin-react`](https://github.com/yannickcr/eslint-plugin-react)

1. Follow [`eslint-plugin-react`](https://github.com/yannickcr/eslint-plugin-react) plugin installation procedures:

   `npm install --save-dev eslint-plugin-react babel-eslint`

   or

   `yarn add --dev eslint-plugin-react babel-eslint`

2. Add `.eslintrc` file to project root:

   ```javascript
   {
     "parser": "babel-eslint", // uses babel-eslint transforms
     "settings": {
       "react": {
         "version": "detect" // detect react version
       }
     },
     "env": {
       "node": true // defines things like process.env when generating through node
     },
     "extends": [
       "eslint:recommended", // use recommended configs
       "plugin:react/recommended"
     ],
     "rules": {
       "no-anonymous-exports-page-templates": "warn",
       "limited-exports-page-templates": "warn"
     }
   }
   ```

### Advanced React Linting with AirBnB's [`eslint-config-airbnb`](https://www.npmjs.com/package/eslint-config-airbnb)

1. Follow [`eslint-config-airbnb`](https://www.npmjs.com/package/eslint-config-airbnb) plugin installation procedures. If **npm 5+** this command works for `npm` and `yarn`

   `npx install-peerdeps --dev eslint-config-airbnb`

2. Add `.eslintrc` file to project root:

   ```javascript
   {
     "extends": "airbnb",
     "rules": {
       "no-anonymous-exports-page-templates": "warn",
       "limited-exports-page-templates": "warn"
     }
   }
   ```

### Typescript Linting with [ESLint Plugin Typescript](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin)

1. Follow [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin) plugin installation procedures:

   `npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin`

   or

   `yarn add --dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin`

2. Add `.eslintrc` file to project root:

   ```javascript
   {
     "extends": [
       "eslint:recommended",
       "plugin:@typescript-eslint/recommended",
     ],
     "rules": {
       "no-anonymous-exports-page-templates": "warn",
       "limited-exports-page-templates": "warn"
     }
   }
   ```

---
_Source: https://npm.io/package/gatsby-plugin-eslint · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._