prettier

vs

eslint

vs

editorconfig

We need to lint and format our code

Lint

• ESLint

Format

• Prettier
• ESLint

Editorconfig?

editorconfig

It merely defines a standard code formatting style guide among all the IDEs and editors used within a team of developers.

 

For instance, if a team uses two main editors such as Sublime Text and Visual Studio Code, EditorConfig allows them to define a common indentation pattern (spaces or tabs) within a single file.

prettier

It just serves as a code formatter. It does this job pretty well though by natively supporting JavaScript but also JSX, Flow, TypeScript, HTML, JSON, CSS and many more languages.

 

Prettier is supposed to work with no configuration at all. The idea is to make teams of developers focus on what is more important. 

 

Better autofix integration with IDEs

 

No need to add prettier in this project as we have already defined all lint rules.

ESLint

ESLint is by far the most popular JavaScript linter. It statically analyzes your code to help you detect formatting issues and find code inconsistencies.

 

 

It can work in conjunction with Prettier and can be told to override or ignore certain rules.

 

Although auto-fix feature is well implemented in VSCode, it is not that good on WebStorm.

 

The only one above all three that can detect problematic code patterns that could lead to potential bugs.​