Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support flat config system #592

Closed
wants to merge 16 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 21 additions & 0 deletions .changeset/kind-apples-itch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
'eslint-plugin-prettier': minor
---

feat: support ESLint flat config system

`eslint-plugin-prettier` can be used in the flat config format like this with CJS:

```js
const prettier = require('eslint-plugin-prettier');

module.exports = [prettier.configs['recommended-flat']];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
module.exports = [prettier.configs['recommended-flat']];
module.exports = [prettier.config.flatRecommended];

I still recommend this config name.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But even better with a separate flat.js file, right?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have such preference, a clear document is enough IMO.

```

Or with ESM:

```js
import prettier from 'eslint-plugin-prettier';

export default [prettier.configs['recommended-flat']];
```
45 changes: 33 additions & 12 deletions eslint-plugin-prettier.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const {
showInvisibles,
generateDifferences,
} = require('prettier-linter-helpers');
const { name, version } = require('./package.json');

// ------------------------------------------------------------------------------
// Constants
Expand Down Expand Up @@ -77,20 +78,14 @@ function reportDifference(context, difference) {
// ------------------------------------------------------------------------------

/**
* @type {Plugin}
* Type hint `configs` key as non-nullable to avoid type-checking errors in when
* assigning to `eslintPluginPrettier.configs` below
*
* @type {Plugin & {configs: NonNullable<Plugin['configs']>}}
*/
const eslintPluginPrettier = {
configs: {
recommended: {
extends: ['prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error',
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off',
},
},
},
meta: { name, version },
configs: {},
rules: {
prettier: {
meta: {
Expand Down Expand Up @@ -239,4 +234,30 @@ const eslintPluginPrettier = {
},
};

// Assign configs after initial plugin configuration, as flat configs
// require referencing the original plugin that contains the rules.
eslintPluginPrettier.configs = {
recommended: {
extends: 'prettier',
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error',
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off',
},
},
['recommended-flat']: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use camelCase here?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like config names should be as rules with dashes also eslint have config naming convention for eslint plugins with dashes too

Copy link
Member

@JounQin JounQin Nov 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The previous rules are for legacy configs, for flat configs, we're using js object reference instead, so camelCase is preferred IMO. And I think flatRecommended makes more sense than recommendedFlat.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

recommended-flat is all based on direction from the ESLint team:

Export both eslintrc and flat configs. The configs key is only validated when a config is used, so you can provide both formats of configs in the configs key. We recommend that you append older format configs with -legacy to make it clear that these configs will not be supported in the future. For example, if your primary config is called recommended and is in flat config format, then you can also have a config named recommended-legacy that is the eslintrc config format.

https://eslint.org/docs/latest/extend/plugin-migration-flat-config#backwards-compatibility

They're recommending appending -legacy for legacy configs (to make it recommended-legacy for example), which means -flat is the equivalent. Should we not go for that?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That strategy is an unnecessary breaking change IMO, and it can be made in next major version.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's why the suggestion is to add recommended-flat now (non-breaking) and swap them around in next major.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My suggestion is to add flatRecommended config key instead of recommended-flat.

// In the flat config, don't extend from the eslint-config-prettier ruleset.
// The consumer should deal with extending from eslint-config-prettier themselves.
plugins: {
prettier: eslintPluginPrettier,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would it be a circular ref?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, you're actually right! I'll make a comment about this below.

},
rules: {
'prettier/prettier': 'error',
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off',
},
},
};

module.exports = eslintPluginPrettier;