Formatting your code is a waste of time - use Prettier instead

when i was teaching in the classroom poorly formatted code was the bane of my existence students would call me over to ask me a question on something and i'd look at their code and just trying to read like a string of css where i would just go on and on or their html nesting was a disaster and i couldn't figure out what i was looking at so it was always something i really harped on with my students to make sure that if they're calling me over for something their formatting must be really good so i'm not wasting my time trying to figure things out and the thing with formatting is it's actually a really personal choice as well because you know is it two spaces or four spaces for a tab or how long should your line length be or you know the ever-ending debate of whether you need semicolons or not when you're writing your javascript and i've heard of companies where these debates of these things go on for hours and days and months where people just can't agree on that and that's a bad thing if you're working on a team there should be consistency with your files but the thing is i don't think we should actually be making those decisions ourselves and i don't think we should actually be taking the time to bother about formatting all of this ourselves when we have tools they can do all of that for us hello my friend and friends and welcome back to yet another video i'm glad that you've come to join me once again and if you're new here my name is kevin and here at my channel we learn about how to make the web and how to make it look good with weekly tips tricks and tutorials and this one's less about making things look good on the page and more about making your code consistent and well formatted and looking good while you're in your editor a complete waste of time to be having these endless debates on the best way to format whether it's two or four spaces or line length or whatever it is and i also think it's a waste of time to actually be going in and manually be doing the formatting yourself when we have tools out there that can both make those decisions for us and do the formatting for us and one tool that can do that is prettier so in this video we're going to be looking at how we can get prettier installed on our system and configured we're also going to see how we can have it set up for global settings for project to project to project as well as how we can have individual configuration files for individual projects so if you do have a team of people working on a project and everybody has a little bit different of preferences set up that one project will be following that configuration file rather than the global settings and there'll be consistency throughout the project so just really fast here i am in vs code and we're going to be spending some time in here on this and just to show you a little bit of what prettier can do and it works across a whole bunch of languages but you can see here i have this non-formatted section here with the nesting's all weird and stuff and if i hit save on that automatically it's all formatted for me and then if i go over to my js file again things are a bit of a mess here i can hit save and it fixes all my formatting for me and of course a css file over here where i've put all of this in a string or i did like my students always did with this running line that goes on forever i hit save and just like magic it formats it for me now prettier is not limited to only html css and javascript it supports just a ton of files that you can see on the screen right now so just know that it's not limited to html css and javascript even though that's what i'm going to be focusing on in this video but now we've seen how it can format things let's see how we can actually get it installed on your system so let's start off by taking a look at the prettier website and it already looks pretty nice i think but just one thing that's really important here as it says right here is it's an opinionated code formatter so this is the idea with prettier is really to take the decision out of the hands of your teammates and everything so there's no debates going on and it just it's making the decisions for us and so let's just jump in and and do it rather than having arguments and stuff which is why it does only have a few options but there are a few things that we can configure with it so that's what we will be looking at as we go through on here and so if we go to install prettier it will give us the way we can install it with the command line but i'm not really going to recommend that if you want to get that i'll the link for prettier is in the description so you can see how you can do it uh with the command lines you could make sure that you know if it is set up and installed there the only problem is then you're also running it through the command line and even as the documentation says to get the most out of it you probably want to get it set up with your editor rather than doing it through the command line so to be able to do that you need the extension and i'm going to be looking at the vs code extension but you can get it for other browsers as well they have editor integrations and it's available as you can see here you know in most of the most popular editors that are out there today so you shouldn't have any issues getting the extension um or getting it configured with your editor if you're not using vs code and so let's go back to vs code since we are going to be doing this and i'm going to do a ctrl shift x to open up my extensions here and we can look for prettier and i already have it installed but we can go and take a look if you didn't have it installed you just have a green install button there and you install it and it's as easy as that really but there is one important step that you take next once you've installed it and that next step is to make sure that it's your default formatter because prettier is not the only formatter out there we want to make sure we're using prettier and we do that through editing the settings within vs code and you'll notice here it's talking about setting it up and you can definitely have different languages support and everything but the settings here that it's talking about you'll notice it is with the json format and it's we can still do it through the json format but it's a lot easier if you open your settings which is control and comma and in the search if we just look up format you'll see editor and default formatter and let's make this a little bit bigger so we can read things and you can choose from the one that you want to work and you can see there's lots of different formatters here i used to use beautify i've since switched over to using prettier and so with prettier there it's now the default one and you can choose different settings here on do you want to format when you paste code in i have that on so if i paste code from somewhere else it's going to format it automatically do i want it to format on save and as long as this is set up here and i like having format on save on personally then we're ready to rock and roll and prettier is going to be working one thing is if you're writing a lot of javascript you're probably using eslint and if you are using eslint there is one more thing that you're going to want to do and it talks about that in their documentation uh where right there es lint and other linters there is the eslint printer that just makes eslint and printer work well together so let's head back to vs code and if we just go back to my extensions here and we look up prettier yes lint and we can see right there a visual studio code extension uh format javascript and typescript using the prettier eslint package so we can get that installed um and it should do the job and so let's go and look actually i'm gonna look up prettier now in my uh extensions here so prettier and we should be able to find prettier and then here we get like actually actual prettier settings um and here's a few like a few of the things that we can change because as i said prettier is an opinionated formatter meaning it's trying to take as many of the decisions away from us as possible and so we can do things like does it always include parentheses around a soul arrow function parameter so if you know about arrow functions if you have only one parameter you don't need to have the parentheses but if you have this set which is the default of always it means that it's going to add them for you when you hit save and i'm going to skip some of these other ones just because i want to focus on the ones that you probably see the most often like jsx brackets on the same line can be a very useful one if you're using single quotes or not within jsx and print width which is going to be the line limit so this is one that you can come in and configure and here's where i mentioned the semicolon so whether to add semicolon at the end of every line or not so let's let's turn this off for fun and see and we're also going to come here and change this and we have the prettier tab width here and we'll switch that over to four and by changing those let's come over to my my javascript file here and let's hit save and notice how it removed all of the semicolons and it also changed my tab spacing over to four and let's come back to here and i go you know what i like this at two and i actually like having my semicolons on so i put both of those back on and then i come back to here i'm gonna hit save and it adds all of the semicolons back in and it puts it back to two spaces instead of four spaces and now right now this is using my global settings that i've just here so this is my personal preference but what if you have you're working in a team and you want to make sure that everybody's prettier is doing the same thing within that team and so to do that there's actually a few different files that you can create so let's just go and look here at the prettier one in the configuration file you'll notice it actually gives you a few different ways that you can create one and so we're just going to do this one here for this demo but if you have a different way or a different thing for your team that you want to set up obviously there's different ways of doing it and we're going to be doing it using as it says this is going to be written in json so we can sort of get an idea of how the settings are going to work based on this basic configuration here so let's go back to vs code and i'm going to open up my project here and i'm just going to go in the root document of my thing we're going to make a new file which is the dot prettier rc file and we'll create that and let's go back to here we're gonna copy this and we'll play with this a little bit and we'll come in and put that right there and so let's actually let's let's see what this does i'm just going to save this file so it's in my document now and let's come back to my navigation.js and let's hit save and look it's following this file right here so if i come in here and i change my tab width to 2 save that file come back over to this hit save and you can see the tab width is automatically changed and this is configured only for this project because this file is saved in the root so prettier is smart enough to know automatically to look at that file so that way everybody who would be working on this if we were working on this as a team would be using that same prettier thing and everything would be configured consistently across our entire team so if you're just working on your individual projects or other things you do not need this prettier file here you could just have it set up locally on your machine how you like to work and then when you are working with other people this is where this could be really useful to make sure that all the files within your project have the same formatting and while we're looking at code formatting right now and making our code look a little bit nicer most of the time on my channel i talk about writing css and if css is something that's a struggle for you i've recently put out a video on the six most important css concepts to understand to take the frustration out of css so if you'd like to watch that it is right here for your viewing pleasure with that a really big thank you to jan johnny stewart and tim who are my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 86,689

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, prettier, vs code, how to use prettier, configure prettier, use prettier vs code

Id: 8k-b-7rJAeU

Length: 10min 28sec (628 seconds)

Published: Thu Jan 20 2022