There are challenges when using both a formatter and linter. See how Prettier and ESLint can automatically fix and format your JavaScript.

Linting and pretty-printing your JavaScript code can help you catch errors early, make your code more legible, and improve code quality. However, when you use a formatter (for pretty-printing) and a linter side by side, there can be some friction. For example, the formatter can do something that the linter deems a problem. The linter can overwrite style changes from the formatter. They can pull in different directions.

To use them together successfully, you need to get them on the same page. In this article, I will discuss how you can use the most popular formatter, Prettier, with the most popular linter, ESLint. I will show you how to set them up and use them together on the command-line, and in Visual Studio Code (VS Code) to automatically fix and format your code.

I have seen different methods for tackling how to use them together, but some are hacky solutions because of limitations in code editors. I will discuss the merits and demerits of some of these. You can make your own mind up on what is best.

First, let’s get a broad overview of linting rules so we can understand what the demarcation between a linter and formatter should be.

#javascript #prettier #eslint #programming #developer