Skip to content

Commit

Permalink
Add docs for ESLint plugin settings and rule options (#28059)
Browse files Browse the repository at this point in the history
This PR adds documentation for the new `rootDir` setting (#27918), and for `next/no-html-link-for-pages`.

## Documentation / Examples

- [x] Make sure the linting passes
  • Loading branch information
mrmckeb authored Aug 19, 2021
1 parent 9b09b92 commit 0d3fb75
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 0 deletions.
19 changes: 19 additions & 0 deletions docs/basic-features/eslint.md
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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)

0 comments on commit 0d3fb75

Please sign in to comment.