ESLint + Prettier + VS Code — The Perfect Setup

[Music] all right hello everybody this is going to be an update video for my es6 IO course as well as I'm just gonna throw it up on YouTube because I know this is a big pain point that people have in general for getting prettier and insolent setup with their vs code in a way that just works and you don't have to have any any tears or anything like that so I went ahead and created an es lint config that does it all in one and it sort of has a set of base rules underneath it it's actually based on air B&B rules and then you can configure it out from there if you do do or don't like any of the settings so let's jump into it for this one I want to do it absolutely from scratch so there's no files or anything you need to to get this up and running so I just have an empty directory right here and the first thing we need to do is just type NPM in it and I just like to use - why and that what that will do is it will just scaffold out a package.json and open that up in my editor here next let's just make a code AS then we need a dot es Lindt RC file that's going to hold all of our settings then we'll go into our code AS and let's write some code that will be fixed in formatted so let's write a function called say hi and maybe put a space there and I don't put a space here and inside of here let's save our age equals 10 no space there I'll say Const maybe here will will take in a name put two spaces there this is hopefully driving you crazy here we'll say Const age is equal to 12 what other kinds of terrible things can we do here let's do an array of our things is equal to square bracket cool let's use double quotes here and put some spaces there alright I think that's that's about so we have done a couple things here first we've written some formatting errors here where it's not bad JavaScript but it's it's formatted not to my liking second we have this like variable here maybe we'll change that to a let it doesn't get used so that's an issue it's never recent so why is it a let and not a Const so these are just things that are our possible issues that will come up now what I like to use is I like to use es lint and Esalen is gonna give me errors about the quality of my code things that could potentially cause bugs down the road and then prettier it what it's going to do is prettier just cares about the actual formatting of the code things like these spaces shouldn't be here or this should be a Const and like why is there a whole bunch of space right here in why are you using double quotes and single quotes being mixed things like that right so prettier is going to fix all of the two now setting up these tools isn't the easiest thing on earth and setting up two separate tools for every single project that you have can also be a little bit of a pain so I'm here to show you this is lint config that I've created where it's an es lint config but it also has a plug-in called prettier which means that it's going to fix both the issues that are formatting as well as do all of the regular es lint stuff that we are we know and love so how do we get it up and running I'm going to show you how to get it up and running for each of your projects so I've got the docs right here I'm gonna open up my terminal and clear that out so again we've got our code AS super package.json and we've got our es lint that's a hidden file that's why it's not showing up there there's some flag I need to pass so next we need to run npx install peer depp's - - dev es lint config West Boston and what this is going to do is that this is a package that I've published to NPM called es lint config West boss but in order for this package to work it actually needs a couple other packages to actually work as it needs es lint it needs the air B&B config it needs a plugin for using es Lin inside of script tags in HTML files it needs the plugin for prettier it needs the accessibility plug-in the Airbnb needs there's a whole bunch of stuff I got some stuff on react hooks here which I imagine will be folded into the Airbnb eventually we need prettier so all of these things are required but they're not part of NPM installing my package there peer dependencies so the easiest way to install peer dependencies is to use this new npx thing we have NP x comes when you install node it's actually part of NPM but it's just for running scripts and it's awesome because if I just paste that in here and we open up our package JSON you can see it's actually going to install all of the things that are needed and necessary if you wanted to globally install this you just pass the - - global flag instead of - - dev sometimes I'll do that I do do that on my own system so that I can have a global install covers everything I write and then I do it on a per project basis as well so there we go I've installed all of my dev dependencies that are needed for this thing to work next thing we need to do is to actually go into our yes lint our C file open it up I set a curly bracket and somebody just say extends that's in quotes and it's going to extend I like to give extends an array of items you can give it just a single string but if you want to extend multiple packages you totally could in this case and we're just going to extend West boss and it knows from the naming convention that es lint config West boss this that that part is not necessary and needed in there then we'll go ahead and make some commands that run in our package JSON this step is not totally necessary if you set it up with vs code but I'm just gonna show you how to do it anyway so we'll go into our scripts here I don't have a test so I'm gonna remove that one and we're just gonna call this a lint and in here we're just gonna say es lint dot and then I'm going to make another one that's called : fix and we will pass the - - fix flag and that's going to be the important one that we have here so give that a save now if we go in here and we run NPM let's go back to our code actually let's watch it here so NPM run lint : fix you see it's running off a boom you see all of that stuff happened what happened is that the spacing issues all fix themselves the fact that I use let here fix itself I use double quotes here that that fixed itself as well and any other weird formatting issues that I have especially things like indentation and and all that nice to be such a sticking point for me I'd always tell my students make sure you in date your code properly and spend time on what your code looks like all of that doesn't matter anymore because prettier will just automatically format it for you so that's good and then you can also see there are some yes lint errors these are things that are not not fixable because it's just the way that you've written your code but it is warning us that I said like say hi you made this function here but you never defined it and that's the no unused VARs property same with the warning here name has never used you get the point right these are all of the the issues that we're getting here no shadow so I'm making a variable here called age which also has an variable up here called age so if some of these issues are you said huh I would like to turn those off all you need to do is to go into your yes lint are see you pop a rules on here and then you simply just give it the name of the the rule that you'd like to turn off and you can look these up on es lense website to see what they mean and and and they're there meaning behind it but if you want to turn it off you set it to zero and give it a save and now if I were to rerun that it should complain there we go it complains a whole lot less because I've turned it off I can turn it to one and it's simply just going to turn them into a warning and I can turn it into two which is simply going to turn them into actual errors so that's how you can override it if you're curious what all of the rules are you can go to my es lint in here you can take a look at like I've turned off the node debugger no alert no await in loop so these are things that Airbnb because I'm extending Airbnb they've set forth and that I disagree it's just not the way that I I code so I've turned them off myself or in this case no unused variables I said that's that is a warning one but if the variable name is response or next or how it starts with error then ignore that because that's often I use those in express all the time and if even if I'm not using them I might use them in the future I like to just have them in the the function signature there so that's all of the settings that I have inside of there the last thing you probably want to take a look at is how do you get it up and running with vs code so I have the instructions in in the readme in here as well so first thing you need to do is install the es lint package so it's called es lint it's the most popular one with 18 million installs you probably won't miss it so go ahead and install that and then if you this is where it gets a little bit weird but these are the settings that you need to have in order to get it to work because by default vs code tries to beautify your code for you and we don't necessarily want to use the built-in beautifier in vs code we want to use this new es lint and prettier so you want to go to your settings and click on the curly bracket here these are all your settings here and you can use a GUI for them but these are settings are way easier if you simply just click on the curly bracket and that opens your settings dot JSON and you just want to set these here so editor format on save is set to true so every single time that you save your file it's going to try to format it for you and then what we're going to do is we're going to turn it off for JavaScript why because the next one is that we're actually not using the built-in vs code formatting we're going to be using the es lint Auto fix on save that's part of the es lint plugin finally you do not if you have the prettier plug-in installed I personally don't but some people have the prettier plug-in installed and if you do have it because we're not using prettier directly we're using prettier through my es lint package you need to go ahead and disable it for Jas and you don't just remove it entirely because a lot of people use prettier things like CSS and HTML and there's even like a PHP plug-in coming out for prettier so simply just disable it for JavaScript because we are running that through es lint once that's up and running you should be able to go in here and start writing some bad code again and then every single time that you save it it will just automatically format it and it should pick up based on the settings that are in your es lint settings that we have here so hopefully that helps you out I know a lot of people have a lot of trouble getting eslint and prettier up and running so that's why I've just bundled it up into this nice little nice little extends here if you do or don't like any of the settings just remember that you can overwrite any of the settings that you have here lots of documentation so hopefully you enjoyed that let me know what you think and I'll see you later

Channel: Wes Bos

Views: 149,763

Keywords: ES6, HTML, CSS, Javascript, Web Development, Coding, Design, Dev Tips, Web Design, Website, Web, Internet, Internet code, Tips, How To, tutorial, web design tuts, net tuts, web tuts, coding tutorial, advice, development advice, friendly internet, programming, programming help, html, css, javascript, workflow, code editing, design, graphic design, graphic designer, designer who codes, designers who code, design prototyping, Trello, Mind Maps, Responsive Web Design (Industry)

Id: lHAeK8t94as

Length: 12min 32sec (752 seconds)

Published: Tue Mar 12 2019