How to use Prettier in VS Code - Code Formatting

we are going to learn how to install and format prettier code extension for vs code so that we can take our messy code that looks like this hit save and then it auto formats for us if I go back we see that the empty spaces are being removed the missing semi colons after each line is being added and the single quotes are being changed into double quotes which I have specified to use in my project let's install prettier by going to the extensions tab searching for prettier it should normally be the first one that pops up we see the blue check mark here and we also see that it has 37 million installs we click install so it might work as intended for you by default so if we go back to our script here if we add some empty spaces here remove the semicolons and change this to single quotes hit save it might do that automatically if something doesn't work for you we're going to go down here in the left corner we're going to click manage go to settings and this is opening our vs code settings here notice that we are on the user settings we're going to search here in the settings for default formatter and here we can see I already have preter code formatter selected but you might have to scroll down here and select it so select prettier and then you also have settings here for enabling or disabling predor for different file types back to the settings then you're going to click on text editor we're going to go to formatting and we are going to check this format on Save if it is not checked that's going to make prettier format your code on each save then we're going to search prettier and we get into our extensions we see that we have preter here we can click it and here you have different settings for preter that you can specify as you want for example we can enable or disable prettier here scrolling down we can choose whether to add a semicolon at the end of every line if we check this one here we're going to use single quotes instead of double quotes let's go back to our script and test that currently double hitting save and now it's single let me know in the comments if you have any issue if you like this video then there's another one here suggested for you until next time see you

Channel: How to Become a Developer

Views: 6,775

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, extension

Id: drtxWx1XojI

Length: 2min 10sec (130 seconds)

Published: Sun Oct 08 2023