Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add docs for ESLint plugin settings and rule options #28059

Merged
merged 9 commits into from Aug 19, 2021
19 changes: 19 additions & 0 deletions docs/basic-features/eslint.md
Expand Up @@ -101,6 +101,25 @@ Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/

If you already have ESLint configured in your application, we recommend extending from this plugin directly instead of including `eslint-config-next` unless a few conditions are met. Refer to the [Recommended Plugin Ruleset](/docs/basic-features/eslint.md#recommended-plugin-ruleset) to learn more.

### Custom Settings

#### `rootDir`

If you're using `eslint-plugin-next` in a project where Next.js isn't installed in your root directory (such as a monorepo), you can tell `eslint-plugin-next` where to find your Next.js application using the `settings` property in your `.eslintrc`:

```json
{
"extends": "next",
"settings": {
"next": {
"rootDir": "/packages/my-app/"
}
}
}
```

`rootDir` can be a path (relative or absolute), a glob (i.e. `"/packages/*/"`), or an array of paths and/or globs.

## Linting Custom Directories

By default, Next.js will run ESLint for all files in the `pages/`, `components/`, and `lib/` directories. However, you can specify which directories using the `dirs` option in the `eslint` config in `next.config.js` for production builds:
Expand Down
18 changes: 18 additions & 0 deletions errors/no-html-link-for-pages.md
Expand Up @@ -40,6 +40,24 @@ function Home() {
export default Home
```

### Options

#### `pagesDir`

This rule can normally locate your `pages` directory automatically.

If you're working in a monorepo, we recommend configuring the [`rootDir`](/docs/basic-features/eslint.md#rootDir) setting in `eslint-plugin-next`, which `pagesDir` will use to locate your `pages` directory.

In some cases, you may also need to configure this rule directly by providing a `pages` directory. This can be a path or an array of paths.

```json
{
"rules": {
"@next/next/no-html-link-for-pages": ["error", "/my-app/pages/"]
}
}
```

### Useful Links

- [next/link API Reference](https://nextjs.org/docs/api-reference/next/link)