From 31829d873a7e5dba7801e73424ab93983880ee97 Mon Sep 17 00:00:00 2001 From: Josh Goldberg Date: Sat, 10 Feb 2024 10:01:12 -0500 Subject: [PATCH 1/3] docs: updated Getting Started and related docs for flat config --- docs/Getting_Started.mdx | 46 +++--- docs/linting/Configurations.mdx | 175 +++++++++++++++++++++- docs/linting/Legacy_ESLint_Setup.mdx | 92 ++++++++++++ docs/linting/Typed_Linting.mdx | 97 +++++++++++- docs/linting/typed-linting/Monorepos.mdx | 30 +++- packages/website/sidebars/sidebar.base.js | 1 + 6 files changed, 409 insertions(+), 32 deletions(-) create mode 100644 docs/linting/Legacy_ESLint_Setup.mdx diff --git a/docs/Getting_Started.mdx b/docs/Getting_Started.mdx index 4763b8055a9f..b3266e852da4 100644 --- a/docs/Getting_Started.mdx +++ b/docs/Getting_Started.mdx @@ -7,31 +7,34 @@ title: Getting Started These steps will get you running ESLint with our recommended rules on your TypeScript code as quickly as possible. +:::note +This page is for [ESLint's new "flat" config format](https://eslint.org/docs/latest/use/configure/configuration-files-new). +See [Legacy ESLint Setup](./linting/Legacy_ESLint_Setup.mdx) for [ESLint's legacy format](https://eslint.org/docs/latest/use/configure/configuration-files). +::: + ### Step 1: Installation First, install the required packages for [ESLint](https://eslint.org), [TypeScript](https://typescriptlang.org), and this plugin: ```bash npm2yarn -npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript +npm install --save-dev eslint typescript typescript-eslint ``` ### Step 2: Configuration -Next, create a `.eslintrc.cjs` config file in the root of your project, and populate it with the following: +Next, create a `eslint.config.js` config file in the root of your project, and populate it with the following: -```js title=".eslintrc.cjs" -/* eslint-env node */ -module.exports = { - extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], - parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint'], - root: true, -}; -``` +```js title="eslint.config.js" +// @ts-check -:::info -If your project doesn't use ESM, naming the file as `.eslintrc.js` is fine. See [ESLint's Configuration Files docs](https://eslint.org/docs/user-guide/configuring/configuration-files) for more info. -::: +import eslint from '@eslint/js'; +import tseslint from 'typescript-eslint'; + +export default tseslint.config( + eslint.configs.recommended, + ...tseslint.configs.recommended, +); +``` ### Step 3: Running ESLint @@ -65,14 +68,13 @@ ESLint will lint all TypeScript compatible files within the current folder, and ## Details -- `parser: '@typescript-eslint/parser'` tells ESLint to use the [`@typescript-eslint/parser`](./packages/Parser.mdx) package you installed to parse your source files. - - This is required, or else ESLint will throw errors as it tries to parse TypeScript code as if it were regular JavaScript. -- `plugins: ['@typescript-eslint']` tells ESLint to load the [`@typescript-eslint/eslint-plugin`](./packages/ESLint_Plugin.mdx) package as a plugin. - - This allows you to use typescript-eslint's rules within your codebase. -- `extends: [ ... ]` tells ESLint that your config extends the given configurations. - - `eslint:recommended` is ESLint's inbuilt "recommended" config - it turns on a small, sensible set of rules which lint for well-known best-practices. - - `plugin:@typescript-eslint/recommended` is our "recommended" config - it's similar to `eslint:recommended`, except it turns on TypeScript-specific rules from our plugin. -- `root: true` is a generally good ESLint practice to indicate this file is the root-level one used by the project and ESLint should not search beyond this directory for config files. +The [`config`](./packages/TypeScript_ESLint.mdx) helper sets three parts of ESLint: + +- [Parser](https://eslint.org/docs/latest/use/configure/parser): set to [`@typescript-eslint/parser`](./packages/Parser.mdx) so ESLint knows how to parse the new pieces of TypeScript syntax. +- [Plugins](https://eslint.org/docs/latest/use/configure/plugins): set to [`@typescript-eslint/eslint-plugin`](./packages/ESLint_Plugin.mdx) to load [rules listed in our _Rules_ page](./Rules). +- [Rules](https://eslint.org/docs/latest/use/configure/rules): extends from our [recommended configuration](http://localhost:3000/linting/configs#recommended) to enable our most commonly useful lint rules. + +See [ESLint's Configuration Files docs](https://eslint.org/docs/user-guide/configuring/configuration-files) for more details on configuring ESLint. ## Next Steps diff --git a/docs/linting/Configurations.mdx b/docs/linting/Configurations.mdx index 1a777b2bcf40..ccab35502478 100644 --- a/docs/linting/Configurations.mdx +++ b/docs/linting/Configurations.mdx @@ -3,6 +3,9 @@ id: configs title: Configurations --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + [ESLint shareable configurations](https://eslint.org/docs/latest/developer-guide/shareable-configs) exist to provide a comprehensive list of rules settings that you can start with. `@typescript-eslint/eslint-plugin` includes built-in configurations you can extend from to pull in the recommended starting rules. @@ -15,6 +18,20 @@ title: Configurations If your project does not enable [typed linting](./Typed_Linting.mdx), we suggest enabling the [`recommended`](#recommended) and [`stylistic`](#stylistic) configurations to start: + + + +```js title="eslint.config.js" +export default tseslint.config( + eslint.configs.recommended, + ...tseslint.configs.recommended, + ...tseslint.configs.stylistic, +); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: [ @@ -25,12 +42,34 @@ module.exports = { }; ``` + + + > If a majority of developers working on your project are comfortable with TypeScript and typescript-eslint, consider replacing `recommended` with `strict`. ### Projects With Type Checking If your project enables [typed linting](./Typed_Linting.mdx), we suggest enabling the [`recommended-type-checked`](#recommended-type-checked) and [`stylistic-type-checked`](#stylistic-type-checked) configurations to start: + + + +```js title="eslint.config.js" +export default tseslint.config( + eslint.configs.recommended, + ...tseslint.configs.recommendedTypeChecked, + ...tseslint.configs.stylisticTypeChecked, + languageOptions: { + parserOptions: { + project: true, + } + }, +); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: [ @@ -41,6 +80,9 @@ module.exports = { }; ``` + + + > If a majority of developers working on your project are comfortable with TypeScript and typescript-eslint, consider replacing `recommended-type-checked` with `strict-type-checked`. ## Recommended Configurations @@ -70,12 +112,25 @@ Recommended rules for code correctness that you can drop in without additional c These rules are those whose reports are almost always for a bad practice and/or likely bug. `recommended` also disables core ESLint rules known to conflict with typescript-eslint rules or cause issues in TypeScript codebases. + + + +```js title="eslint.config.js" +export default tseslint.config(...tseslint.configs.recommended); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: ['plugin:@typescript-eslint/recommended'], }; ``` + + + See [`configs/recommended.ts`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/recommended.ts) for the exact contents of this config. ### `recommended-type-checked` @@ -83,12 +138,25 @@ See [`configs/recommended.ts`](https://github.com/typescript-eslint/typescript-e Contains all of `recommended` along with additional recommended rules that require type information. Rules newly added in this configuration are similarly useful to those in `recommended`. + + + +```js title="eslint.config.js" +export default tseslint.config(...tseslint.configs.recommendedTypeChecked); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: ['plugin:@typescript-eslint/recommended-type-checked'], }; ``` + + + See [`configs/recommended-type-checked.ts`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/recommended-type-checked.ts) for the exact contents of this config. ### `strict` @@ -96,12 +164,25 @@ See [`configs/recommended-type-checked.ts`](https://github.com/typescript-eslint Contains all of `recommended`, as well as additional strict rules that can also catch bugs. Rules added in `strict` are more opinionated than recommended rules and might not apply to all projects. + + + +```js title="eslint.config.js" +export default tseslint.config(...tseslint.configs.strict); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: ['plugin:@typescript-eslint/strict'], }; ``` + + + See [`configs/strict.ts`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/strict.ts) for the exact contents of this config. :::caution @@ -113,12 +194,25 @@ We recommend a TypeScript project extend from `plugin:@typescript-eslint/strict` Contains all of `recommended`, `recommended-type-checked`, and `strict`, along with additional strict rules that require type information. Rules newly added in this configuration are similarly useful (and opinionated) to those in `strict`. + + + +```js title="eslint.config.js" +export default tseslint.config(...tseslint.configs.strictTypeChecked); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: ['plugin:@typescript-eslint/strict-type-checked'], }; ``` + + + See [`configs/strict-type-checked.ts`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/strict-type-checked.ts) for the exact contents of this config. :::caution @@ -130,12 +224,25 @@ We recommend a TypeScript project extend from `plugin:@typescript-eslint/strict- Rules considered to be best practice for modern TypeScript codebases, but that do not impact program logic. These rules are generally opinionated about enforcing simpler code patterns. + + + +```js title="eslint.config.js" +export default tseslint.config(...tseslint.configs.stylistic); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: ['plugin:@typescript-eslint/stylistic'], }; ``` + + + See [`configs/stylistic.ts`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/stylistic.ts) for the exact contents of this config. ### `stylistic-type-checked` @@ -143,12 +250,25 @@ See [`configs/stylistic.ts`](https://github.com/typescript-eslint/typescript-esl Contains all of `stylistic`, along with additional stylistic rules that require type information. Rules newly added in this configuration are similarly opinionated to those in `stylistic`. + + + +```js title="eslint.config.js" +export default tseslint.config(...tseslint.configs.stylisticTypeChecked); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: ['plugin:@typescript-eslint/stylistic-type-checked'], }; ``` + + + See [`configs/stylistic-type-checked.ts`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/stylistic-type-checked.ts) for the exact contents of this config. ## Other Configurations @@ -187,27 +307,77 @@ See [`configs/disable-type-checked.ts`](https://github.com/typescript-eslint/typ If you use type-aware rules from other plugins, you will need to manually disable these rules or use a premade config they provide to disable them. ::: + + + +```js title="eslint.config.js" +export default tseslint.config( + eslint.configs.recommended, + ...tseslint.configs.recommendedTypeChecked, + { + languageOptions: { + parserOptions: { + project: true, + }, + }, + }, + // Added lines start + { + files: ['*.js'], + ...tseslint.configs.disableTypeChecked, + }, + // Added lines end +); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: [ 'eslint:recommended', - 'plugin:@typescript-eslint/eslint-recommended', + 'plugin:@typescript-eslint/recommended-type-checked', ], + parser: '@typescript-eslint', + parserOptions: { + project: true, + __tsconfigRootDir: __dirname, + }, + root: true, + // Added lines start overrides: [ { files: ['*.js'], extends: ['plugin:@typescript-eslint/disable-type-checked'], }, ], + // Added lines end }; ``` + + + ### `eslint-recommended` This ruleset is meant to be used after extending `eslint:recommended`. It disables core ESLint rules that are already checked by the TypeScript compiler. Additionally, it enables rules that promote using the more modern constructs TypeScript allows for. + + + +```js title="eslint.config.js" +export default tseslint.config( + eslint.configs.recommended, + ...tseslint.configs.eslintRecommended, +); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: [ @@ -217,6 +387,9 @@ module.exports = { }; ``` + + + This config is automatically included if you use any of the recommended configurations. See [`configs/eslint-recommended.ts`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/eslint-recommended.ts) for the exact contents of this config. diff --git a/docs/linting/Legacy_ESLint_Setup.mdx b/docs/linting/Legacy_ESLint_Setup.mdx new file mode 100644 index 000000000000..9a9b5a21db46 --- /dev/null +++ b/docs/linting/Legacy_ESLint_Setup.mdx @@ -0,0 +1,92 @@ +--- +id: legacy-eslint-setup +title: Legacy ESLint Setup +--- + +## Quickstart + +These steps will get you running ESLint with our recommended rules on your TypeScript code as quickly as possible. + +:::note +This page is for [ESLint's legacy config format](https://eslint.org/docs/latest/use/configure/configuration-files). +See [Getting Started](../Getting_Started.mdx) for [ESLint's new "flat" configuration format](https://eslint.org/docs/latest/use/configure/configuration-files-new). +::: + +### Step 1: Installation + +First, install the required packages for [ESLint](https://eslint.org), [TypeScript](https://typescriptlang.org), and this plugin: + +```bash npm2yarn +npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript +``` + +### Step 2: Configuration + +Next, create a `.eslintrc.cjs` config file in the root of your project, and populate it with the following: + +```js title=".eslintrc.cjs" +/* eslint-env node */ +module.exports = { + extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint'], + root: true, +}; +``` + +:::info +If your project doesn't use ESM, naming the file as `.eslintrc.js` is fine. See [ESLint's Configuration Files docs](https://eslint.org/docs/user-guide/configuring/configuration-files) for more info. +::: + +### Step 3: Running ESLint + +Open a terminal to the root of your project and run the following command: + + + + +```bash +npx eslint . +``` + + + + +```bash +yarn eslint . +``` + + + + +```bash +pnpm eslint . +``` + + + + +ESLint will lint all TypeScript compatible files within the current folder, and will output the results to your terminal. + +## Details + +- `parser: '@typescript-eslint/parser'` tells ESLint to use the [`@typescript-eslint/parser`](../packages/Parser.mdx) package you installed to parse your source files. + - This is required, or else ESLint will throw errors as it tries to parse TypeScript code as if it were regular JavaScript. +- `plugins: ['@typescript-eslint']` tells ESLint to load the [`@typescript-eslint/eslint-plugin`](../packages/ESLint_Plugin.mdx) package as a plugin. + - This allows you to use typescript-eslint's rules within your codebase. +- `extends: [ ... ]` tells ESLint that your config extends the given configurations. + - `eslint:recommended` is ESLint's inbuilt "recommended" config - it turns on a small, sensible set of rules which lint for well-known best-practices. + - `plugin:@typescript-eslint/recommended` is our "recommended" config - it's similar to `eslint:recommended`, except it turns on TypeScript-specific rules from our plugin. +- `root: true` is a generally good ESLint practice to indicate this file is the root-level one used by the project and ESLint should not search beyond this directory for config files. + +## Next Steps + +We provide a plethora of powerful rules that utilize the power of TypeScript's type information. [Visit _Typed Rules_ for a setup guide](./Typed_Linting.mdx). + +If you're having problems getting this working, please have a look at our [Troubleshooting & FAQs](./Troubleshooting.mdx). + +### Documentation Resources + +- You can read more about configuring ESLint [in their documentation on configuration](https://eslint.org/docs/user-guide/configuring). +- You can read more about the rules provided by ESLint [in their documentation on their rules](https://eslint.org/docs/rules/). +- You can read more about the rules provided by typescript-eslint in [our rules documentation](/rules). diff --git a/docs/linting/Typed_Linting.mdx b/docs/linting/Typed_Linting.mdx index 066077bbf779..9b7743bb2b72 100644 --- a/docs/linting/Typed_Linting.mdx +++ b/docs/linting/Typed_Linting.mdx @@ -3,9 +3,40 @@ id: typed-linting title: Linting with Type Information --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + Some typescript-eslint rules utilize the awesome power of TypeScript's type checking APIs to provide much deeper insights into your code. To tap into TypeScript's additional powers, there are two small changes you need to make to your config file: + + + +```js title="eslint.config.js" +export default tseslint.config( + eslint.configs.recommended, + // Remove this line + ...tseslint.configs.recommended, + // Added lines start + ...tseslint.configs.recommendedTypeChecked, + languageOptions: { + parserOptions: { + project: true, + } + }, + // Added lines end +); +``` + +In more detail: + +- `tseslint.configs.recommendedTypeChecked` is another [recommended configuration](./Configurations.mdx) we provide. This one contains recommended rules that additionally require type information. +- `parserOption.project` tells our parser how to find the TSConfig for each source file (`true` indicates to find the closest `tsconfig.json` for each source file) + - If your project is a multi-package monorepo, see [our docs on configuring a monorepo](./typed-linting/Monorepos.mdx). + + + + ```js title=".eslintrc.cjs" /* eslint-env node */ module.exports = { @@ -28,11 +59,6 @@ module.exports = { }; ``` -:::caution -Your `.eslintrc.cjs` file may start receiving a parsing error about type information. -See [our TSConfig inclusion FAQ](./Troubleshooting.mdx#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file). -::: - In more detail: - `plugin:@typescript-eslint/recommended-type-checked` is another [recommended configuration](./Configurations.mdx) we provide. This one contains recommended rules that additionally require type information. @@ -40,18 +66,44 @@ In more detail: - If your project is a multi-package monorepo, see [our docs on configuring a monorepo](./typed-linting/Monorepos.mdx). - `parserOptions.tsconfigRootDir` tells our parser the absolute path of your project's root directory (see [Parser#tsconfigRootDir](../packages/Parser.mdx#tsconfigrootdir)). + + + +:::caution +Your ESLint config file may start receiving a parsing error about type information. +See [our TSConfig inclusion FAQ](./Troubleshooting.mdx#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file). +::: + With that done, run the same lint command you ran before. You may see new rules reporting errors based on type information! ## Specifying TSConfigs -The `parserOptions.project` option can be turned on with either: +The `project` option can be turned on with either: - `true`: to always use `tsconfig.json`s nearest to source files - `string | string[]`: any number of glob paths to match TSConfig files relative to `parserOptions.tsconfigRootDir`, or the current working directory if that is not provided For example, if you use a specific `tsconfig.eslint.json` for linting, you'd specify: + + + +```js title="eslint.config.js" +export default tseslint.config({ + // ... + languageOptions: { + parserOptions: { + project: './tsconfig.eslint.json', + }, + }, + // ... +}); +``` + + + + ```js title=".eslintrc.js" module.exports = { // ... @@ -62,6 +114,9 @@ module.exports = { }; ``` + + + See [the `@typescript-eslint/parser` docs for more details](../packages/Parser.mdx#project). :::note @@ -74,11 +129,36 @@ If your project is a multi-package monorepo, see [our docs on configuring a mono You can combine ESLint's [overrides](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-based-on-glob-patterns) config in conjunction with our [`disable-type-checked`](./Configurations.mdx#disable-type-checked) config to turn off type-aware linting on specific subsets of files. + + + +```js title="eslint.config.js" +export default tseslint.config( + eslint.configs.recommended, + ...tseslint.configs.recommendedTypeChecked, + { + languageOptions: { + parserOptions: { + project: true, + }, + }, + }, + // Added lines start + { + files: ['*.js'], + ...tseslint.configs.disableTypeChecked, + }, + // Added lines end +); +``` + + + + ```js title=".eslintrc.js" module.exports = { extends: [ 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-type-checked', ], plugins: ['@typescript-eslint'], @@ -99,6 +179,9 @@ module.exports = { }; ``` + + + :::info If you use type-aware rules from other plugins, you will need to manually disable these rules or use a premade config they provide to disable them. ::: diff --git a/docs/linting/typed-linting/Monorepos.mdx b/docs/linting/typed-linting/Monorepos.mdx index 6c172cb29398..030ca46db34f 100644 --- a/docs/linting/typed-linting/Monorepos.mdx +++ b/docs/linting/typed-linting/Monorepos.mdx @@ -3,6 +3,9 @@ id: monorepos title: Monorepo Configuration --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + If you're using a monorepo, these docs will help you figure out how to setup typed linting. If you don't want to use typed linting, then you can stop here - you don't need to do anything special. @@ -34,7 +37,7 @@ If its `include` paths cannot include all files to be linted, we suggest creatin } ``` -Be sure to update your `.eslintrc.js` to point at this new config file. +Be sure to update your ESLint configuration file to point at this new TSConfig. ## One `tsconfig.json` per package (and an optional one in the root) @@ -42,12 +45,32 @@ The `parserOptions.project` option introduced in [Linting with Type Information] Paths may be provided as [Node globs](https://github.com/isaacs/node-glob/blob/f5a57d3d6e19b324522a3fa5bdd5075fd1aa79d1/README.md#glob-primer). For each file being linted, the first matching project path will be used as its backing TSConfig. + + + +```js title="eslint.config.js" +export default tseslint.config( + eslint.configs.recommended, + ...tseslint.configs.recommendedTypeChecked, + languageOptions: { + parserOptions: { + // Remove this line + project: true, + // Add this line + project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'], + } + }, +); +``` + + + + ```js title=".eslintrc.js" /* eslint-env node */ module.exports = { extends: [ 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-type-checked', ], parser: '@typescript-eslint/parser', @@ -63,6 +86,9 @@ module.exports = { }; ``` + + + ### Wide globs in `parserOptions.project` Using wide globs `**` in your `parserOptions.project` may degrade linting performance. diff --git a/packages/website/sidebars/sidebar.base.js b/packages/website/sidebars/sidebar.base.js index 4184f99dad0f..b94a12c33660 100644 --- a/packages/website/sidebars/sidebar.base.js +++ b/packages/website/sidebars/sidebar.base.js @@ -30,6 +30,7 @@ module.exports = { }, type: 'category', }, + 'linting/legacy-eslint-setup', ], label: 'Getting Started', link: { From 5f394fa8684e34c7f83ee3a6edc3319f0df4b3b5 Mon Sep 17 00:00:00 2001 From: Josh Goldberg Date: Sun, 11 Feb 2024 20:59:26 -0500 Subject: [PATCH 2/3] Consistency and import.meta.dirname --- docs/linting/Configurations.mdx | 6 +---- docs/linting/Typed_Linting.mdx | 3 +++ docs/linting/typed-linting/Monorepos.mdx | 30 ++++++++++++++++++++++-- 3 files changed, 32 insertions(+), 7 deletions(-) diff --git a/docs/linting/Configurations.mdx b/docs/linting/Configurations.mdx index ccab35502478..7d997c3d5a88 100644 --- a/docs/linting/Configurations.mdx +++ b/docs/linting/Configurations.mdx @@ -59,11 +59,6 @@ export default tseslint.config( eslint.configs.recommended, ...tseslint.configs.recommendedTypeChecked, ...tseslint.configs.stylisticTypeChecked, - languageOptions: { - parserOptions: { - project: true, - } - }, ); ``` @@ -318,6 +313,7 @@ export default tseslint.config( languageOptions: { parserOptions: { project: true, + tsconfigDirName: import.meta.dirname, }, }, }, diff --git a/docs/linting/Typed_Linting.mdx b/docs/linting/Typed_Linting.mdx index 9b7743bb2b72..80cade7628c2 100644 --- a/docs/linting/Typed_Linting.mdx +++ b/docs/linting/Typed_Linting.mdx @@ -22,6 +22,7 @@ export default tseslint.config( languageOptions: { parserOptions: { project: true, + tsconfigRootDir: import.meta.dirname, } }, // Added lines end @@ -95,6 +96,7 @@ export default tseslint.config({ languageOptions: { parserOptions: { project: './tsconfig.eslint.json', + tsconfigRootDir: import.meta.dirname, }, }, // ... @@ -109,6 +111,7 @@ module.exports = { // ... parserOptions: { project: './tsconfig.eslint.json', + tsconfigRootDir: __dirname, }, // ... }; diff --git a/docs/linting/typed-linting/Monorepos.mdx b/docs/linting/typed-linting/Monorepos.mdx index 030ca46db34f..e58acd0a560b 100644 --- a/docs/linting/typed-linting/Monorepos.mdx +++ b/docs/linting/typed-linting/Monorepos.mdx @@ -58,6 +58,7 @@ export default tseslint.config( project: true, // Add this line project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'], + tsconfigRootDir: import.meta.dirname, } }, ); @@ -75,11 +76,11 @@ module.exports = { ], parser: '@typescript-eslint/parser', parserOptions: { - tsconfigRootDir: __dirname, // Remove this line project: true, // Add this line project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'], + tsconfigRootDir: import.meta.dirname, }, plugins: ['@typescript-eslint'], root: true, @@ -94,6 +95,28 @@ module.exports = { Using wide globs `**` in your `parserOptions.project` may degrade linting performance. Instead of globs that use `**` to recursively check all folders, prefer paths that use a single `*` at a time. + + + +```js title="eslint.config.js" +export default tseslint.config( + eslint.configs.recommended, + ...tseslint.configs.recommendedTypeChecked, + languageOptions: { + parserOptions: { + // Remove this line + project: ['./tsconfig.eslint.json', './**/tsconfig.json'], + // Add this line + project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'], + tsconfigRootDir: import.meta.dirname + } + }, +); +``` + + + + ```js title=".eslintrc.js" /* eslint-env node */ module.exports = { @@ -104,17 +127,20 @@ module.exports = { ], parser: '@typescript-eslint/parser', parserOptions: { - tsconfigRootDir: __dirname, // Remove this line project: ['./tsconfig.eslint.json', './**/tsconfig.json'], // Add this line project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'], + tsconfigRootDir: __dirname, }, plugins: ['@typescript-eslint'], root: true, }; ``` + + + See [Glob pattern in parser's option "project" slows down linting](https://github.com/typescript-eslint/typescript-eslint/issues/2611) for more details. ### Important note regarding large (> 10) multi-package monorepos From 8518a0be0d0bc3393c8993d7cf8eb233932d01ff Mon Sep 17 00:00:00 2001 From: Josh Goldberg Date: Mon, 12 Feb 2024 09:01:52 -0500 Subject: [PATCH 3/3] Added note for CJS/old-Node --- docs/linting/Typed_Linting.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/linting/Typed_Linting.mdx b/docs/linting/Typed_Linting.mdx index 80cade7628c2..43837894735d 100644 --- a/docs/linting/Typed_Linting.mdx +++ b/docs/linting/Typed_Linting.mdx @@ -29,6 +29,11 @@ export default tseslint.config( ); ``` +:::note +[`import.meta.dirname`](https://nodejs.org/api/esm.html#importmetadirname) is only present for ESM files in Node.js >=20.11.0 / >= 21.2.0.
+For CommonJS modules and/or older versions of Node.js, [use `__dirname` or an alternative](https://stackoverflow.com/questions/46745014/alternative-for-dirname-in-node-js-when-using-es6-modules). +::: + In more detail: - `tseslint.configs.recommendedTypeChecked` is another [recommended configuration](./Configurations.mdx) we provide. This one contains recommended rules that additionally require type information. pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy