Automatic Code Formatting with Prettier and VS Code

hello everyone i'm thomas and welcome to my channel where i educate people on iot and web development by showing how to build projects step by step today a quick video about very useful tool called pre-tier that you can add to your javascript or typescript project that with the use of a visual studio code plugin can autoformat your code as you type it or whenever you save the changes or paste something into the editor and by something i mean a block of code all of this very simple pretty straightforward to set up so i guess let's have a look at my computer and i'm gonna show you how to get this done configure everything and never worry about code formatting again okay right so here is my visual studio code opened the first step is going to be adding pre-tier to javascript project right in order to do that we need a project opened here um so yeah it can be any project uh in my case for the for the sake of demonstration i've got something that i prepared beforehand it is on my github let me just clone it it's a example.js project if you want you can use that there is this comment is in the description of the video so you can just copy paste it into your command line and run it however i'd recommend using an actual javascript project the one that you want to add this out of formatting functionality to anyway let me just continue so i cloned it and now i'm going to open it with visual studio code so open projects example.js project right just opening it and what is what is inside is a very simple uh a crat which is a create read update delete user application express application so i've got the express js setup in here in the index.js and router with the few endpoints uh yeah let me just show you here so a few endpoints and also there is examples directory with another js file and jsx react component because prettier can also work with react so yeah this is all for the demonstration so i once i set everything up i'm going to show you how does this work uh i'm going to show you this in action anyway let's start from adding prettier to the to this project right it's not there at the moment so we're going to add it we need to go to the menu terminal and open a new terminal in visual studio code and then i'm just going to install it as a npm package right as a depth dependency so npm install minus minus save dev prettier you can also find this in the description of the video um okay so yeah that's it this is it uh now we've got the prettier here but to configure auto formatting we need first an extra extension in visual studio code so i'm going to go to the extensions and look for prettier an official extension that should be the first result in here prettier code formatter by prettier make sure it is this one and what you want to do is to click on install okay right so that's installed and the final step to have the auto formatting in the project is to go to code menu code preferences settings and then we need to look for format essentially formatted settings but if you type in format should be enough to get all of these settings right but before i change anything here let me just quickly talk about these two tabs so we've got the user tab and workspace user tab means that whatever you change in here is gonna stay with you as a user so any project that you create as yourself is going to have the settings right so if you change the formatter to prettier at this point like at this level this is going to be like a global change so any project you create with visual studio code any project you open javascript project typescript project or any other kind of project is going to have prettier as a default formatter however if you switch this to workspace then these settings are going to be limited only to this one project that we have opened at the moment right so example.js project and that's something i'm gonna do because sometimes i use a different formatter for formatting c plus flash for my iot projects so so yeah that's that's essentially the reason but if you want to do it globally go on and just switch to user and uh pick the prettier from this drop down and then we need to tick this checkboxes so the first one format on paste basically if you paste a code into the editor and that code is correct code it's going to be formatted automatically now because we switch this to to on right we switched it on then format on save so this is for the manual saving uh when i tick this checkbox and uh whenever in javascript or typescript file i press a command plus s on my keyboard or ctrl s on windows and linux then the code is going to be autoformatted and finally format on type this is useful when you use autosave functionality with visual studio code if you don't save manually as i do right so these three options format on type then format on save and format on paste and make sure the default formatter is prettier okay one more thing that you probably noticed i've got a new folder here with settings so these are the the settings i have just set for this project that's why this has been created here in visual studio code okay and yeah this is pretty much it so i can now demonstrate i'm just going to open router maybe and let's add a new endpoint maybe example so i'm just going to type post slash example maybe let's use a single quote so slash example and then let's just do something like arrow function a request response and then in the arrow function we can actually have some sort of the if statement and let's look for the maybe a body param could be good idea if there is a body body param id then we're going to send 200 okay otherwise let's do s this is intentional that i've write everything in a single line because i would like to demonstrate what's going to happen when i press command plus s on my on my keyboard so yes i'm just going to send maybe 400 okay so this code is correct but you see now it's all one line if i press command plus s that's gonna be auto formatted right so this is how pretty it works right if you mess something up like this or this the moment i press command s it's all uh in place it's it's also it's it's all how it's supposed to be right uh and you probably realized slash example is now with a double quotes because these are the default settings okay right you might ask how to change that right so what if we don't want to have double quotes but single quotes as a default for strings and no not non-semicolons right let's say yeah this is the 21st century we don't want semicolons anymore we can do that let's add a new file in here that's going to be the prettier configuration file it's called pretty rc if you create it and then add following settings so semi to false that means no semicolons and then sing quote to true that means yes we won't sing we want a single quotes instead of double quotes finally another option i i would like to demonstrate is a top width so this is for the for the uh indentations for tabulation uh actually it's it works like straight away so now you see that's changed now we have four spaces in here when i go back to router and i just simply press command s everything is now different right i mean we have a single quotes no semicolons and we've got four spaces for the indentation okay that also is going to work for the jsx also tsx write typescript the moment i just press command s everything is now as it's supposed to be and also if i just go here and try to mess anything up like that maybe like that again the moment i press command s we have everything nicely formatted so yeah this is how this is how prettier works maybe one one additional example i've got a code from stack overflow let me just copy this right this is not formatted when i paste it in hang on let me just remove all the content from here yeah so when i paste it in this is immediately in the right format right so all the indentations um and no semicolons at the ends uh even though there were semicolons here right so yeah this is pretty cool um it's the default tool i always use it's a part of my developer toolbox whenever i set up a new project i always look for the code formatter right depending on the language if it's javascript or typescript it's obviously prettier okay and this is it for today thanks for watching if you find my content useful don't forget to subscribe to my channel so you will stay up to date with any new videos cheers and bye

Channel: Tomasz Tarnowski

Views: 883

Keywords: prettier, formatting code with prettier, code formatting with prettier, automated code formatting with prettier on vs code, prettier extension, code formatting with prettier in visual studio code, issue with prettier extension, problem with prettier extension, code formatting in vs code, auto formatting, code formatting, formatting javascript, visual studio code auto formatting, formatting css, prettier vscode, prettier not formatting html, vim tutorial with prettier

Id: Z6AW5rqWg7U

Length: 11min 19sec (679 seconds)

Published: Thu Oct 14 2021