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

Docs: Update eslint.mdx #7746

Closed
wants to merge 2 commits into from
Closed

Docs: Update eslint.mdx #7746

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
501417b
Update eslint.mdx
thisisrick25 Mar 16, 2024
7e9efe8
Update eslint.mdx
thisisrick25 Mar 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
90 changes: 46 additions & 44 deletions docs/pages/repo/docs/handbook/linting/eslint.mdx
View file
Open in desktop
Expand Up @@ -22,97 +22,99 @@ apps
├─ package.json
└─ .eslintrc.js
packages
└─ eslint-config-custom
└─ eslint-config
├─ next.js
├─ library.js
└─ package.json
├─ package.json
└─ react-internal.js
```

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

### Our `eslint-config-custom` 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 `eslint-config` file contains three files, `next.js`, `library.js`, and `react-internal.js`. These are three 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");

/*
* This is a custom ESLint configuration for use with
* Next.js apps.
*
* This config extends the Vercel Engineering Style Guide.
* For more information, see https://github.com/vercel/style-guide
*
*/

/** @type {import("eslint").Linter.Config} */
module.exports = {
extends: [
"@vercel/style-guide/eslint/node",
"@vercel/style-guide/eslint/typescript",
"@vercel/style-guide/eslint/browser",
"@vercel/style-guide/eslint/react",
"@vercel/style-guide/eslint/next",
// turborepo custom eslint configuration configures the following rules:
// - https://github.com/vercel/turbo/blob/main/packages/eslint-plugin-turbo/docs/rules/no-undeclared-env-vars.md
"eslint:recommended",
"prettier",
require.resolve("@vercel/style-guide/eslint/next"),
"eslint-config-turbo",
].map(require.resolve),
parserOptions: {
project,
},
],
globals: {
React: true,
JSX: true,
},
env: {
node: true,
browser: true,
},
plugins: ["only-warn"],
settings: {
"import/resolver": {
typescript: {
project,
},
},
},
ignorePatterns: ["node_modules/", "dist/"],
// add rules configurations here
rules: {
"import/no-default-export": "off",
},
ignorePatterns: [
// Ignore dotfiles
".*.js",
"node_modules/",
],
overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }],
};
```

It's a typical ESLint config that extends the [Vercel styleguide](https://github.com/vercel/style-guide), nothing fancy.

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",
"license": "MIT",
"name": "@repo/eslint-config",
"version": "0.0.0",
"private": true,
"files": [
"library.js",
"next.js",
"react-internal.js"
],
"devDependencies": {
"@vercel/style-guide": "^4.0.2",
"eslint-config-turbo": "^1.10.12"
"@vercel/style-guide": "^5.2.0",
"eslint-config-turbo": "^1.12.4",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-only-warn": "^1.1.0",
"@typescript-eslint/parser": "^7.1.0",
"@typescript-eslint/eslint-plugin": "^7.1.0",
"typescript": "^5.3.3"
}
}


```

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 `eslint-config`.

### How to use the `eslint-config-custom` package
### How to use the `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 `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": "*"
"eslint-config": "*"
}
}
```
Expand All @@ -121,7 +123,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": "*"
"eslint-config": "*"
}
}
```
Expand All @@ -130,7 +132,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:*"
"eslint-config": "workspace:*"
}
}
```
Expand All @@ -142,14 +144,14 @@ 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`.
By adding `@repo/eslint-config/next.js` to our `extends` array, we're telling ESLint to look for a package called `eslint-config`, 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`.
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: ["eslint-config"]` in your `.eslintrc.js`.
</Callout>

### Summary
Expand Down