diff --git a/.changeset/old-doors-kiss.md b/.changeset/old-doors-kiss.md new file mode 100644 index 00000000..a4bb5d0e --- /dev/null +++ b/.changeset/old-doors-kiss.md @@ -0,0 +1,17 @@ +--- +'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`. 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'); + +module.exports = [ + // Any other config imports go at the top + eslintPluginPrettierRecommended, +]; +``` diff --git a/README.md b/README.md index b392f08f..0ec5c03a 100644 --- a/README.md +++ b/README.md @@ -37,63 +37,52 @@ 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. 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*`) + +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 both `eslint-plugin-prettier` and [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) in one go. - You can then set Prettier's own options inside a `.prettierrc` file. +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: -Exactly what does `plugin:prettier/recommended` do? Well, this is what it expands to: +```js +const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended'); -```json -{ - "extends": ["prettier"], - "plugins": ["prettier"], - "rules": { - "prettier/prettier": "error", - "arrow-body-style": "off", - "prefer-arrow-callback": "off" - } -} +module.exports = [ + // Any other config imports go at the top + eslintPluginPrettierRecommended, +]; ``` -- `"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..ad706b4e 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -3,8 +3,7 @@ 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 eslintPluginPrettier = require('./eslint-plugin-prettier'); +const eslintPluginPrettierRecommended = require('./recommended'); module.exports = [ eslintConfigs.recommended, @@ -20,12 +19,7 @@ module.exports = [ eslintPluginEslintPluginRecommended, eslintPluginMdx.flat, eslintPluginMdx.flatCodeBlocks, - eslintConfigPrettier, - // No built-in flat recommended config yet - { - plugins: { prettier: eslintPluginPrettier }, - rules: eslintPluginPrettier.configs.recommended.rules, - }, + eslintPluginPrettierRecommended, { 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..e20a9596 --- /dev/null +++ b/recommended.js @@ -0,0 +1,17 @@ +const eslintConfigPrettier = require('eslint-config-prettier'); +const eslintPluginPrettier = require('./eslint-plugin-prettier'); + +// 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', + }, +};