vscode formatter selection about nextjs-advanced-starter HOT 2 CLOSED

Hi! You're very welcome.
ESLint and Prettier are two different things and you need both.

The way it works is this:
The ESLint extension just highlights errors (it pretty much only shows red squiggly lines) in vscode but doesn't really know what an error is or when to show an error.

In the project root you will find a file called .eslintrc.json which gets read by the ESLint extension so that it knows which rules throw errors, warnings, etc., this is also the file where you can add new rules, remove old ones etc.

Now If you look closely at the rules you will find a rule called prettier/prettier which is set to throw errors. But what are the differences between prettier and eslint?

Prettier is a code formatter that removes extra whitespace, sets correct indents, line-breaks, etc. It does not really have anything to do with showing you errors (that's what linters are for, e.g eslint). However, you can tell eslint that you want to treat non-formatted code as an error. The cool thing about this is that eslint can automatically fix these formatting errors with prettier.

To conclude:
ESLint extension shows the red squiggly lines (you absolutely need that)
.eslintrc.json tells the extension what an error even is (that's highly opinionated most of the times)
prettier can format your code to make it look better, but isn't itself an error
however, we set it to show errors so eslint can fix it automatically

Note: in addition, there is a file called .vscode/settings.json which tells the eslint extension to run auto-fixing every time you save a file

Another note: In the readme I recommend to also install the Prettier extension which is not really needed for this project because the dependency is already installed but it's very handy if you work on plain js code without dependencies etc.

If you have any more questions please just ask! :)

from nextjs-advanced-starter.

Thank you, for the clarification.

from nextjs-advanced-starter.