DEV Community

Cover image for Prettier and Standard in VSCode
Zell Liew 🤗
Zell Liew 🤗

Posted on • Originally published at zellwk.com

7 1

Prettier and Standard in VSCode

Prettier is an opinionated tool that helps you format code. I love Prettier, but I don't like its opinions with JavaScript. I prefer using Standard for JavaScript because it doesn't have semicolons (which makes the code cleaner to read).

It used to be complicated to use Prettier and Standard together. We had to disable Prettier for specific languages. Thankfully, there's a simpler way now.

We can use an extension called Prettier Standard VSCode. It changes JavaScript from the Prettier default format into Standard.

I've tested this extension and it continues to work like all other Prettier extensions like .html and .css.

The good thing about using Prettier Standard VSCode is we can continue to use Standard in files with mixed syntaxes like HTML and markdown.

Here's an example where I edited markdown with Prettier:

Markdown edited with Prettier

And here's one with Prettier Standard.

Markdown edited with Prettier Standard

For languages that Prettier doesn't support, you can always overwrite Prettier with a different formatter, like this:

"[nunjucks]": {
  "editor.defaultFormatter": "okitavera.vscode-nunjucks-formatter"
},
Enter fullscreen mode Exit fullscreen mode

I hope this helps you set up your JavaScript environment!


Thanks for reading. This article was originally posted on my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.

👋 While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (2)

Collapse
 
kalashin1 profile image
Kinanee Samson •

More detail would be appreciated, but nevertheless good work pal

Collapse
 
rasujan profile image
Sujan Maharjan •

If it's just about the semi colon you can actually setup to remove semicone into prettier extension settings

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay