How to use Prettier in VS Code - Code Formatting

in this video we're going to learn how to install and configure prettier code formatter in vs code formatting code consistently can be a challenge especially when working in a team code formatters like prettier can help solve this issue this is coding with adam and let's get to the code if you enjoy my videos please subscribe like and share we'll start by installing the prettier code formatter so go ahead and click on the extension tab that's represented by these four blocks and then inside the search go ahead and search for prettier code formatter you're gonna get back multiple results so make sure to choose the right one the one that we want to install is from prettier you can confirm this by checking the name over here it says prettier also below the title it says prettier and the version will be version 9 or greater go ahead and click that install button now that we have pretty installed let's go ahead and try it out so we go ahead and create a new file i'm just going to call it index.js and inside here i'm going to go ahead and just create a variable put some arbitrary number of spaces you'll notice that i also use single quotes and i didn't add the semicolon what i would like to do is use the formatter to remove the spaces add the semicolon and switch the single quotes to double quotes so the first way that we can do this right here is if i right click on this file over here and i say format document with it'll then give me an option to pick which formatter i want to use since we installed prettier i can select prettier over here and you can see it's reformatted my document it's removed the arbitrary number of spaces that i had it changed my single quotes double quotes and added a semicolon at the end the only issue with doing it this way by right clicking and selecting format with document is that it's a little bit cumbersome and a little bit slow you have to remember to right click and select format with document then select the formatter a better way is that we want it to format every single time we save the file in order to do this we're going to go to our settings to get to our settings we're going to click on the gear over here and you'll notice that i'm going to select settings but there is also a keyboard shortcut that you can use so we'll select settings then inside settings i'm going to type format in the search and you'll notice that we have two sets of settings over here we have user settings now these are global for any project that i open up side visual studio code if i open it up it'll be using these settings however they can be overridden with workspace settings so these are specific to the project let's go ahead and set our user settings so click on user and then for the default formatter if we open up this dropdown over here because we've installed prettier we'll have the prettier code formatter available to select then we're going to scroll down and there's going to be a format on save check that check box you also notice that there is a format on paste however i typically don't use that so i just select format on save close our settings over there go back to our file now if we add those spaces and i'm just gonna save my keyboard there and you saw that i remove them so this is great now anytime i'm saving my file it is automatically going ahead and formatting it i add another variable down here and i call it color is equal to blue and i save it you can see that it still kept a space between these but every time i save it it's like okay well the most number of spaces you should have here is one between these two things not this many so you can see that our save is working right now and formatting every time we click save using prettier as you can see i've kind of made the decision right now that prettier is the code formatter that i'm using for every single project by setting it in my user settings however if we want to say that different projects use different code formatters we can do the following so let's go ahead and search for format again in our settings then we're going to do is we're going to go to workspace inside the workspace we're going to go ahead and select prettier code formatter and you'll notice that this new folder gets added called dot vs code and then we're going to also go ahead and say format on save so we have two things selected format on save and default formatter let's go ahead and take a look at this new file that was created for us now remember this is called a workspace so this folder over here that i'm working inside called code formatting now contains a folder called dot vs code which has a settings.json inside there it's a json file and you can see that we have two settings that we changed one is the editor default formatter so it's setting it to prettier code formatter over here and then it's also setting the editor.format on save to true instead of modifying the settings from here we can actually even modify the settings from here so i could change this to false if i wanted to then if we go to our project and now i make modifications over here and i click save it's not formatting even though our setting in our user over here says it's format on save is true that it should do it we're overwriting it inside of our workspace settings over here by setting it to false and that's being done inside of our settings.json so this screen over here workspace was represented by this settings.json file which can override the values that are there if we go ahead and set this back to true save it and then go back to index.js click save it applies the formatting as it did before and just to make sure that this is clear the settings.json represents any changes that we make to our workspace settings over here so you can modify them here and they'll automatically be updated in your json file prettier can also be configured with different settings however the best practice is to include a file in your project that describes these configurations now prettier can be configured from your settings over here so for example if we search for prettier we're going to find a bunch of options that we can change however if we change these options they're only going to be available in our workspace or for our user they're not really available for everybody who's on our project with us this also technically depends on whether or not you've decided that for your project you're going to be committing your workspace settings often you typically see that workspace settings aren't included but sometimes they are in projects so let's go with the assumption that we're not including our workspace settings when we commit to git and other people are working with us if this is the case we're going to go ahead and add a configuration file for prettier the configuration file will live inside the root of our project and we're going to call it prettierrc.json one way to confirm that this works is to see that you get the appropriate icon over here now the icon set that i'm using inside visual studio code is called material icon theme so if you want to have the same icons that i have go ahead and install this theme inside this new configuration file we can go ahead and create a json object then inside here we're going to set some properties which will change how prettier formats the code in order to find these options you can either look through the settings or we could go to the website on the prettier website we'll find options and these are the various options that we can use within prettier let's go ahead and try one of these options out let's try the quotes over here so quotes we're going to change single quotes and we can specify whether or not it's a true or false value so single quotes by default is set to false and what we need to do is copy the api override so we'll go ahead and copy that actually just need to copy the name single quote go back to our json we'll put the name in and now by default this is false we're going to go ahead and set it to true so we're using single quotes instead of double quotes and we're going to notice that our double quotes will change to single quotes let's go add another rule as well i saw one over here for semicolons so semi is just semi the default is true that it has semicolons so let's go back to prettier.json add that in over there and we're going to put false so it doesn't have semicolons now don't forget to put your comma there and then to wrap this in quotes go back to our index.js we're going to save that and those semicolons disappeared from the end of our lines from this video i hope you learned that you can use code formatters to not only keep your code consistent but keep your code consistent with your team if you enjoyed this video please subscribe like and share

Channel: Coding With Adam

Views: 272,469

Keywords: prettier, prettier code formatter, code formatter, vs code prettier code formatter, vs code, vs code save format code, format code on save, code formats on save vs code, prettier vs code, vs code prettier, install prettier vs code, prettier configuration file, prettier configuration json file, code formatters, how to use prettier in vs code, using prettier in vs code, vscode, visual studio code prettier code formatter, prettier not working, prettier wont work

Id: __eiQumLOEo

Length: 8min 17sec (497 seconds)

Published: Wed Jan 12 2022