DEV Community

Cover image for How to setup prettier for WebStorm ?
Dany Paredes
Dany Paredes

Posted on • Edited on

1 1

How to setup prettier for WebStorm ?

Prettier is amazing code formatter and help to don't be worried about your own code style.

Prettier allow us to define a set of formatter rules but we can write our code as wherever we want but when you save the formatter apply these rules.

The good news is that Prettier it works like a charm with vscode but for WebStorm need some extra clicks.

These are my steps for work with prettier with WebStorm.

1- Be sure you have prettier in your project or install it globally.

npm install -g prettier
Enter fullscreen mode Exit fullscreen mode

2- Go to File | Settings | Languages & Frameworks | JavaScript | Prettier
and check options.

[✅] On code reformat.
[
✅] On save.

Sass and SCSS

Thanks @dinaelurdaneta we can use prettier with sass or scss files using stylelint and extra setup for prettier.

1- Install stylelint local or globally.

npm install -g stylelint
Enter fullscreen mode Exit fullscreen mode

2- Add scss and sass extension into _Run for file glob pattern. _

include sass extension for prettier support

Enjoy Prettier!

Photo by Markus Spiske on Unsplash

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more