Search⌘ K
AI Features
Home
Courses
Test-driven Development with React

Prettier to Beautify Your Code

Discover how to integrate Prettier with ESLint to automatically format your React code. This lesson helps you understand how to run Prettier-eslint commands, customize formatting rules like quote styles and trailing commas, and maintain consistent readable code throughout your project.

We'll cover the following...

Beautifying code with Prettier

Prettier describes itself as “an opinionated code formatter.” First introduced in 2017, it’s already soared to two million downloads per week from the npm registry. Using Prettier for the first time feels like a breath of fresh air. No more worrying about insignificant stylistic details as you work. No more arguments with your team about what’s most readable. Just let the formatter take care of it. Let’s add Prettier to our project.

  • Since we’re using ESLint, we want the prettier-eslint command, which ensures that Prettier formats our code in a consistent manner with our ESLint config. To get that command, install the prettier-eslint-cli package:

    $ npm install --save-dev prettier-eslint-cli@4.7.1
+ prettier-eslint-cli@4.7.1

  • Try running prettier-eslint against our test suite:

 ...