Format Your Code in VS Code with Prettier

Okay, let's get back to the extension. I left a link in the description. Wait, Hello world, My name is Michael Jolley and I'm the bald bearded builder. You know what? Let's make our code prettier.

If you've been writing in JavaScript or TypeScript, you've probably used Prettier or seen it in some cases. So what is Prettier? It's an opinionated code formatter. Don't confuse it with like ESLint or TSLint or Stylen. They're more to make your code better, make sure it works and follows some kind of formatting rules.

But Prettier is exclusively about formatting, making sure your lines aren't too long or just easier to read overall for you and all your friends. So what does it do exactly? It's not really a code extension by itself. Although we're talking about the extension today. It's just used from Yarn or NPM.

There's a several ways to get it installed in your project. And you can use a .prettierrc to kind of configure the opinions it has about what your code should look like. There's lots of options. There's a lot of code that it works for JavaScript, TypeScript. There's even add ons for like PHP, there's GraphQL,

YAML, TOML, there's XML. There's a lot of options for using Prettier. But we're not gonna go into all that, all the details of Prettier itself. We wanna talk specifically about the Versus Code extension for Prettier.

Before we get into the extension, I just wanna remind you, if you love to hang out with other developers who wanna learn and find new ways to be productive and cut up and just have a good time overall, be sure to check us out on Twitch. We stream there three days a week at two Eastern on Tuesday, Wednesday and Thursday. You can find it at Twitch, twitch. Tvbaldbeardedbuilder. We'd love to see you there.

And now let's get into the extension. So what does it do?

It doesn't extend prettier in any way. All it does is allows it to integrate better and more seamlessly if you will, with Versus Code. So you can do all the stuff you normally do with Prettier, but just handle it like on save of files, it automatically process those sorts of things. And gives you a few little handy IDE tools and goodies. So how do we get it?

As always, I've left you a link in the description if you wanna go read more about it. But by far the easiest way on all of these is to just click on the extensions icon in Versus Code, search for Prettier and click the install button.

So let's talk about how it works. It looks by default for a Prettier configuration file. Those are .prettier RC files in the root of your project. And if it can't find that, it'll also look for .editor config files. And some people have preferences of which they like to use.

It doesn't matter. It'll pick up either. But if it can't find either of those, it will use the default settings from Versus Code itself. If you provide either one of those, it won't look at Versus Code settings at all.

So you gotta kind of know it's kind of an either or kind of deal.

But once you have those set up, you can provide all kinds of options for formatting your code. Do you want tabs? Do you want spaces? Do you want two spaces? Do want four spaces?

Do you want, how many characters do you want a line to be? All those sorts of things. There's tons of them. You can go check that out at Prettier's website. I'll leave that link in the description as well.

But there's a lot of formatting options and all those are read in by the extension. And when you hit save on a file, it'll actually save it with those settings. It'll basically rewrite your entire file with those settings in mind and make it prettier, no pun intended. You're gonna wanna have prettier set up in Versus Code as your default formatter.

A lot of times this just happens by default, but if you're using things like ESLint, or maybe if you're working with Vue, you're using Veeder, any of those extensions will introduce some formatting. And a lot of times it's just best to go into Versus Code settings. You have to do it in the JSON, but you can set the editor. Defaultformatter property to the extension name. And that will default using the extension to do all the formatting and leave ESLint or TSLint or StyleLint to do the work it needs to do as far as linting your code.

You can also set it to only be the default formatter for certain languages like just JavaScript, but not Vue or, you know, any of those. One of the first questions I had when I was using it is what version of Prettier is it using? Because depending on the project I'm working in, I'm using a different version of Prettier all over the place. By default, it's gonna try and use the locally installed version. So if you've got Prettier in your package JSON, it'll use the one that's installed in your node modules.

But if you wanted to specify using it like a global version, you can do that inside of the settings. Just go into your UI settings and Versus Code, search for Prettier Global, and you'll see the option there. They'd recommend you don't do it unless you really need to, but you now you know it's there and it'll always use that globally installed version. One thing to note is if you don't have Prettier installed, in your package JSON or something, it'll use a default version of Prettier that comes with the extension. So that's important to remember.

One thing too that's really nice about the Pradeer extension is that if you use any kind of plugins, Pradeer has several plugins you can use to enhance it and kind of configure things the way you want it. All of those plugins work out of the box. As long as they're installed from like a package JSON, the extension will just pick those up and include those in the whole formatting process. One thing you'll wanna use if you're using a Linter is maybe turn off the formatting for the linter like ESLint or whatever. Let Prettier do the formatting and let ESLint or StyleLint, all those just do the linting.

You can get really confused when things start jumping around style wise. And you're like, well, I told it not to move that semicolon but it did move that semicolon. Well, you didn't realize it's this other thing sitting over here and just turn it off and use Prettier and make your life easier. There are a lot of settings in the Prettier extension, dozens.

I'm not gonna go into all of them, but there are a few that I think we should highlight and you should know about. They're really handy. For instance, maybe you need a custom path for like a Prettier ignore. Well, you can specify that in there. If you need a custom path for your Prettier RC, or maybe you want to specify whether or not the extension should take an editor config file into account.

All of those can be accessed in the command palette settings UI, search for Prettier, they're all in there. You can actually still do it with JSON as well, but the UI is just easier. Let's admit it. I'm curious, do you use Prettier in your projects? Certainly in all my TypeScript and JavaScript projects, I used it a lot.

It just makes my code a lot nicer and I always want people contributing to my code. So I wanna make it as easy as possible for them to hop on in and understand what I've done because let's be honest, I half the time don't remember what I've done. So I'd be really interested to see if you're using it. Are you using any interesting plugins for the Prettier extension? I'd really love to hear that.

Let me know in the comments below. If you enjoyed this video, hit the like button. It absolutely makes my day every time I see one of those go off. And if you enjoyed this content, if you wanna see more Versus Code extensions or productivity tips and tools, or you just feel sorry for the bald guy, hit the subscribe button and ding that bell to know when we release new videos. We come out twice a week with these BS code extension highlights and I love it.

I hope you're enjoying it as well. And until next time.