From 0f725de4524d976e96191a657bb13e92600b7032 Mon Sep 17 00:00:00 2001 From: Miroslav Jonas Date: Mon, 14 Aug 2023 15:28:58 +0200 Subject: [PATCH 1/4] docs(linter): add recipe for flat config converter --- docs/generated/manifests/menus.json | 24 +++++++++++++++ docs/generated/manifests/nx.json | 30 +++++++++++++++++++ docs/generated/manifests/tags.json | 18 +++++++++++ .../packages/linter/documents/overview.md | 1 + .../generators/convert-to-flat-config.json | 2 +- docs/map.json | 6 ++++ docs/shared/packages/linter/linter-plugin.md | 1 + .../tips-n-tricks/migrating-to-flat-eslint.md | 25 ++++++++++++++++ docs/shared/reference/sitemap.md | 1 + .../convert-to-flat-config/schema.json | 2 +- 10 files changed, 108 insertions(+), 2 deletions(-) create mode 100644 docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index bd54cc163b40f..8c7c00fe8a1c6 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -2188,6 +2188,14 @@ "isExternal": false, "children": [], "disableCollapsible": false + }, + { + "name": "Switching to the ESLint's flat config format", + "path": "/recipes/tips-n-tricks/flat-config", + "id": "flat-config", + "isExternal": false, + "children": [], + "disableCollapsible": false } ], "disableCollapsible": false @@ -3252,6 +3260,14 @@ "isExternal": false, "children": [], "disableCollapsible": false + }, + { + "name": "Switching to the ESLint's flat config format", + "path": "/recipes/tips-n-tricks/flat-config", + "id": "flat-config", + "isExternal": false, + "children": [], + "disableCollapsible": false } ], "disableCollapsible": false @@ -3400,6 +3416,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "Switching to the ESLint's flat config format", + "path": "/recipes/tips-n-tricks/flat-config", + "id": "flat-config", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Troubleshooting", "path": "/recipes/troubleshooting", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index cb9eab73c90a6..b1873e20e452c 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -2728,6 +2728,16 @@ "isExternal": false, "path": "/recipes/tips-n-tricks/yarn-pnp", "tags": ["yarn", "Plug and Play"] + }, + { + "id": "flat-config", + "name": "Switching to the ESLint's flat config format", + "description": "", + "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", + "itemList": [], + "isExternal": false, + "path": "/recipes/tips-n-tricks/flat-config", + "tags": ["eslint", "flat config"] } ], "isExternal": false, @@ -4056,6 +4066,16 @@ "isExternal": false, "path": "/recipes/tips-n-tricks/yarn-pnp", "tags": ["yarn", "Plug and Play"] + }, + { + "id": "flat-config", + "name": "Switching to the ESLint's flat config format", + "description": "", + "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", + "itemList": [], + "isExternal": false, + "path": "/recipes/tips-n-tricks/flat-config", + "tags": ["eslint", "flat config"] } ], "isExternal": false, @@ -4242,6 +4262,16 @@ "path": "/recipes/tips-n-tricks/yarn-pnp", "tags": ["yarn", "Plug and Play"] }, + "/recipes/tips-n-tricks/flat-config": { + "id": "flat-config", + "name": "Switching to the ESLint's flat config format", + "description": "", + "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", + "itemList": [], + "isExternal": false, + "path": "/recipes/tips-n-tricks/flat-config", + "tags": ["eslint", "flat config"] + }, "/recipes/troubleshooting": { "id": "troubleshooting", "name": "Troubleshooting", diff --git a/docs/generated/manifests/tags.json b/docs/generated/manifests/tags.json index f40665f51bb18..f62c771cbe51b 100644 --- a/docs/generated/manifests/tags.json +++ b/docs/generated/manifests/tags.json @@ -952,6 +952,24 @@ "path": "/recipes/tips-n-tricks/yarn-pnp" } ], + "eslint": [ + { + "description": "", + "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", + "id": "flat-config", + "name": "Switching to the ESLint's flat config format", + "path": "/recipes/tips-n-tricks/flat-config" + } + ], + "flat config": [ + { + "description": "", + "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", + "id": "flat-config", + "name": "Switching to the ESLint's flat config format", + "path": "/recipes/tips-n-tricks/flat-config" + } + ], "deno": [ { "description": "", diff --git a/docs/generated/packages/linter/documents/overview.md b/docs/generated/packages/linter/documents/overview.md index 46575ac261db2..5b576883e4925 100644 --- a/docs/generated/packages/linter/documents/overview.md +++ b/docs/generated/packages/linter/documents/overview.md @@ -28,6 +28,7 @@ nx lint my-lib ## Utils +- [convert-to-flat-config](/packages/linter/generators/convert-to-flat-config) - Converts the workspace's [ESLint](https://eslint.org/) configs to the new [Flat Config](https://eslint.org/blog/2022/08/new-config-system-part-2) - **Deprecated** [convert-tslint-to-eslint](/packages/angular/generators/convert-tslint-to-eslint) - Converts a project linter from [TSLint](https://palantir.github.io/tslint/) to [ESLint](https://eslint.org/) ## ESLint plugin diff --git a/docs/generated/packages/linter/generators/convert-to-flat-config.json b/docs/generated/packages/linter/generators/convert-to-flat-config.json index c06ebc0738ec5..3fa5108b24df5 100644 --- a/docs/generated/packages/linter/generators/convert-to-flat-config.json +++ b/docs/generated/packages/linter/generators/convert-to-flat-config.json @@ -5,7 +5,7 @@ "$schema": "http://json-schema.org/schema", "$id": "ConvertToFlatConfig", "cli": "nx", - "description": "Convert an Nx workspace to a Flat ESLint config.", + "description": "Convert an Nx workspace ESLint configs to a Flat config.", "type": "object", "properties": { "skipFormat": { diff --git a/docs/map.json b/docs/map.json index cd73e68a133d9..b91996a9e8b6f 100644 --- a/docs/map.json +++ b/docs/map.json @@ -926,6 +926,12 @@ "id": "yarn-pnp", "tags": ["yarn", "Plug and Play"], "file": "shared/recipes/yarn-pnp" + }, + { + "name": "Switching to the ESLint's flat config format", + "id": "flat-config", + "tags": ["eslint", "flat config"], + "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint" } ] }, diff --git a/docs/shared/packages/linter/linter-plugin.md b/docs/shared/packages/linter/linter-plugin.md index 46575ac261db2..5b576883e4925 100644 --- a/docs/shared/packages/linter/linter-plugin.md +++ b/docs/shared/packages/linter/linter-plugin.md @@ -28,6 +28,7 @@ nx lint my-lib ## Utils +- [convert-to-flat-config](/packages/linter/generators/convert-to-flat-config) - Converts the workspace's [ESLint](https://eslint.org/) configs to the new [Flat Config](https://eslint.org/blog/2022/08/new-config-system-part-2) - **Deprecated** [convert-tslint-to-eslint](/packages/angular/generators/convert-tslint-to-eslint) - Converts a project linter from [TSLint](https://palantir.github.io/tslint/) to [ESLint](https://eslint.org/) ## ESLint plugin diff --git a/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md new file mode 100644 index 0000000000000..691005c2f5e78 --- /dev/null +++ b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md @@ -0,0 +1,25 @@ +# Switching to the ESLint's flat config format + +Version 8 of ESLint introduced a new configuration format called [Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files-new). The purpose of this format is to: + +- propose a single configuration format (in contrast to the existing `JSON`, `Yaml` and `JS`-based configs) +- enforce explicit native loading (instead of the implicit imports in `JSON` and `Yaml`) +- use flat cascading of rules (instead of a mix of rules and overrides) + +For additional details, head over to their [official blog post](https://eslint.org/blog/2022/08/new-config-system-part-2/). + +Since version 16.7.0, Nx supports usage of flat config in the [@nx/linter:eslint](/packages/linter/executors/eslint) executor and `@nx/*` generators and provides an automated config conversion from `.eslintrc.json` config files. + +## Converting workspace from .eslintrc.json to flat config + +To convert workspace ESLint configurations from the default `.eslintrc.json` to new flat config you need to run: + +```shell + nx g @nx/linter:convert-to-flat-config +``` + +The generator will go through all the projects and convert their configurations to the new format. It will also convert the base `.eslintrc.json` and `.eslintignore`. + +## Correctness and best practices + +The purpose of this generator is to create a flat config that works the same way, as the original `JSON` config did. Depending on the complexity of your original config, it may be using `FlatCompat` for providing a compatibility wrapper around parts of the original config. You can improve those by following the [official migration guide](https://eslint.org/docs/latest/use/configure/migration-guide). diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index c94b69a0cf841..a3c2533635686 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -160,6 +160,7 @@ - [Altering Migration Process](/recipes/tips-n-tricks/advanced-update) - [Running Custom Commands](/recipes/tips-n-tricks/run-commands-executor) - [Using Yarn PnP](/recipes/tips-n-tricks/yarn-pnp) + - [Switching to the ESLint's flat config format](/recipes/tips-n-tricks/flat-config) - [Troubleshooting](/recipes/troubleshooting) - [Resolve Circular Dependencies](/recipes/troubleshooting/resolve-circular-dependencies) - [Troubleshooting Nx Install Issues](/recipes/troubleshooting/troubleshoot-nx-install-issues) diff --git a/packages/linter/src/generators/convert-to-flat-config/schema.json b/packages/linter/src/generators/convert-to-flat-config/schema.json index 55297951cf0de..be30421c6039d 100644 --- a/packages/linter/src/generators/convert-to-flat-config/schema.json +++ b/packages/linter/src/generators/convert-to-flat-config/schema.json @@ -2,7 +2,7 @@ "$schema": "http://json-schema.org/schema", "$id": "ConvertToFlatConfig", "cli": "nx", - "description": "Convert an Nx workspace to a Flat ESLint config.", + "description": "Convert an Nx workspace ESLint configs to a Flat config.", "type": "object", "properties": { "skipFormat": { From 109c2ebbebd126f913ee4a9387b8dae23d985039 Mon Sep 17 00:00:00 2001 From: Miroslav Jonas Date: Mon, 21 Aug 2023 20:37:15 +0200 Subject: [PATCH 2/4] feat(linter): add review notes --- docs/generated/manifests/menus.json | 6 +++--- docs/generated/manifests/nx.json | 6 +++--- docs/generated/manifests/packages.json | 2 +- docs/generated/manifests/tags.json | 4 ++-- docs/generated/packages-metadata.json | 2 +- .../linter/generators/convert-to-flat-config.json | 4 ++-- docs/map.json | 2 +- .../recipes/tips-n-tricks/migrating-to-flat-eslint.md | 8 ++++---- docs/shared/reference/sitemap.md | 2 +- packages/linter/generators.json | 2 +- .../src/generators/convert-to-flat-config/schema.json | 2 +- 11 files changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 8c7c00fe8a1c6..3d13d631095c0 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -2190,7 +2190,7 @@ "disableCollapsible": false }, { - "name": "Switching to the ESLint's flat config format", + "name": "Switching to ESLint's flat config format", "path": "/recipes/tips-n-tricks/flat-config", "id": "flat-config", "isExternal": false, @@ -3262,7 +3262,7 @@ "disableCollapsible": false }, { - "name": "Switching to the ESLint's flat config format", + "name": "Switching to ESLint's flat config format", "path": "/recipes/tips-n-tricks/flat-config", "id": "flat-config", "isExternal": false, @@ -3417,7 +3417,7 @@ "disableCollapsible": false }, { - "name": "Switching to the ESLint's flat config format", + "name": "Switching to ESLint's flat config format", "path": "/recipes/tips-n-tricks/flat-config", "id": "flat-config", "isExternal": false, diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index b1873e20e452c..e63e567d9ef54 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -2731,7 +2731,7 @@ }, { "id": "flat-config", - "name": "Switching to the ESLint's flat config format", + "name": "Switching to ESLint's flat config format", "description": "", "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", "itemList": [], @@ -4069,7 +4069,7 @@ }, { "id": "flat-config", - "name": "Switching to the ESLint's flat config format", + "name": "Switching to ESLint's flat config format", "description": "", "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", "itemList": [], @@ -4264,7 +4264,7 @@ }, "/recipes/tips-n-tricks/flat-config": { "id": "flat-config", - "name": "Switching to the ESLint's flat config format", + "name": "Switching to ESLint's flat config format", "description": "", "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", "itemList": [], diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json index faf7598da242f..9928f0eecfdcd 100644 --- a/docs/generated/manifests/packages.json +++ b/docs/generated/manifests/packages.json @@ -1142,7 +1142,7 @@ "type": "generator" }, "/packages/linter/generators/convert-to-flat-config": { - "description": "Convert an Nx workspace to a Flat ESLint config.", + "description": "Convert an Nx workspace's ESLint configs to use Flat Config.", "file": "generated/packages/linter/generators/convert-to-flat-config.json", "hidden": false, "name": "convert-to-flat-config", diff --git a/docs/generated/manifests/tags.json b/docs/generated/manifests/tags.json index f62c771cbe51b..1c15940d9b950 100644 --- a/docs/generated/manifests/tags.json +++ b/docs/generated/manifests/tags.json @@ -957,7 +957,7 @@ "description": "", "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", "id": "flat-config", - "name": "Switching to the ESLint's flat config format", + "name": "Switching to ESLint's flat config format", "path": "/recipes/tips-n-tricks/flat-config" } ], @@ -966,7 +966,7 @@ "description": "", "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint", "id": "flat-config", - "name": "Switching to the ESLint's flat config format", + "name": "Switching to ESLint's flat config format", "path": "/recipes/tips-n-tricks/flat-config" } ], diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index ab7e810ac3410..dc6a1b3de2866 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -1125,7 +1125,7 @@ "type": "generator" }, { - "description": "Convert an Nx workspace to a Flat ESLint config.", + "description": "Convert an Nx workspace's ESLint configs to use Flat Config.", "file": "generated/packages/linter/generators/convert-to-flat-config.json", "hidden": false, "name": "convert-to-flat-config", diff --git a/docs/generated/packages/linter/generators/convert-to-flat-config.json b/docs/generated/packages/linter/generators/convert-to-flat-config.json index 3fa5108b24df5..0bbddebb1d165 100644 --- a/docs/generated/packages/linter/generators/convert-to-flat-config.json +++ b/docs/generated/packages/linter/generators/convert-to-flat-config.json @@ -5,7 +5,7 @@ "$schema": "http://json-schema.org/schema", "$id": "ConvertToFlatConfig", "cli": "nx", - "description": "Convert an Nx workspace ESLint configs to a Flat config.", + "description": "Convert an Nx workspace's ESLint configs to use Flat Config.", "type": "object", "properties": { "skipFormat": { @@ -19,7 +19,7 @@ "required": [], "presets": [] }, - "description": "Convert an Nx workspace to a Flat ESLint config.", + "description": "Convert an Nx workspace's ESLint configs to use Flat Config.", "implementation": "/packages/linter/src/generators/convert-to-flat-config/generator.ts", "aliases": [], "hidden": false, diff --git a/docs/map.json b/docs/map.json index b91996a9e8b6f..0d66297e62247 100644 --- a/docs/map.json +++ b/docs/map.json @@ -928,7 +928,7 @@ "file": "shared/recipes/yarn-pnp" }, { - "name": "Switching to the ESLint's flat config format", + "name": "Switching to ESLint's flat config format", "id": "flat-config", "tags": ["eslint", "flat config"], "file": "shared/recipes/tips-n-tricks/migrating-to-flat-eslint" diff --git a/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md index 691005c2f5e78..2807d3755afb0 100644 --- a/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md +++ b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md @@ -1,6 +1,6 @@ -# Switching to the ESLint's flat config format +# Switching to ESLint's flat config format -Version 8 of ESLint introduced a new configuration format called [Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files-new). The purpose of this format is to: +Version 8 of ESLint introduced a new configuration format called [Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files-new). The next major version will use this config format by default. The purpose of this format is to: - propose a single configuration format (in contrast to the existing `JSON`, `Yaml` and `JS`-based configs) - enforce explicit native loading (instead of the implicit imports in `JSON` and `Yaml`) @@ -8,7 +8,7 @@ Version 8 of ESLint introduced a new configuration format called [Flat Config](h For additional details, head over to their [official blog post](https://eslint.org/blog/2022/08/new-config-system-part-2/). -Since version 16.7.0, Nx supports usage of flat config in the [@nx/linter:eslint](/packages/linter/executors/eslint) executor and `@nx/*` generators and provides an automated config conversion from `.eslintrc.json` config files. +Since version 16.7.0, Nx supports the usage of flat config in the [@nx/linter:eslint](/packages/linter/executors/eslint) executor and `@nx/*` generators, and provides an automated config conversion from `.eslintrc.json` config files. ## Converting workspace from .eslintrc.json to flat config @@ -22,4 +22,4 @@ The generator will go through all the projects and convert their configurations ## Correctness and best practices -The purpose of this generator is to create a flat config that works the same way, as the original `JSON` config did. Depending on the complexity of your original config, it may be using `FlatCompat` for providing a compatibility wrapper around parts of the original config. You can improve those by following the [official migration guide](https://eslint.org/docs/latest/use/configure/migration-guide). +The purpose of this generator is to create a flat config that works the same way, as the original `JSON` config did. Depending on the complexity of your original config, it may be using the `FlatCompat` utility to provide a compatibility wrapper around parts of the original config. You can improve those by following the [official migration guide](https://eslint.org/docs/latest/use/configure/migration-guide). diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index a3c2533635686..66b302c037fbb 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -160,7 +160,7 @@ - [Altering Migration Process](/recipes/tips-n-tricks/advanced-update) - [Running Custom Commands](/recipes/tips-n-tricks/run-commands-executor) - [Using Yarn PnP](/recipes/tips-n-tricks/yarn-pnp) - - [Switching to the ESLint's flat config format](/recipes/tips-n-tricks/flat-config) + - [Switching to ESLint's flat config format](/recipes/tips-n-tricks/flat-config) - [Troubleshooting](/recipes/troubleshooting) - [Resolve Circular Dependencies](/recipes/troubleshooting/resolve-circular-dependencies) - [Troubleshooting Nx Install Issues](/recipes/troubleshooting/troubleshoot-nx-install-issues) diff --git a/packages/linter/generators.json b/packages/linter/generators.json index 8a40aeba824ae..7cfdf3c9f8062 100644 --- a/packages/linter/generators.json +++ b/packages/linter/generators.json @@ -29,7 +29,7 @@ "convert-to-flat-config": { "factory": "./src/generators/convert-to-flat-config/generator", "schema": "./src/generators/convert-to-flat-config/schema.json", - "description": "Convert an Nx workspace to a Flat ESLint config." + "description": "Convert an Nx workspace's ESLint configs to use Flat Config." } } } diff --git a/packages/linter/src/generators/convert-to-flat-config/schema.json b/packages/linter/src/generators/convert-to-flat-config/schema.json index be30421c6039d..c74b85a892661 100644 --- a/packages/linter/src/generators/convert-to-flat-config/schema.json +++ b/packages/linter/src/generators/convert-to-flat-config/schema.json @@ -2,7 +2,7 @@ "$schema": "http://json-schema.org/schema", "$id": "ConvertToFlatConfig", "cli": "nx", - "description": "Convert an Nx workspace ESLint configs to a Flat config.", + "description": "Convert an Nx workspace's ESLint configs to use Flat Config.", "type": "object", "properties": { "skipFormat": { From 922a1788ff83df7272fa95cd809c5f9e06313ff3 Mon Sep 17 00:00:00 2001 From: Miroslav Jonas Date: Mon, 21 Aug 2023 21:28:50 +0200 Subject: [PATCH 3/4] feat(linter): add review notes 2 --- .../tips-n-tricks/migrating-to-flat-eslint.md | 158 +++++++++++++++++- 1 file changed, 153 insertions(+), 5 deletions(-) diff --git a/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md index 2807d3755afb0..a53ab751960c3 100644 --- a/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md +++ b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md @@ -2,17 +2,165 @@ Version 8 of ESLint introduced a new configuration format called [Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files-new). The next major version will use this config format by default. The purpose of this format is to: -- propose a single configuration format (in contrast to the existing `JSON`, `Yaml` and `JS`-based configs) +- push towards a single configuration format (in contrast to the existing `JSON`, `Yaml` and `JS`-based configs) - enforce explicit native loading (instead of the implicit imports in `JSON` and `Yaml`) -- use flat cascading of rules (instead of a mix of rules and overrides) +- use a flat cascading of rules (instead of a mix of rules and overrides) -For additional details, head over to their [official blog post](https://eslint.org/blog/2022/08/new-config-system-part-2/). +See below direct comparison between `JSON`, `JS` and `Flat` config: +{% tabs %} +{% tab label="eslint.config.js" %} + +```js +// the older version were magically interpreting all the imports +// in flat config we do it explicitly +const nxPlugin = require('@nx/eslint-plugin'); +const js = require('@eslint/js'); +const baseConfig = require('./eslint.base.config.js'); +const globals = require('globals'); +const jsoncParser = require('jsonc-eslint-parser'); +const tsParser = require('@typescript-eslint/parser'); + +module.exports = [ + js.configs.recommended, + // this will spread the export blocks from the base config + ...baseConfig, + { plugins: { '@nx': nxPlugin } }, + { + languageOptions: { + parser: tsParser, + globals: { + ...globals.node, + }, + }, + rules: { + '@typescript-eslint/explicit-module-boundary-types': ['error'], + }, + }, + // there are no overrides, all the config blocks are "flat" + { + files: ['*.json'], + languageOptions: { + parser: jsoncParser, + }, + rules: {}, + }, + { + files: ['*.ts', '*.tsx', '*.js', '*.jsx'], + rules: { + '@nx/enforce-module-boundaries': [ + 'error', + { + enforceBuildableLibDependency: true, + allow: [], + depConstraints: [ + { + sourceTag: '*', + onlyDependOnLibsWithTags: ['*'], + }, + ], + }, + ], + }, + }, +]; +``` + +{% /tab %} +{% tab label=".eslintrc.json" %} + +```json +{ + "root": true, + "parser": "@typescript-eslint/parser", + "env": { + "node": true + }, + "extends": ["eslint:recommended", "./.eslintrc.base.json"], + "plugins": ["@nx"], + "rules": { + "@typescript-eslint/explicit-module-boundary-types": "error" + }, + "overrides": [ + { + "files": ["*.json"], + "parser": "jsonc-eslint-parser", + "rules": {} + }, + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": { + "@nx/enforce-module-boundaries": [ + "error", + { + "enforceBuildableLibDependency": true, + "allow": [], + "depConstraints": [ + { + "sourceTag": "*", + "onlyDependOnLibsWithTags": ["*"] + } + ] + } + ] + } + } + ] +} +``` + +{% /tab %} +{% tab label=".eslintrc.js" %} + +```js +module.exports = { + root: true, + env: { + node: true, + }, + parser: '@typescript-eslint/parser', + extends: ['eslint:recommended', './.eslintrc.base.js'], + plugins: ['@nx'], + rules: { + '@typescript-eslint/explicit-module-boundary-types': ['error'], + }, + overrides: [ + { + files: ['*.json'], + parser: 'jsonc-eslint-parser', + rules: {}, + }, + { + files: ['*.ts', '*.tsx', '*.js', '*.jsx'], + rules: { + '@nx/enforce-module-boundaries': [ + 'error', + { + enforceBuildableLibDependency: true, + allow: [], + depConstraints: [ + { + sourceTag: '*', + onlyDependOnLibsWithTags: ['*'], + }, + ], + }, + ], + }, + }, + ], +}; +``` + +{% /tab %} +{% /tabs %} + +For additional details, head over to [ESLint's official blog post](https://eslint.org/blog/2022/08/new-config-system-part-2/). Since version 16.7.0, Nx supports the usage of flat config in the [@nx/linter:eslint](/packages/linter/executors/eslint) executor and `@nx/*` generators, and provides an automated config conversion from `.eslintrc.json` config files. ## Converting workspace from .eslintrc.json to flat config -To convert workspace ESLint configurations from the default `.eslintrc.json` to new flat config you need to run: +To convert workspace ESLint configurations from the default `.eslintrc.json` to the new flat config you need to run: ```shell nx g @nx/linter:convert-to-flat-config @@ -22,4 +170,4 @@ The generator will go through all the projects and convert their configurations ## Correctness and best practices -The purpose of this generator is to create a flat config that works the same way, as the original `JSON` config did. Depending on the complexity of your original config, it may be using the `FlatCompat` utility to provide a compatibility wrapper around parts of the original config. You can improve those by following the [official migration guide](https://eslint.org/docs/latest/use/configure/migration-guide). +The purpose of this generator is to create a flat config that works the same way as the original `JSON` config did. Depending on the complexity of your original config, it may be using the `FlatCompat` utility to provide a compatibility wrapper around parts of the original config. You can improve those by following the [official migration guide](https://eslint.org/docs/latest/use/configure/migration-guide). From 5bd026c2df9e40e037de6e303d9c7a056945228a Mon Sep 17 00:00:00 2001 From: Miroslav Jonas Date: Mon, 21 Aug 2023 22:32:41 +0200 Subject: [PATCH 4/4] fix(linter): improve doc links --- .../tips-n-tricks/migrating-to-flat-eslint.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md index a53ab751960c3..8448e739665c2 100644 --- a/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md +++ b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md @@ -6,12 +6,12 @@ Version 8 of ESLint introduced a new configuration format called [Flat Config](h - enforce explicit native loading (instead of the implicit imports in `JSON` and `Yaml`) - use a flat cascading of rules (instead of a mix of rules and overrides) -See below direct comparison between `JSON`, `JS` and `Flat` config: +See below a direct comparison between `JSON`, `JS` and `Flat` config: {% tabs %} -{% tab label="eslint.config.js" %} +{% tab label="Flat" %} -```js -// the older version were magically interpreting all the imports +```js {% fileName="eslint.config.js" %} +// the older versions were magically interpreting all the imports // in flat config we do it explicitly const nxPlugin = require('@nx/eslint-plugin'); const js = require('@eslint/js'); @@ -66,9 +66,9 @@ module.exports = [ ``` {% /tab %} -{% tab label=".eslintrc.json" %} +{% tab label="JSON" %} -```json +```json {% fileName=".eslintrc.json" %} { "root": true, "parser": "@typescript-eslint/parser", @@ -109,9 +109,9 @@ module.exports = [ ``` {% /tab %} -{% tab label=".eslintrc.js" %} +{% tab label="JS" %} -```js +```js {% fileName=".eslintrc.js" %} module.exports = { root: true, env: {