Skip to content
This repository has been archived by the owner on Jun 21, 2023. It is now read-only.

Commit

Permalink
Update ESLint docs. (vercel#25816)
Browse files Browse the repository at this point in the history
Some slight tweaks based on my review of the docs. A few outstanding questions left 😄 

vercel#25064 (review)
  • Loading branch information
leerob authored Jun 5, 2021
1 parent d5f940e commit 30e006f
Showing 1 changed file with 14 additions and 12 deletions.
26 changes: 14 additions & 12 deletions docs/basic-features/eslint.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description: Next.js supports ESLint by default. You can get started with ESLint in Next.js here.
description: Next.js provides an integrated ESLint experience by default. These conformance rules help you use Next.js in the optimal way.
---

# ESLint
Expand All @@ -10,7 +10,7 @@ Since version **11.0.0**, Next.js provides an integrated [ESLint](https://eslint
next lint
```

If you don't already have ESLint configured in your application, you will be guided through the installation of any required packages.
If you don't already have ESLint configured in your application, you will be guided through the installation of the required packages.

```bash
next lint
Expand All @@ -26,29 +26,29 @@ next lint

If no ESLint configuration is present, Next.js will create an `.eslintrc` file in the root of your project and automatically configure it with the base configuration:

```
```js
{
"extends": "next"
}
```

Now you can run `next lint` every time you want to run ESLint to catch errors
You can now run `next lint` every time you want to run ESLint to catch errors.

> The default base configuration (`"extends": "next"`) can be updated at any time and will only be included if no ESLint configuration is present.
We recommend using an appropriate [integration](https://eslint.org/docs/user-guide/integrations#editors) to view warnings and errors directly in your code editor during development.

## Linting During Builds

Once ESLint has been set up, it will automatically run during every build (`next build`). Errors will fail the build while warnings will not.
Once ESLint has been set up, it will automatically run during every build (`next build`). Errors will fail the build, while warnings will not.

If you do not want ESLint to run as a build step, it can be disabled using the `--no-lint` flag:

```bash
next build --no-lint
```

This is not recommended unless you have configured ESLint to run in a separate part of your workflow (for example, in CI or a pre-commit hook).
**This is not recommended** unless you have configured ESLint to run in a separate part of your workflow (for example, in CI or a pre-commit hook).

## Linting Custom Directories

Expand All @@ -60,29 +60,31 @@ next lint --dir components --dir lib

## ESLint Plugin

Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next), that makes it easier to catch common issues and problems in a Next.js application. The full set of rules can be found in the [package repository](https://github.com/vercel/next.js/tree/master/packages/eslint-plugin-next/lib/rules).
Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next), making it easier to catch common issues and problems in a Next.js application. The full set of rules can be found in the [package repository](https://github.com/vercel/next.js/tree/master/packages/eslint-plugin-next/lib/rules).

## Base Configuration

The Next.js base ESLint configuration is automatically generated when `next lint` is run for the first time:

```
```js
{
"extends": "next"
}
```

This configuration extends recommended rule sets from various Eslint plugins:
This configuration extends recommended rule sets from various ESLint plugins:

- [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react)
- [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)
- [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next)

You can see the full details of the shareable configuration in the [`eslint-config-next`](https://www.npmjs.com/package/eslint-config-next) package.

If you would like to modify any rules provided by the supported plugins (`react`, `react-hooks`, `next`), you can directly modify them using the `rules` property:
## Disabling Rules

```
If you would like to modify any rules provided by the supported plugins (`react`, `react-hooks`, `next`), you can directly modify them using the `rules` property in your `.eslintrc`:

```js
{
"extends": "next",
"rules": {
Expand All @@ -106,7 +108,7 @@ If you would like to modify any rules provided by the supported plugins (`react`
### Core Web Vitals

A stricter `next/core-web-vitals` entrypoint can also be specified in `.eslintrc`:
A stricter `next/core-web-vitals` rule set can also be added in `.eslintrc`:

```
{
Expand Down

0 comments on commit 30e006f

Please sign in to comment.