Remove prettier from eslint rules, add prettier config file

[Dannymx]

I think it would be better if the responsibility of formatting files was left up to the user on format on save or also to be enforced by husky (like already does in this template).

In my opinion Prettier should format things, ESLint should lint things, having ESLint check for format should not be its responsibility.

The official Prettier docs explain why you might not want ESLint do formatting checks: https://prettier.io/docs/en/integrating-with-linters.html

Here's Theo explaining it better than I could: https://www.youtube.com/watch?v=Cd-gBxzcsdA

[ixartz]

Thank you for your feedback and thank you for creating the PR.

You should able to get some small insight from the Reddit post: https://www.reddit.com/r/reactjs/comments/1b8wdr0/just_reached_6000_stars_on_github_for_my_nextjs/

[ixartz]

Maybe another alternative is to use https://biomejs.dev instead of ESLint and Prettier. It can replace both tools and faster, written in Rust

[ixartz]

Close it for now. The official Next.js documentation suggest to integrate Prettier into ESLint: https://nextjs.org/docs/app/building-your-application/configuring/eslint#prettier

[Dannymx]

@ixartz The way your template includes Prettier with ESLint is not the same way Next.js recommends to use Prettier (based on the link you shared).

They recommend it like this:

{
  "extends": ["next", "prettier"]
}

Is not the same as doing it like in your template:

"extends": [
     ...
    "plugin:prettier/recommended"
  ],

prettier and plugin:prettier/recommended are not the same thing.

One is eslint-config-prettier and the other (the one I'm suggesting to be removed) is eslint-plugin-prettier.

If you want to follow what Vercel/Next.js recommends, it should be like I proposed in this PR.

Please consider it, thank you.

[ixartz]

@Dannymx in the past, Prettier was totally separate from ESLint in this project. No mention of Prettier in ESLint. Doing separately Prettier and ESLint, the DX was horrible and slow with VSCode.

Aside from recommendation, I don't see any advantage to separate it. Especially when the recommended path has a horrible DX and doesn't work great with VSCode.

I watch your YouTube video and read the links you have shared, it's only a recommendation (it's not mandatory).

I might miss something, but could you share with me what concretely brings to the table by going back?

[Dannymx]

@Dannymx in the past, Prettier was totally separate from ESLint in this project. No mention of Prettier in ESLint. Doing separately Prettier and ESLint, the DX was horrible and slow with VSCode.

Aside from recommendation, I don't see any advantage to separate it. Especially when the recommended path has a horrible DX and doesn't work great with VSCode.

I watch your YouTube video and read the links you have shared, it's only a recommendation (it's not mandatory).

I might miss something, but could you share with me what concretely brings to the table by going back?

I thought you brought up the link from Next docs where they do it the way I suggested in this PR, so either you didn't understand my PR, or didn't read the docs you linked, or both.

At this point I'm not sure I can convince you and that's fine, at the end of the day is matter of preference (and also your repo) but I think one preference is better than the other.

So who agrees with Prettier not being part of ESLint?

• Next docs, as you linked before
• Prettier docs and they clearly note the downsides of mixing both
• Creator of ESLint also recommends to use Prettier directly and not eslint for formatting
• Theo, with a well explained video

Separating concerns is the most important part of this PR, Prettier is a formatter, ESLint is not, and having ESLint do formatting (or checking for it) is wrong. I don't understand what "horrible" DX experience you're talking about or how "doesn't work" with VSCode, because it clearly works having Prettier and ESLint separate.

It's fine if this is not merged, but at least we're leaving it on record so developers in the future understand the difference between the both.

[ixartz]

@Dannymx Sorry I don't remember exactly and didn't write down why it wasn't working well with VSCode. But once, I change to this model, I was relief by the unified tool and extremely happy with it.

Yes, maybe I didn't understand well, I might miss something. For your reference, English isn't my mother tongue.

For example, Biome is a linter and a code formatter, it's a tool doing both. So, they don't do "separting concerns". I really consider using it.

[Dannymx]

Adding more developers discouraging the eslint-plugin-prettier, this time Dan Abramov, core React developer.

https://github.com/facebook/react-native/pull/43756

[r34son]

Check it out https://www.joshuakgoldberg.com/blog/you-probably-dont-need-eslint-config-prettier-or-eslint-plugin-prettier/