Add flat recommended config (#616)

recommended.js is a flat config version of the recommended config.

It follows the pattern of the legacy recommended config by automatically
configuring eslint-config-prettier.

Author: BPScott

.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,
+];
+```

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
 

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].*\\.$'],

package.json

@@ -19,6 +19,8 @@
   "files": [
     "eslint-plugin-prettier.d.ts",
     "eslint-plugin-prettier.js",
+    "recommended.d.ts",
+    "recommended.js",
     "worker.js"
   ],
   "keywords": [

recommended.d.ts

@@ -0,0 +1,5 @@
+import { Linter } from 'eslint';
+
+declare const recommendedConfig: Linter.FlatConfig;
+
+export = recommendedConfig;

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',
+  },
+};