[website] Replace ESLint with Prettier

Do you want to request a feature or report a bug? Feature (Build tools)

What is the current behavior? ESLint rules are so annoying and slow down the development.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test. N/A

What is the expected behavior? Prettier is the standard currently and so many popular projects use it and makes you write the code without being worried about one less semicolon or on which line close which tag 😦

Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system. Not related.

[satya164]

Prettier will format the code, but it can’t catch the mistakes in the code that a linter can. For example, trying to use a variable which is not defined and many more other rules that ESLint has. That’s why it’s important to use both ESLint and prettier together.

In our ESLint config we have only enabled rules which can catch potential errors and disabled all code style related rules which are handled by prettier. But since our config is based on Airbnb’s config, some rules could be annoying as the Airbnb config is unnecessary restrictive. If you are annoyed by a specific rule, please mention it and we can discuss disabling it in the config.

[satya164]

That’s exactly what he mentioned with eslint --fix

It’s different:

• prettier-eslint - format code with prettier, then override some style rules with eslint (for example array-bracket-spacing), like running prettier, then eslint --fix.
• eslint with eslint-plugin-prettier - disable all of the style related rules from eslint and always use the prettier for formatting, equivalent to running eslint --fix then prettier