How to Install and Use Prettier in Vscode | Format on Save Visual Studio Code

semicolons a single quartz level plus 50 characters per woman I see that you're struggling with code for Martin too but don't worry that is prettier and today I'm gonna explain you how it works so here I have three messy files as you can see they are all messy okay and we're going to format them with prettier so before we get started really important you need to follow carefully each step because they are fundamental to make everything work okay so first of all let's install the bridge extension so you have to go here prettier yes bump this one install okay then you can go to settings from here or you can go down here settings and then preach here and you see the settings they are not allowed because preacher is supposed to be a tool that helps us be consistent with our coding style okay especially when working in team they could be changed here when the settings.json file but this is not the recommended way but just to show you if you hover over the options you can see the real name and if you go to the settings up here open settings you can start typing something like prettier and here you've got all the settings so if you click on that then you've got the options really really cool okay really important if you want picture to be used as the default code formatter you need to tell that to be is code okay and you can do that by adding this setting here in the settings.json file so editor default formatter and this one this will enable creature for all the files all the extensions and actually before we say that if you go to the main success for example down here you can see this x which means that you didn't set any format okay same thing here same thing in the index.html file if we save that this goes away as you can see you don't have that anymore okay because you've told this code to use preacher for all the extension for the files but if we comment this out and we go to main success for example this is still here but if we go to configure pretty then this will tell this code to use creatures as for the CSS files in fact if you go to settings.json file you've got this syntax which means use prettier as the default formatter just for the CSS files you can also do that for HTML and so on and so forth so here I can tell this code use pretty adjustable this CSS for HTML and whatever you want if you on the other hand leave this this means that preacher will be used for all the files which is what I want at the moment okay so let's see how this actually works so if you go to the mean CSS and you want to format it you can right click format document and as you can see everything is formatted same thing here for my document and same thing for this JavaScript as you can see here you've got double quotes single quote same column here no here etc etc you can just right click format document and everything is perfectly formatted okay later on I'm going to show you how to make this automatic when you save the file so as I said this is working but this is not the way to go especially if you're working in team because this would use the simple version for every project and also the same settings furthermore if you're using setting like single quotes and your teammate is using double quotes you will have to change settings each time okay and this would definitely lead to problems in the long run so let's now see how to configure things the right way first of all you need to have node.js and npm or yarn installed so if you don't have them installed you should install them first then from inside the budget folder we can run the terminal and we can install pretty young locally so for the npm you need to write this okay npm install etc for the yarn like that okay I'm just going to use the npn1 like this okay let's go here as you can see node modules and then in the packets of Json you've got 2.7.1 which is the version of picture that we're using at the moment okay then after doing this you need to create a file in here in the root folder called preacher rc.json which is the way of telling vs code that we're actually using feature locally the cool thing is that after installing this locally the physical extension will always use the specific version of picture for this project so even if preacher releases different updates the version used is still the 2.7.1 in this case in this file the pre-trc.json we're going to put all the options that we want to change and then we were writing in the vs code settings.json file all the options here will automatically rewrite the vs code once which in turn makes everything better because now you can set different settings for different projects and once you set them Twitter will always use those options for for the project for you and every person working on this project so let's actually see a few options okay so let's close this okay so here you can change a few things like for example if you don't want semicolons you just need to write false and then single quotes if you want a single quote you need to write through if you don't want parentheses here like around here you just need to write avoid you can see and if you want the line to be longer than 80 characters start with more than two spaces stuff like that you need to change them here okay and as you can see if you format now you can see single quotes no semicolon no parenthesis around okay and this will override the settings here so if you wrote something some settings here this wouldn't be used but this would be used instead okay you can find all the options available and what they do at this link here that you should see on the screen then we can also create a project no file so dot putting you know and here we can put all the things that we don't want Twitter to format so for example if you don't want anything inside the CSS folder we just write CSS or if we don't want to format files with the HTML extension with the CSS extension or maybe a certain file just the index.html file we put those in this file and automatically these are not formatted so as you can see if we go let's go back to the messy one if you want to try to format it doesn't work okay so this is kind of cool if you've got me five files that you don't want to actually format okay as I said before we don't want to keep right clicking like right click format etc etc but you want to format everything when we save the file okay and this is as easy as I can in this setting to the settings.json file so we go to the settings.json file this is the vs code settings and we add editor format on Save let's actually delete those from the original file otherwise it wouldn't work if you go here we go back to the message one and we save that as you can see it gets back straight away to the formatted one here same thing and script.js let's change a few things like something like that if we save that as you can see straight away okay so now if you get to learn more go and watch this other video about web development you won't be disappointed

Channel: Fabio Musanni - Programming Channel

Views: 10,771

Keywords: web development, web dev, css3, css tricks, css tips, programming, code formatting with prettier in visual studio code, code formatting vs code, prettier vscode, prettier extension vscode, prettier extension vscode not working, prettier extension vscode settings, prettier extension format on save, format code in visual studio code, format code in vscode, visual studio code format on save, prettier html formatting vscode, prettier css formatting, how to config prettier in vscode

Id: qfY9U9dvCLI

Length: 6min 15sec (375 seconds)

Published: Mon Oct 10 2022