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.

Sign up for GitHub

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

Jump to bottom

Update eslint-config package name. #8069

Merged
merged 1 commit into from
May 2, 2024
Merged

Update eslint-config package name. #8069

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 16 additions & 21 deletions docs/pages/repo/docs/handbook/linting/eslint.mdx
View file
Open in desktop
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
Loading