Prettier compatibility for JS/TS (eslint-config-prettier)

[fregante]

Clear and concise description of the problem

I'd like to use Prettier (externally) and this config for everything else. The suggestion is generally to use either stylistic or prettier, but not both. The problem is that stylistic has extra linting rules that Prettier doesn't concern itself with.

We have eslint-config-prettier for this purpose but I don’t think it works when plugins are renamed.

Suggested solution

import antfu from '@antfu/eslint-config'

export default antfu({
	prettierCompat: true,
})

Alternative

I think the alternative is

import antfu from '@antfu/eslint-config'
import eslintConfigPrettier from 'eslint-config-prettier'

export default [
	...antfu()
		.renamePlugins({
		ts: '@typescript-eslint',
		yaml: 'yml',
		node: 'n'
		// …
	}),
	eslintConfigPrettier,
]

with the drawbacks:

• having to manually specify and maintain the renames list
• losing the advantages of the rename

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[fregante]

An alternative solution is to find and disable all conflicting rules. In my case, for now, it's:

export default antfu({
	rules: {
		'style/arrow-parens': 'off',
		'style/object-curly-spacing': 'off',
		'style/brace-style': 'off',
		'style/indent': 'off',
		'style/operator-linebreak': 'off',
		'style/quote-props': 'off',
		'svelte/indent': 'off',
	},
});

Which is not terrible, but also it's likely that new contributors will find more issues and won't know how to deal with them. eslint-config-prettier already exists as a solution to this and it would be great to be able to use it.

[antfu]

Maybe you can use https://www.npmjs.com/package/eslint-flat-config-utils (the one this config also uses) with eslintConfigPrettier to rename the disable rules back instead?

[fregante]

After:

• Support @stylistic/eslint-plugin prettier/eslint-config-prettier#283

I think I will be able to use this:

import antfu from '@antfu/eslint-config'
import prettier from 'eslint-config-prettier'
import { composer } from 'eslint-flat-config-utils'

export default antfu().overrideRules(composer(prettier)).renamePlugins({
	'@typescript-eslint': 'ts',
	'@stylistic': 'style',
});

I wonder if eslint-flat-config-utils should just (optionally?) preserve/reapply the renames automatically, so that I can use:

import antfu from '@antfu/eslint-config'
import prettier from 'eslint-config-prettier'

export default antfu().overrideRules(prettier);

This would be very reasonable, short of including eslint-config-prettier in this config via prettierCompat: true

[antfu]

I wonder if eslint-flat-config-utils should just (optionally?) preserve/reapply the renames automatically, so that I can use:

I think it should be doing that already - if not I'd consider it a bug

[fregante]

It seems that you're right. Let's wait for this PR to be merged:

• Support @stylistic/eslint-plugin prettier/eslint-config-prettier#283

and then this issue can be fixed by just documenting it in the readme, e.g.

## Prettier 

If you're using prettier outside eslint, you can disable the config via etc:

```js
import antfu from '@antfu/eslint-config'
import prettierConflicts from 'eslint-config-prettier'

export default antfu({
	rules: {
		'some-rule': 'off'
	}
}, prettierConflicts);
```

I found a small exception:

• antfu/consistent-chaining

It conflicts with prettier, but it's not part of stylistic. I wonder if they will accept it in eslint-config-prettier