Prettier Extension for Visual Studio Code | Full Tutorial

if you've ever felt frustrated by inconsistent code formatting because you have to go back and fix it manually every time then look no further because we have preder this amazing extension for visual studio code acts like a code stylist automatically formatting your code based on a predefined set of rules prer makes sure that your code looks clean consistent and easy to read sounds awesome right so let's see how it works first you need to install the extens so let's do that I'm stania welcome back to my channel to install preder you just go to your extensions and then you search for prettier the first search result should be exactly what you're looking for and then you can click on install over here should take a couple of milliseconds and then you should have it install it's pretty small the polisher is prettier. so now that we have this installed the actual extension let's check the supported languages here we can see that it supports these languages JavaScript typescript flow jsx Json CSS scss L HTML view angular handlebars Ember glimmer graphql markdown and yo so now that we have the extension installed let's install prer in the command line interface because if we search for pretty resolution in the extension document ation we will see that to fix the version of preer that we are using in a project we will need to run a command we see that this extension will use preder from your Project's local dependencies this is recommended when this setting preder resolve Global modules is set to true then the extension can also attempt to resolve Global modules if you have preder installed globally should preder not be installed locally with your project dependencies or globally on the machine the version of prer that is bundled with the extension will be used so in case we want to have control of that version and we want to install prer in a project and pin its version as recommended here we can see that it is recommended we need to run this command the command is mpm install prier D save exact I'm going to copy this like this and then I'm going to go to my project right now I am encoding with Stephania this folder that I created for the channel and I'm going to start the terminal open the terminal in the terminal I'm going to start or create a package.json file with mpm in it mpm is what we use to install packages it comes with not. JS so you may need to download that and install it if you don't have mpm already so the first thing we're going to do is we're going to create a package.json file with everything by default we're just going to keep the default package name name default version empty description the default entry point test command keywords authors license just for the sake of this demo we're going to keep all the default values and empty if we can is this okay yes so now we see our package.json file over here with everything by default what is our next step if we want to check the version of preor that we currently have available we could try to run npx preder hyen hyen version okay to check if we have anything there available because we already installed the extension so we're going to run that and check if we have a version right now we have 3.2.5 which is the version that comes bundled with the extension but if we want to take that instead and instead of using the extension we want to actually choose the version that we want to use or we want to keep that fixed as a local dependency we can run this command paste we paste it command and then we run it like this then you will see that we have a package lock. Json file which tracks all the changes in our package.json file and we see a new folder with the node modules and we find prior over here we don't actually need anything inside that folder but we just know that prior is installed so after we have prior again we can run MPX prer hyphen hyphen version and then we see 3.2.5 so we still have the same version but if they were different we could take that from the local dependencies so now that we have that ready and we check the version we're going to see how you can actually set preer as your default formatter because let's create a new file and let's call this index.js just to stay consistent with our Json file with our package.json file here we have our index and let's just write a sample code if a is greater than 10 we're going to console.log a else we're going to console.log a * 2 just as an example we're going to check how prettier is going to fix the spacing and the indentation and other features of the style of our code automatically I'm going to change this to two spaces great let's see how we can actually use preder if we go to our settings like this in the gear icon and then we click on settings if we go to preter we will find at the very bottom this option editor default formatter this defines a default formatter which takes precedence over all the other formatter settings right now it's none by default but we can choose from this list of formatters and I'm going to see if preter is available over here yes it is here in the list preder code formatter so we're going to choose preder great so now we have it as our default formatter for all languages we can see that this will be the default formatter for all languages if we go to our Command palet with command shift p and we see here we go to open user settings open user settings in Json format if we go here you can see that I've customized many user settings here we can see it the last one that we added here editor. default formatter this setting this property is set to predor in vs code so this will be the default formatter for all languages but if we want this to be the formatter for a specific language we can also add this setting to a specific language how can we format this code manually like running a command or using a keyboard shortcut let's say that I am not following the style guide at all and this code looks really bad I want to format it nicely with just a few clicks how can I do that well right now I'm saving the file and nothing is changing right but if I want to format the file I just need to click on shift option F on on Mac OS on Windows that would be shift alt F and then I can save my file because it's formatted nicely you can see how it's actually following our guidelines for the spaces and it is key following the best practices for writing readable JavaScript code we also have the option to let me just undo all of this and go back to the ugly format and if we open the command pallet and we search for format document we can click on this command and it will be formatted Auto atically according to their rules of preder awesome right but that is a more manual process how can we save some time and automate this so the file is formatted every time we save it automatically well that is format on Save and it's actually quite helpful let's go back again to that ugly format and let's enable format on save for that we need to go to our settings and then we search for format on save this is a specific setting in Visual Studio code if we check this by default it's not enabled if we enable this we're going to format the file on save for this a formatter must be available the file must not be Sav after a delay and the editor must not be shutting down so we customize this and then we close the settings and now if we make a change to our file you can see the little white dot here and and then I save the file voila everything goes back to normal we have the nice format and the code is readable and easy to understand that is format on save you can also disable that for specific languages and let me show you this if we go to the documentation format on Save and we go here you can turn on format on Save on a language basis by scooping the setting over here in the user settings in the Json file that we just saw if we want to format on Save only on JavaScript and we don't want to format on Save on any other programming language then we can scope this setting to JavaScript only but if we do want to enable this globally for all the programming languages we would set this to true and then this to false for that specific programming language so that's that's how you can actually disable this for specific programming languages now that you know how to enable and disable format on Save we're going to see some configuration settings some settings that you can customize for prettier let's go to our settings and let's search for prettier there are tons of settings that you can choose from and customize we're just going to have a quick overview of some of the most important ones you can set a path to to the prier configuration file you can enable control or control whether prier is enabled or not this requires a Reload because you can disable prer whenever you need to just like you disable an extension you can specify the end of line used by prer you can ignore specific files and we will see that in just a moment but this is where you set the name of the file that is going to Define what you want to ignore it's sort of like a g ignore file but for preter brackets on the same line bracket spacing there are many different style gues to choose from print with and so on if you want to add a semicolon at the end of every line this is very subjective like in JavaScript doesn't really change the functionality but if you want to add it you can keep this enabled or you can disable it you can also keep a single attribute per line This is interesting it enforces a single attribute per line in HTML jsx view an angular I think this will be very interesting I'm going to enable this and I'm going to create an HTML file just index. HTML if we use this emit abbreviation to have the basic HTML structure and I save the file let's see what happens voila this is what happens you can see that each attribute in HTML is on a separate line really awesome right you can also change if you want to use use single quotes or double quotes you can change the tab width the number of spaces it should use per Tab and if you want to indent lines with tabs or spaces so there are many different things that you can customize here and at the end you will also see the list with the default formatter let's talk about the pretor configuration file which is another great way of defining how we want to configure the format and the style of our file for that let's go to the preer documentation the official preer documentation here we can see configuration file you can configure prier via in order of Precedence we can have a pror key in our package.json file so if we do have prer installed as a local dependency then we can add this to our package.json file and we can also add a prier RC file written in Json or yamoo I'm going to use this option just to show you how this works but we have many different options afterwards so but I think these two will be the ones that you will be using most frequently and you can see some basic configuration over here this is an example with Json format we can set the trailing comma tap with if you want to use uh semicolons or single quotes and this is very very helpful it's basically like the settings that we had in the settings panel of Visual Studio code but for a specific project and in case you want to share these settings you can share the file and just H share it with your colleagues and you can all follow the same rules very easily so let's go back to visual studio code and let's create one of these files I'm going to create the new file prier RC like this prer RC and the file is going to be in Json format and I'm just going to set the tab width to B two and single quote to be true so I'm going to set a tap width of two and single quote to true now let's see what happens if I write a line of code and I use double quotes hello world and I'm also setting the top width to two spaces so let's just indent this with four spaces and let's see what happens if I save the file voila you can see that now the double quotes were replaced by single quotes So that is awesome it can save us a lot of time and the four spaces were replaced by only two spaces so we're keeping the indentation consistent and that's all thanks to the magic of this configuration file great you can find a full list of the settings that you can customize over here if you go to the extension and the documentation and you go here to predor settings all of these options can be configured dur directly in the extension you can see bracket spacing End of Line bracket on the same line print width semi single code tab width trailing comma if you want to use tabs and all of these settings can also be customized in Visual Studio code for the entire extension and for all your projects so that is amazing amazingly customizable what if you want to ignore files and ignore lines of code because you won't always want to enforce those rules on all your files or all your lines of code how can you just ignore them and continue formatting the rest of your files well for that you have something called a preder ignore file if we go to the preter documentation again and now we go to ignoring code we can see that we can use preder ignore pretty much like a git ignore file is to ignore not reformat certain files and folders completely you can also use preter ignore comments to ignore parts of files and this file should be created in the root of your project it uses the G ignore syntax so if you want to for example ignore all HTML files you can just write this to asterisk a slash another asterisk for any name this is like a wild card operator and then the extension HTML it's recommended to have a preder ignore in your project this way you can can run this command which we will run in just a moment to make sure that everything is formatted but without actually modifying the files that you don't want to format your editor will know which files not to format so let's do this and let's go to our editor right now we have an index.js file and we have an an index.html file I'm going to make some changes here to the style just to break some rules over here and I'm going to create that preder ignore file prier ignore and if we want to ignore all the let's say JavaScript files we just need to write this two asteris a slash and then the wild card for any name any file namejs if we save this and now we save our Javascript file you will see that it is not formatted previous L it was we do have format on Saved automatically set up but this is not working because we are ignoring all JavaScript files if we do save the HTML file it will be formatted according to the rules so this is super helpful it's like a g ignore file but for prettier and this is also helpful in case you want to run a specific command let me show you you this it's very helpful but for that we will need to go to our settings and disable format on Save just in case you don't want to format your files on Save and instead you want to run a command to format all your files we do have a command line interface command that you can run let me show you this I'm ignoring JavaScript files you know so this is still going to stay exactly the same and we're just going to format our HTML file with the command let me just remove this remove this remove this okay like this we're not formatting it on save anymore and we're going to go to our terminal now if we go to our terminal here we can run the command MPX prer hyphen hyphen right and a DOT the dot is telling the command that we want to format had all the files in our current directory which is coding with a Stefania and its subdirectories so if we had any folders here all the files within those folders would also be formatted but this process will still follow the rules that we have enforced in prier ignore and it will ignore those files or at least it should if we run the command let's see now if we run the command we see the output awesome we see the files that were modified we see all the files this one index.html was formatted and we see that other three files were unchanged now HTML is nicely formatted but if we go to JavaScript the file was ignored so now we see that peter. ignore did actually have an impact in the process now if we remove this from predor ignore we save the file and then we run the command again now we are formatting index. JS and we see the file fixed and nicely formatted preder is just a great timesaving tool another great thing about prer is that we can use commments in different programming languages to ignore specific parts of our code so they are non formatted let's say that I want to ignore this conditional I don't want this condition to be formatted like this I don't want anything to be formatted how can I do that well we do have some comments that are called preder ignore they are individual comments that you can write in your programming language we have different formats for different comments in different programming languages and I'm going to show you that in the documentation but in JavaScript we just write this comment PR here ignore and that will ignore the next node in the app abstract syntax Tree in this case that would be a conditional it could be a for Loop it could be a variable definition but now if we save our file let's also make some changes here to show you that only that part of the file is not being formatted the file itself is being formatted this should change to single quotes and this should be fixed but this conditional should remain exactly the same so I'm going to save it and I'm going to run prettier I'm going to run it in the command line remember that we disabled the format on Save option so I'm going to run it in the command line and we do see that index.js was fixed correctly this line was formatted and this line was formatted to use single codes but this one stayed exactly the same because we added prier ignore if we go to the documentation in the same ignoring code article in the documentation and we check this over here we can see that in JavaScript we just need this comment that we used then in jsx we can also add this comment if we're working for example with react in HTML it's just like a normal HTML comment here we can also see that we want to ignore the attribute so we have an option to add the attribute here in the comment and we can also ignore specific attributes you can see that here we're specifying Mouse up so this attribute is is not formatted when we format the file it's really really powerful in CSS we also have this comment and in markdown we also have the option to ignore the next line over here with this comment so it's super powerful I highly recommend referring to this documentation to learn more about the different things that you can do in different languages it's a very versatile tool the key takeaways from this video are that prier automates your code formatting process it improves code readability helps you to follow best practices it saves you time which is always super helpful and it ensures that you and your team are being consistent in your code because the process of formatting is done automatically for all of you and you can share your configuration files to follow exactly the same rules thank you for watching I hope you found this video helpful if you did I do appreciate your likes and subscribe it really means so much to me and it helps the channel if you subscribe and like the videos have an awesome day

Channel: Coding with Estefania

Views: 1,237

Keywords: Learn to Code, Programming, Code, Coding, Prettier, Visual Studio Code, Extension

Id: cS3wXaPJKh4

Length: 23min 27sec (1407 seconds)

Published: Wed Apr 03 2024