From 4ca41564b511932563b6a57a46573acd683d185e Mon Sep 17 00:00:00 2001 From: "Ghislain B." Date: Wed, 7 Aug 2024 18:14:14 -0400 Subject: [PATCH 1/5] docs: add basic config for new ESLint v9 flat configs - I had to search for a couple of hours to find out how to migrate to the new ESLint v9 flat config `eslint.config.mjs`, so I thought that I could add this to the docs to help others like me to get started with the new flat config --- docs/user-guide/index.md | 43 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/docs/user-guide/index.md b/docs/user-guide/index.md index e11c0dba8..15eb31d1b 100644 --- a/docs/user-guide/index.md +++ b/docs/user-guide/index.md @@ -47,6 +47,49 @@ export default [ See [the rule list](../rules/index.md) to get the `configs` & `rules` that this plugin provides. +#### Configurations with `typescript-esLint` & Prettier (`eslint.config.js`) + +```bash +npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue globals typescript-eslint +``` + +```ts +import eslint from '@eslint/js'; +import eslintConfigPrettier from 'eslint-config-prettier'; +import globals from 'globals'; +import pluginVue from 'eslint-plugin-vue'; +import tseslint from 'typescript-eslint'; + +export default tseslint.config( + { + ignores: ['*.d.ts', '**/coverage', '**/dist'], + }, + { + extends: [ + eslint.configs.recommended, + ...tseslint.configs.recommended, + ...pluginVue.configs['flat/recommended'], + ], + plugins: { + '@typescript-eslint': tseslint.plugin, + }, + files: ['**/*.{ts,vue}'], + languageOptions: { + ecmaVersion: 2021, + sourceType: 'module', + globals: globals.browser, + parserOptions: { + parser: tseslint.parser, + }, + }, + rules: { + // your rules + }, + }, + eslintConfigPrettier +); +``` + #### Bundle Configurations (`eslint.config.js`) This plugin provides some predefined configs. From ff7b4d623787bd6925328d1b4c2164abc8876a5b Mon Sep 17 00:00:00 2001 From: "Ghislain B." Date: Wed, 27 Nov 2024 09:37:53 -0500 Subject: [PATCH 2/5] docs: refactor as per PR comments --- docs/user-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user-guide/index.md b/docs/user-guide/index.md index 14fbfb712..de5479505 100644 --- a/docs/user-guide/index.md +++ b/docs/user-guide/index.md @@ -47,7 +47,7 @@ export default [ See [the rule list](../rules/index.md) to get the `configs` & `rules` that this plugin provides. -#### Configurations with `typescript-esLint` & Prettier (`eslint.config.js`) +#### Example configuration with [typescript-eslint](https://typescript-eslint.io/) and [Prettier](https://prettier.io/) ```bash npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue globals typescript-eslint From 9edfde5fa4940ccc0df89d0d5d935f2b4ba196f5 Mon Sep 17 00:00:00 2001 From: "Ghislain B." Date: Wed, 27 Nov 2024 09:38:45 -0500 Subject: [PATCH 3/5] docs: Apply suggestions from code review Co-authored-by: Flo Edelmann --- docs/user-guide/index.md | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/docs/user-guide/index.md b/docs/user-guide/index.md index de5479505..e6542b6e5 100644 --- a/docs/user-guide/index.md +++ b/docs/user-guide/index.md @@ -56,30 +56,25 @@ npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue globals t ```ts import eslint from '@eslint/js'; import eslintConfigPrettier from 'eslint-config-prettier'; +import eslintPluginVue from 'eslint-plugin-vue'; import globals from 'globals'; -import pluginVue from 'eslint-plugin-vue'; -import tseslint from 'typescript-eslint'; +import typescriptEslint from 'typescript-eslint'; export default tseslint.config( - { - ignores: ['*.d.ts', '**/coverage', '**/dist'], - }, + { ignores: ['*.d.ts', '**/coverage', '**/dist'] }, { extends: [ eslint.configs.recommended, - ...tseslint.configs.recommended, - ...pluginVue.configs['flat/recommended'], + ...typescriptEslint.configs.recommended, + ...eslintPluginVue.configs['flat/recommended'], ], - plugins: { - '@typescript-eslint': tseslint.plugin, - }, files: ['**/*.{ts,vue}'], languageOptions: { - ecmaVersion: 2021, + ecmaVersion: 'latest', sourceType: 'module', globals: globals.browser, parserOptions: { - parser: tseslint.parser, + parser: typescriptEslint.parser, }, }, rules: { From a8c4f3a45d5c7f56a38e04174edb2e4ac8aedfb8 Mon Sep 17 00:00:00 2001 From: "Ghislain B." Date: Wed, 27 Nov 2024 09:46:26 -0500 Subject: [PATCH 4/5] docs: remove extra space to fix linting --- docs/user-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user-guide/index.md b/docs/user-guide/index.md index e6542b6e5..66eece9d4 100644 --- a/docs/user-guide/index.md +++ b/docs/user-guide/index.md @@ -52,7 +52,7 @@ See [the rule list](../rules/index.md) to get the `configs` & `rules` that this ```bash npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue globals typescript-eslint ``` - + ```ts import eslint from '@eslint/js'; import eslintConfigPrettier from 'eslint-config-prettier'; From 2c0cd921a468bbe6ca8f8b2c8dd8134a2e2534ee Mon Sep 17 00:00:00 2001 From: "Ghislain B." Date: Wed, 27 Nov 2024 09:53:57 -0500 Subject: [PATCH 5/5] docs: refactor as per PR comments --- docs/user-guide/index.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/user-guide/index.md b/docs/user-guide/index.md index 66eece9d4..4cf65c928 100644 --- a/docs/user-guide/index.md +++ b/docs/user-guide/index.md @@ -47,6 +47,26 @@ export default [ See [the rule list](../rules/index.md) to get the `configs` & `rules` that this plugin provides. +#### Bundle Configurations (`eslint.config.js`) + +This plugin provides some predefined configs. +You can use the following configs by adding them to `eslint.config.js`. +(All flat configs in this plugin are provided as arrays, so spread syntax is required when combining them with other configs.) + +- `*.configs["flat/base"]` ... Settings and rules to enable correct ESLint parsing. +- Configurations for using Vue.js 3.x: + - `*.configs["flat/essential"]` ... `base`, plus rules to prevent errors or unintended behavior. + - `*.configs["flat/strongly-recommended"]` ... Above, plus rules to considerably improve code readability and/or dev experience. + - `*.configs["flat/recommended"]` ... Above, plus rules to enforce subjective community defaults to ensure consistency. +- Configurations for using Vue.js 2.x: + - `*.configs["flat/vue2-essential"]` ... `base`, plus rules to prevent errors or unintended behavior. + - `*.configs["flat/vue2-strongly-recommended"]` ... Above, plus rules to considerably improve code readability and/or dev experience. + - `*.configs["flat/vue2-recommended"]` ... Above, plus rules to enforce subjective community defaults to ensure consistency + +:::warning Reporting rules +By default, all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application - report warnings. What does it mean? By default - nothing, but if you want - you can set up a threshold and break the build after a certain amount of warnings, instead of any. More information [here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings). +::: + #### Example configuration with [typescript-eslint](https://typescript-eslint.io/) and [Prettier](https://prettier.io/) ```bash @@ -85,26 +105,6 @@ export default tseslint.config( ); ``` -#### Bundle Configurations (`eslint.config.js`) - -This plugin provides some predefined configs. -You can use the following configs by adding them to `eslint.config.js`. -(All flat configs in this plugin are provided as arrays, so spread syntax is required when combining them with other configs.) - -- `*.configs["flat/base"]` ... Settings and rules to enable correct ESLint parsing. -- Configurations for using Vue.js 3.x: - - `*.configs["flat/essential"]` ... `base`, plus rules to prevent errors or unintended behavior. - - `*.configs["flat/strongly-recommended"]` ... Above, plus rules to considerably improve code readability and/or dev experience. - - `*.configs["flat/recommended"]` ... Above, plus rules to enforce subjective community defaults to ensure consistency. -- Configurations for using Vue.js 2.x: - - `*.configs["flat/vue2-essential"]` ... `base`, plus rules to prevent errors or unintended behavior. - - `*.configs["flat/vue2-strongly-recommended"]` ... Above, plus rules to considerably improve code readability and/or dev experience. - - `*.configs["flat/vue2-recommended"]` ... Above, plus rules to enforce subjective community defaults to ensure consistency - -:::warning Reporting rules -By default, all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application - report warnings. What does it mean? By default - nothing, but if you want - you can set up a threshold and break the build after a certain amount of warnings, instead of any. More information [here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings). -::: - ### Configuration (`.eslintrc`) Use `.eslintrc.*` file to configure rules in ESLint < v9. See also: .