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 @@ -100,6 +100,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 using the `settings` property in your `.eslintrc`:
mrmckeb marked this conversation as resolved.
Show resolved Hide resolved

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

We've designed `rootDir` to support a variety of configurations. The value can be a path (relative or absolute), a glob (i.e. `"/packages/*/"`), or an array of paths and/or globs.
mrmckeb marked this conversation as resolved.
Show resolved Hide resolved

## 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`](https://nextjs.org/docs/basic-features/eslint.md#rootDir) setting in `eslint-plugin-next`, which this rule will use to locate your `pages` directory.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
If you're working in a monorepo, we recommend configuring the [`rootDir`](https://nextjs.org/docs/basic-features/eslint.md#rootDir) setting in `eslint-plugin-next`, which this rule will use to locate your `pages` directory.
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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this first section need an example, if the second one does?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could add it here, but I worry that users would miss the details and configuration options - WDYT?


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.
mrmckeb marked this conversation as resolved.
Show resolved Hide resolved

```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)