{

}

;

()

[]

Prettier Makes Code Awesome

A super cool tool that makes your code look neat and tidy, like magic!

Learn More Try It Now

function makeCodePretty() { return prettier.format(myCode); } // Prettier makes coding fun! // {} [] () = + - * /

What is Prettier?

Prettier is like a magic formatter for your code. It takes your messy code and makes it look clean, neat, and easy to read!

Imagine you just finished drawing a picture, but the colors are all mixed up and the lines are messy. Prettier comes along and organizes everything perfectly - like a professional artist cleaning up your work!

It's Automatic

Prettier works all by itself! You don't have to think about making your code look good - it does it for you.

Everyone Agrees

Prettier makes sure everyone's code looks the same, so it's easier to work together on projects!

Saves Time

You can focus on writing cool code instead of spending time making it look pretty.

Makes Coding Fun

Clean code is easier to read and understand, which makes coding more enjoyable!

How Does Prettier Work?

Before Prettier

This code works, but it's messy and hard to read:

                                function calculateTotal(price,tax){
                                return price + (price* tax);
                                }
                                
                                const items=[{name:"Apple",price:1.99},
                                {name:"Banana",price:0.99}]
                            

Prettier does its magic!

After Prettier

Look how clean and neat it becomes:

                                    Prettified!
                                
                                function calculateTotal(price, tax) {

                                  return price + (price * tax);

                                }

                                const items = [

                                  { name: "Apple", price: 1.99 },

                                  { name: "Banana", price: 0.99 }

                                ];

3 Easy Steps to Use Prettier

Install It

Add Prettier to your coding project with a simple command.

Set It Up

Choose your favorite style for how code should look.

Use It

Let Prettier format your code automatically as you write!

Try It Yourself!

Type some messy code in the box below, then click the button to see Prettier clean it up!

Your Messy Code:

Prettier's Magic:

function add(a, b) {
  return a + b;
}

const fruits = ["apple", "banana", "orange"];

if (a > b) {
  console.log("a is bigger");
} else {
  console.log("b is bigger");
}

Test Your Prettier Knowledge!

Take this fun quiz to see how much you've learned about Prettier.

1. What does Prettier do?

It writes code for you

It makes your code look neat and organized

It teaches you how to code

It plays music while you code

2. Why is Prettier helpful?

It makes your computer run faster

It changes the color of your screen

It prints your code on paper

It saves time and makes code easier to read

3. When should you use Prettier?

When writing code that looks messy

When playing video games

When cooking food

When reading a book

Learn More About Prettier

Check out these cool resources to become a Prettier expert!

Official Documentation

Learn everything about how Prettier works from the official guide.

Online Playground

Experiment with Prettier in your browser without installing anything.

Try It

GitHub Repository

See how Prettier is built and join the community of developers.

Explore