Skip to content

Commit

Permalink
feat: add flat recommended config
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
BPScott committed Dec 4, 2023
1 parent 78c8b80 commit 48ae3d3
Show file tree
Hide file tree
Showing 6 changed files with 73 additions and 45 deletions.
19 changes: 19 additions & 0 deletions .changeset/old-doors-kiss.md
Original file line number Diff line number Diff line change
@@ -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,
];
```
69 changes: 30 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 2 additions & 6 deletions eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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].*\\.$'],
Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
"files": [
"eslint-plugin-prettier.d.ts",
"eslint-plugin-prettier.js",
"recommended.d.ts",
"recommended.js",
"worker.js"
],
"keywords": [
Expand Down
5 changes: 5 additions & 0 deletions recommended.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { Linter } from 'eslint';

declare const recommendedConfig: Linter.FlatConfig;

export = recommendedConfig;
15 changes: 15 additions & 0 deletions recommended.js
Original file line number Diff line number Diff line change
@@ -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',
},
};

0 comments on commit 48ae3d3

Please sign in to comment.