Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: The ruleset has been migrated to ESLint flat config format and is therefore not compatible with ESLint v7 and using it with v8 requires a feature flag (`ESLINT_USE_FLAT_CONFIG=true`). Project configuration will also need to be completely reworked to use the new ruleset.
- Loading branch information
1 parent
e044364
commit a17b78f
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,106 @@ | ||
| # Migrating to flat config (ESLint v9 or >=8.56.0) | ||
|
|
||
| 🚨 As of now (February 2024) some plugins used in these rulesets are not yet compatible with ESLint v9. While it is recommended that you upgrade your projects to the flat config format it also means that if you do, you will need to stay on ESLint v8 until all plugins are updated. | ||
|
|
||
| --- | ||
|
|
||
| As of ESLint v9 the way ESLint is configured is going to change dramatically. Support for this new "flat" config format has been introduced to ESLint v8.56 behind a feature flag (`ESLINT_USE_FLAT_CONFIG=true` env var). This guide will help you rewrite your config to the new format. | ||
|
|
||
| ## Documentation | ||
|
|
||
| ESLint: https://eslint.org/docs/latest/use/configure/configuration-files-new | ||
|
|
||
| ## Old way | ||
|
|
||
| The old system was designed to support YAML, JSON, and JavaScript configuration files. You would use a ruleset or a plugin by providing its name (a string) and ESLint would look it up and use it. Also, ESLint automatically checked known JavaScript files and you had to go the extra mile to add support for ie. TypeScript (`.ts`) or React (`.jsx`) files. | ||
|
|
||
| ```js | ||
| // .eslintrc.js | ||
|
|
||
| // Example config. Notice how it's not clear which files are going to be linted by default. | ||
| // Also notice that the `extends` field is a string and ESLint needs to load that module. | ||
| /** @type {import("eslint").Linter.Config} */ | ||
| module.exports = { | ||
| reportUnusedDisableDirectives: true, | ||
| extends: [ | ||
| '@strv/node/v20', | ||
| '@strv/node/optional', | ||
| '@strv/node/style', | ||
| ], | ||
| rules: { | ||
| 'no-warning-comments': 'off', | ||
| }, | ||
|
|
||
| overrides: [{ | ||
| files: [ | ||
| '**/*.ts', | ||
| '**/*.spec.ts', | ||
| '**/*.e2e-spec.ts', | ||
| ], | ||
| extends: [ | ||
| '@strv/node/v20', | ||
| '@strv/node/optional', | ||
| '@strv/eslint-config-typescript', | ||
| '@strv/eslint-config-typescript/style', | ||
| ], | ||
| parserOptions: { | ||
| project: './tsconfig.json', | ||
| }, | ||
| ``` | ||
| ## New way | ||
| The new system has several advantages over the previous config format but it also requires a bit more effort to properly set up. Each configuration now encourages to specify the files to which it should apply and all rulesets and plugins are provided as regular imported types because the configuration now must be written in JavaScript. | ||
| ```js | ||
| // eslint.config.mjs | ||
|
|
||
| // This is a sample configuration for a TypeScript Node.js project. | ||
|
|
||
| // All plugins, parsers and rulesets must be imported as modules | ||
| import nodev20 from '@strv/eslint-config-node/v20' | ||
| import nodeopt from '@strv/eslint-config-node/optional' | ||
| import nodestyle from '@strv/eslint-config-node/style' | ||
| import ts from '@strv/eslint-config-typescript' | ||
| import tsopt from '@strv/eslint-config-typescript/optional' | ||
| import tsstyle from '@strv/eslint-config-typescript/style' | ||
| // Just to help us re-use the same globs multiple times | ||
| const files = { | ||
| ts: '**/*.ts', | ||
| mjs: '**/*.mjs', | ||
| } | ||
|
|
||
| // This will allow your IDE to provide autocomplete suggestions ✨ | ||
| /** @type {Array<import("eslint").Linter.FlatConfig>} */ | ||
| const config = [{ | ||
| linterOptions: { | ||
| reportUnusedDisableDirectives: true, | ||
| }, | ||
| ignores: ['**/*.js', '*.d.ts', '!.*.js', 'node_modules'], | ||
| }, { | ||
| // First, we provide a configuration object that supplies the tsconfig path to all plugins that might need it. | ||
| files: [files.ts], | ||
| languageOptions: { | ||
| parserOptions: { project: './tsconfig.json' }, | ||
| } }, | ||
| // Next, we apply all the rulesets, one by one, which we want to use for our TypeScript sources. | ||
| // ⚠️ Do not apply more than one ruleset inside the same configuration object as they would not get merged correctly. | ||
| { files: [files.ts], ...nodev20 }, | ||
| { files: [files.ts], ...nodeopt }, | ||
| { files: [files.ts], ...ts }, | ||
| { files: [files.ts], ...tsopt }, | ||
| { files: [files.ts], ...tsstyle }, | ||
|
|
||
| { files: [files.mjs], ...nodev20 }, | ||
| { files: [files.mjs], ...nodeopt }, | ||
| { files: [files.mjs], ...nodestyle }, | ||
| // Custom overrides | ||
| { files: [files.ts], | ||
| rules: { | ||
| 'no-warning-comments': 0, | ||
| '@typescript-eslint/naming-convention': 'off', | ||
| } }, | ||
| ] | ||
|
|
||
| export default config | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,3 @@ | ||
| # Documentation | ||
|
|
||
| Check out the subfolders to see the docs. 💪 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import node from './packages/eslint-config-node/index.mjs' | ||
| import optional from './packages/eslint-config-node/optional.mjs' | ||
| import style from './packages/eslint-config-node/style.mjs' | ||
|
|
||
| /** @type {Array<import("eslint").Linter.FlatConfig>} */ | ||
| const configs = [{ | ||
| linterOptions: { | ||
| reportUnusedDisableDirectives: true, | ||
| }, | ||
| ignores: [ | ||
| 'node_modules', | ||
| '!.*.js', | ||
| ], | ||
| }, | ||
| node, | ||
| optional, | ||
| style, | ||
| { files: ['**/*.js', '**/*.mjs'], languageOptions: { sourceType: 'module' } }, | ||
| { files: ['**/*.cjs'], languageOptions: { sourceType: 'commonjs' } }, | ||
| { rules: { | ||
| // TODO: Figure out why ESLint cannot resolve the @typescript-eslint packages | ||
|
Check warning on line 21 in eslint.config.js
|
||
| 'import/no-unresolved': 'off', | ||
| } }] | ||
|
|
||
| export default configs | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.