Skip to content

Commit

Permalink
Update eslint-config package name. (#8069)
Browse files Browse the repository at this point in the history
### Description

Updating the name of the ESLint configuration package to use a
namespace, similar to our examples.
  • Loading branch information
anthonyshew committed May 2, 2024
1 parent fa24fed commit e1c90f0
Showing 1 changed file with 16 additions and 21 deletions.
37 changes: 16 additions & 21 deletions docs/pages/repo/docs/handbook/linting/eslint.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Tabs, Tab } from "../../../../../components/Tabs";
import { Callout } from '../../../../../components/Callout'
import { Callout } from "../../../../../components/Callout";

# ESLint in a monorepo

Expand All @@ -22,21 +22,21 @@ apps
├─ package.json
└─ .eslintrc.js
packages
└─ eslint-config-custom
└─ eslint-config
├─ next.js
├─ library.js
└─ package.json
```

We've got a package called `eslint-config-custom`, and two applications, each with their own `.eslintrc.js`.
We've got a package called `@repo/eslint-config`, and two applications, each with their own `.eslintrc.js`.

### Our `eslint-config-custom` package
### Our `@repo/eslint-config` package

Our `eslint-config-custom` file contains two files, `next.js`, and `library.js`. These are two different ESLint configs, which we can use in different workspaces, depending on our needs.
Our `@repo/eslint-config` file contains two files, `next.js`, and `library.js`. These are two different ESLint configs, which we can use in different workspaces, depending on our needs.

Let's investigate the `next.js` lint configuration:

```js filename="packages/eslint-config-custom/next.js"
```js filename="packages/eslint-config/next.js"
const { resolve } = require("node:path");

const project = resolve(process.cwd(), "tsconfig.json");
Expand Down Expand Up @@ -87,9 +87,9 @@ It's a typical ESLint config that extends the [Vercel styleguide](https://github

The `package.json` looks like this:

```json filename="packages/eslint-config-custom/package.json"
```json filename="packages/eslint-config/package.json"
{
"name": "eslint-config-custom",
"name": "@repo/eslint-config",
"license": "MIT",
"version": "0.0.0",
"private": true,
Expand All @@ -98,21 +98,20 @@ The `package.json` looks like this:
"eslint-config-turbo": "^1.10.12"
}
}

```

Note that the ESLint dependencies are all listed here. This is useful - it means we don't need to re-specify the dependencies inside the apps which import `eslint-config-custom`.
Note that the ESLint dependencies are all listed here. This is useful - it means we don't need to re-specify the dependencies inside the apps which import `@repo/eslint-config`.

### How to use the `eslint-config-custom` package
### How to use the `@repo/eslint-config` package

In our `web` app, we first need to add `eslint-config-custom` as a dependency.
In our `web` app, we first need to add `@repo/eslint-config` as a dependency.

<Tabs items={['npm', 'yarn', 'pnpm']} storageKey="selected-pkg-manager">
<Tab>
```jsonc filename="apps/web/package.json"
{
"dependencies": {
"eslint-config-custom": "*"
"@repo/eslint-config": "*"
}
}
```
Expand All @@ -121,7 +120,7 @@ In our `web` app, we first need to add `eslint-config-custom` as a dependency.
```jsonc filename="apps/web/package.json"
{
"dependencies": {
"eslint-config-custom": "*"
"@repo/eslint-config": "*"
}
}
```
Expand All @@ -130,7 +129,7 @@ In our `web` app, we first need to add `eslint-config-custom` as a dependency.
```jsonc filename="apps/web/package.json"
{
"dependencies": {
"eslint-config-custom": "workspace:*"
"@repo/eslint-config": "workspace:*"
}
}
```
Expand All @@ -142,15 +141,11 @@ We can then import the config like this:
```js filename="apps/web/.eslintrc.js"
module.exports = {
root: true,
extends: ["custom/next"],
extends: ["@repo/eslint-config/next.js"],
};
```

By adding `custom/next` to our `extends` array, we're telling ESLint to look for a package called `eslint-config-custom`, and reference the file `next.js`.

<Callout type="info">
You can avoid specifying the file by setting the entrypoint for your package. For example, setting `main: 'next.js'` in the `package.json`, could be loaded as simply `extends: ["custom"]` in your `.eslintrc.js`.
</Callout>
By adding `@repo/eslint-config/next.js` to our `extends` array, we're telling ESLint to look for a package called `@repo/eslint-config`, and reference the file `next.js`.

### Summary

Expand Down

0 comments on commit e1c90f0

Please sign in to comment.