From 48ae3d3879c604824c120099a5ef21b3a3495eaa Mon Sep 17 00:00:00 2001 From: Ben Scott Date: Sat, 2 Dec 2023 18:00:44 -0800 Subject: [PATCH 1/2] feat: add flat recommended config recommended.js is a flat config version of the recommended config. This diverges from the legacy config version of the recommended config as it does not automatically configure eslint-config-prettier. Configs extending other configs is complicated and not transparent. We should trust the user to configure their configs directly. In a future major change we should remove eslint-config-prettier from the legacy config too. --- .changeset/old-doors-kiss.md | 19 ++++++++++ README.md | 69 ++++++++++++++++-------------------- eslint.config.js | 8 ++--- package.json | 2 ++ recommended.d.ts | 5 +++ recommended.js | 15 ++++++++ 6 files changed, 73 insertions(+), 45 deletions(-) create mode 100644 .changeset/old-doors-kiss.md create mode 100644 recommended.d.ts create mode 100644 recommended.js diff --git a/.changeset/old-doors-kiss.md b/.changeset/old-doors-kiss.md new file mode 100644 index 00000000..5108e868 --- /dev/null +++ b/.changeset/old-doors-kiss.md @@ -0,0 +1,19 @@ +--- +'eslint-plugin-prettier': minor +--- + +Add recommended config for the flat config format. + +If you are using flat config, import the recommended config from `eslint-plugin-prettier/recommended`. Note that in contrast to the legacy recommended config, the flat recommended config does not add `eslint-config-prettier` automatically, consumers will need to explictly add that themselves. + +```js +// eslint.config.js +const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended'); +const eslintConfigPrettier = require('eslint-config-prettier'); + +module.exports = [ + // Any other config imports go at the top + eslintPluginPrettierRecommended, + eslintConfigPrettier, +]; +``` diff --git a/README.md b/README.md index b392f08f..5c3eb8fa 100644 --- a/README.md +++ b/README.md @@ -37,63 +37,54 @@ error: Delete `;` (prettier/prettier) at pkg/commons-atom/ActiveEditorRegistry.j ## Installation ```sh -npm install --save-dev eslint-plugin-prettier +npm install --save-dev eslint-plugin-prettier eslint-config-prettier npm install --save-dev --save-exact prettier ``` **_`eslint-plugin-prettier` does not install Prettier or ESLint for you._** _You must install these yourself._ -Then, in your `.eslintrc.json`: +This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect potential bugs. If another active ESLint rule disagrees with `prettier` about how code should be formatted, it will be impossible to avoid lint errors. You should use [`eslint-config-prettier``](https://github.com/prettier/eslint-config-prettier) to disable all formatting-related ESLint rules. + +## Configuration (legacy: `.eslintrc*`) + +For [legacy configuration](https://eslint.org/docs/latest/use/configure/configuration-files), this plugin ships with a `plugin:prettier/recommended` config that sets up both `eslint-plugin-prettier` and [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) in one go. + +Add `plugin:prettier/recommended` as the _last_ item in the extends array in your `.eslintrc*` config file, so that `eslint-config-prettier` has the opportunity to override other configs: ```json { - "plugins": ["prettier"], - "rules": { - "prettier/prettier": "error" - } + "extends": ["plugin:prettier/recommended"] } ``` -## Recommended Configuration - -This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect potential bugs. (If another active ESLint rule disagrees with `prettier` about how code should be formatted, it will be impossible to avoid lint errors.) You can use [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) to disable all formatting-related ESLint rules. - -This plugin ships with a `plugin:prettier/recommended` config that sets up both the plugin and `eslint-config-prettier` in one go. - -1. In addition to the above installation instructions, install `eslint-config-prettier`: +This will: - ```sh - npm install --save-dev eslint-config-prettier - ``` +- Enable the `prettier/prettier` rule. +- Disable the `arrow-body-style` and `prefer-arrow-callback` rules which are problematic with this plugin - see the below for why. +- Enable the `eslint-config-prettier` config which will turn off ESLint rules that conflict with Prettier. -2. Then you need to add `plugin:prettier/recommended` as the _last_ extension in your `.eslintrc.json`: +## Configuration (new: `eslint.config.js`) - ```json - { - "extends": ["plugin:prettier/recommended"] - } - ``` +For [flat configuration](https://eslint.org/docs/latest/use/configure/configuration-files-new), this plugin ships with an `eslint-plugin-prettier/recommended` config that sets up `eslint-plugin-prettier`. Note that unlike the legacy recommended configuration, the flat config does not configure [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) for you, and you should import and configure that within your own config. - You can then set Prettier's own options inside a `.prettierrc` file. +Import `eslint-plugin-prettier/recommended` and `eslint-config-prettier` and add them as the _last_ items in the configuration array in your `eslint.config.js` file so that `eslint-config-prettier` has the opportunity to override other configs: -Exactly what does `plugin:prettier/recommended` do? Well, this is what it expands to: - -```json -{ - "extends": ["prettier"], - "plugins": ["prettier"], - "rules": { - "prettier/prettier": "error", - "arrow-body-style": "off", - "prefer-arrow-callback": "off" - } -} +```js +const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended'); +const eslintConfigPrettier = require('eslint-config-prettier'); + +module.exports = [ + // Any other config imports go at the top + eslintPluginPrettierRecommended, + eslintConfigPrettier, +]; ``` -- `"extends": ["prettier"]` enables the config from `eslint-config-prettier`, which turns off some ESLint rules that conflict with Prettier. -- `"plugins": ["prettier"]` registers this plugin. -- `"prettier/prettier": "error"` turns on the rule provided by this plugin, which runs Prettier from within ESLint. -- `"arrow-body-style": "off"` and `"prefer-arrow-callback": "off"` turns off two ESLint core rules that unfortunately are problematic with this plugin – see the next section. +This will: + +- Enable the `prettier/prettier` rule. +- Disable the `arrow-body-style` and `prefer-arrow-callback` rules which are problematic with this plugin - see the below for why. +- Enable the `eslint-config-prettier` config which will turn off ESLint rules that conflict with Prettier. ## `Svelte` support diff --git a/eslint.config.js b/eslint.config.js index 9bd6543c..6d03e950 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -4,7 +4,7 @@ const eslintPluginEslintComments = require('@eslint-community/eslint-plugin-esli const eslintPluginEslintPluginRecommended = require('eslint-plugin-eslint-plugin/configs/recommended'); const eslintPluginMdx = require('eslint-plugin-mdx'); const eslintConfigPrettier = require('eslint-config-prettier'); -const eslintPluginPrettier = require('./eslint-plugin-prettier'); +const eslintPluginPrettierRecommended = require('./recommended'); module.exports = [ eslintConfigs.recommended, @@ -20,12 +20,8 @@ module.exports = [ eslintPluginEslintPluginRecommended, eslintPluginMdx.flat, eslintPluginMdx.flatCodeBlocks, + eslintPluginPrettierRecommended, eslintConfigPrettier, - // No built-in flat recommended config yet - { - plugins: { prettier: eslintPluginPrettier }, - rules: eslintPluginPrettier.configs.recommended.rules, - }, { rules: { 'eslint-plugin/report-message-format': ['error', '^[^a-z].*\\.$'], diff --git a/package.json b/package.json index 2d92bc23..ec1b5ac8 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ "files": [ "eslint-plugin-prettier.d.ts", "eslint-plugin-prettier.js", + "recommended.d.ts", + "recommended.js", "worker.js" ], "keywords": [ diff --git a/recommended.d.ts b/recommended.d.ts new file mode 100644 index 00000000..9ebc81d7 --- /dev/null +++ b/recommended.d.ts @@ -0,0 +1,5 @@ +import { Linter } from 'eslint'; + +declare const recommendedConfig: Linter.FlatConfig; + +export = recommendedConfig; diff --git a/recommended.js b/recommended.js new file mode 100644 index 00000000..9d5d418e --- /dev/null +++ b/recommended.js @@ -0,0 +1,15 @@ +const eslintPluginPrettier = require('./eslint-plugin-prettier'); + +// This diverges from the legacy format recommended config, as it does not +// extend from the `eslint-config-prettier` ruleset. When using the flat config +// the consumer should add eslint-config-prettier to their own root config. +module.exports = { + plugins: { + prettier: eslintPluginPrettier, + }, + rules: { + 'prettier/prettier': 'error', + 'arrow-body-style': 'off', + 'prefer-arrow-callback': 'off', + }, +}; From 3f05f8b63dd088aa405560a6b6f488a3be35894e Mon Sep 17 00:00:00 2001 From: Ben Scott Date: Tue, 19 Dec 2023 10:58:13 -0800 Subject: [PATCH 2/2] feat: extend eslint-config-prettier --- .changeset/old-doors-kiss.md | 4 +--- README.md | 8 +++----- eslint.config.js | 2 -- recommended.js | 8 +++++--- 4 files changed, 9 insertions(+), 13 deletions(-) diff --git a/.changeset/old-doors-kiss.md b/.changeset/old-doors-kiss.md index 5108e868..a4bb5d0e 100644 --- a/.changeset/old-doors-kiss.md +++ b/.changeset/old-doors-kiss.md @@ -4,16 +4,14 @@ Add recommended config for the flat config format. -If you are using flat config, import the recommended config from `eslint-plugin-prettier/recommended`. Note that in contrast to the legacy recommended config, the flat recommended config does not add `eslint-config-prettier` automatically, consumers will need to explictly add that themselves. +If you are using flat config, import the recommended config from `eslint-plugin-prettier/recommended`. Like the legacy format recommended config, this automatically includes the contents of `eslint-config-prettier`. ```js // eslint.config.js const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended'); -const eslintConfigPrettier = require('eslint-config-prettier'); module.exports = [ // Any other config imports go at the top eslintPluginPrettierRecommended, - eslintConfigPrettier, ]; ``` diff --git a/README.md b/README.md index 5c3eb8fa..0ec5c03a 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ npm install --save-dev --save-exact prettier **_`eslint-plugin-prettier` does not install Prettier or ESLint for you._** _You must install these yourself._ -This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect potential bugs. If another active ESLint rule disagrees with `prettier` about how code should be formatted, it will be impossible to avoid lint errors. You should use [`eslint-config-prettier``](https://github.com/prettier/eslint-config-prettier) to disable all formatting-related ESLint rules. +This plugin works best if you disable all other ESLint rules relating to code formatting, and only enable rules that detect potential bugs. If another active ESLint rule disagrees with `prettier` about how code should be formatted, it will be impossible to avoid lint errors. Our recommended configuration automatically enables [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) to disable all formatting-related ESLint rules. ## Configuration (legacy: `.eslintrc*`) @@ -65,18 +65,16 @@ This will: ## Configuration (new: `eslint.config.js`) -For [flat configuration](https://eslint.org/docs/latest/use/configure/configuration-files-new), this plugin ships with an `eslint-plugin-prettier/recommended` config that sets up `eslint-plugin-prettier`. Note that unlike the legacy recommended configuration, the flat config does not configure [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) for you, and you should import and configure that within your own config. +For [flat configuration](https://eslint.org/docs/latest/use/configure/configuration-files-new), this plugin ships with an `eslint-plugin-prettier/recommended` config that sets up both `eslint-plugin-prettier` and [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) in one go. -Import `eslint-plugin-prettier/recommended` and `eslint-config-prettier` and add them as the _last_ items in the configuration array in your `eslint.config.js` file so that `eslint-config-prettier` has the opportunity to override other configs: +Import `eslint-plugin-prettier/recommended` and add it as the _last_ item in the configuration array in your `eslint.config.js` file so that `eslint-config-prettier` has the opportunity to override other configs: ```js const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended'); -const eslintConfigPrettier = require('eslint-config-prettier'); module.exports = [ // Any other config imports go at the top eslintPluginPrettierRecommended, - eslintConfigPrettier, ]; ``` diff --git a/eslint.config.js b/eslint.config.js index 6d03e950..ad706b4e 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -3,7 +3,6 @@ const eslintPluginN = require('eslint-plugin-n'); const eslintPluginEslintComments = require('@eslint-community/eslint-plugin-eslint-comments'); const eslintPluginEslintPluginRecommended = require('eslint-plugin-eslint-plugin/configs/recommended'); const eslintPluginMdx = require('eslint-plugin-mdx'); -const eslintConfigPrettier = require('eslint-config-prettier'); const eslintPluginPrettierRecommended = require('./recommended'); module.exports = [ @@ -21,7 +20,6 @@ module.exports = [ eslintPluginMdx.flat, eslintPluginMdx.flatCodeBlocks, eslintPluginPrettierRecommended, - eslintConfigPrettier, { rules: { 'eslint-plugin/report-message-format': ['error', '^[^a-z].*\\.$'], diff --git a/recommended.js b/recommended.js index 9d5d418e..e20a9596 100644 --- a/recommended.js +++ b/recommended.js @@ -1,13 +1,15 @@ +const eslintConfigPrettier = require('eslint-config-prettier'); const eslintPluginPrettier = require('./eslint-plugin-prettier'); -// This diverges from the legacy format recommended config, as it does not -// extend from the `eslint-config-prettier` ruleset. When using the flat config -// the consumer should add eslint-config-prettier to their own root config. +// Merge the contents of eslint-config-prettier into every module.exports = { + ...eslintConfigPrettier, plugins: { + ...eslintConfigPrettier.plugins, prettier: eslintPluginPrettier, }, rules: { + ...eslintConfigPrettier.rules, 'prettier/prettier': 'error', 'arrow-body-style': 'off', 'prefer-arrow-callback': 'off',