How To Install Prettier
Prerequisites
Step 1 — Install Prettier
install Prettier as a development dependency:
You'll see the following output:
Step 2 — Configure .prettierignore
Step 3 — Configure Prettier
Create a prettier.config.js
file in the root of your project:
Open prettier.config.js
in your code editor and add the following configuration:
Step 4 — Add a Format Script
To simplify the formatting process, add a script to your package.json
. Open package.json
and add the following under the "scripts"
section:
This script tells Prettier to format all files within the src
directory.
Step 5 — Format Your Code
Run the format script to automatically format your code:
You'll see output similar to:
Step 6 — Integrate Prettier with Your Code Editor
To enhance your workflow, integrate Prettier with your code editor to format code on save.
Visual Studio Code
Install the Prettier Extension:
Open VS Code.
Go to the Extensions view by clicking the square icon in the sidebar or pressing
CTRL+SHIFT+X
.Search for "Prettier - Code formatter" and install it.
Configure VS Code to Use Prettier:
Open your VS Code settings (
CTRL+,
).Search for "Format On Save" and enable it by checking the box.
Set Prettier as the default formatter by adding the following to your
settings.json
:{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }