DEV Community

Cover image for Start Using Prettier The Right Way

Start Using Prettier The Right Way

Austin Hill on February 17, 2021

Background If you are like me, you have the Prettier extension installed, enabled formatting on save, got frustrated when your code kept...
Collapse
 
michaelcurrin profile image
Michael Currin • Edited

Use without installing

If you don't have Prettier installed globally or in a project, you can still download and run it on a project. This won't install it.

$ npx prettier -w .
Enter fullscreen mode Exit fullscreen mode

That will use the default options plus any overrides you've set in Prettier configs.

More info on how to use Prettier CLI

michaelcurrin.github.io/dev-cheats...

Collapse
 
matjones profile image
Mat Jones

The prettier extension is editor-specific. For an editor-agnostic solution, you can create a prettier git pre-commit hook pretty easily using pretty-quick and Husky.

Collapse
 
akinghill profile image
Austin Hill

Really cool. I didn't know about either of those tools. Thanks for sharing!

Collapse
 
matjones profile image
Mat Jones

Sure thing! This is my preferred way to use prettier.

Collapse
 
michaelcurrin profile image
Michael Currin

If you want keep it that shorter, you can remove options which are already the same as Prettier defaults. Like semi and quotes.

Also I noticed your style of indent 4 and using tabs is not the prevailing style I've noticed in the JS community. So if anyone contributes to your repo and that don't have your Prettier config, they may conflict with you.

Another approach based on Sharing configuration section of this doc is to publish your config as a NPM package, even if it's only on GitHub. Then you can install your own package in all your own projects. This means that you and anyone else who works on your projects can share the same config file.

Collapse
 
michaelcurrin profile image
Michael Currin

I want to add a list of all options that Prettier allows. And if you like the default options, you can keep your config light or non existent by relying on those.

prettier.io/docs/en/options.html

Collapse
 
akinghill profile image
Austin Hill

Thanks for linking this :)

Collapse
 
akinghill profile image
Austin Hill

Clever! I'm definitely going to give this a try. Thanks for sharing!

Collapse
 
eljayadobe profile image
Eljay-Adobe

I use Standard JS.

Collapse
 
akinghill profile image
Austin Hill

Really cool. Thanks for sharing!

Collapse
 
aalphaindia profile image
Pawan Pawar

Good post!