ESLint with Prettier and Vue in VS Code

so most people understand the concepts of code lending and formatting and how crucial they are in our development workflows and yet even with cli and boiler plates it can still be pretty frustrating to get it all set up properly in this video we're going to focus on vue.js vs code and how to get both eslint and prettier working together the goal is to have linting errors show up in your editor as live feedback and be able to fix formatting errors automatically on save while also not having the two constantly conflicting with each other take a look at this example to understand what i mean so you can see here down in my problems pane i have a whole list of issues that are being reported by eslint you can also see in my editor i see red squigglies and i can hover over these lines and actually see what these problems are i'm able to click on the quick fix button here and i'm just going to fix all auto fixable problems now this is going to clean up all the problems in this file but you're going to see it did some formatting and my file's not saved so if i save it now the formatting goes back to the way it was and i still have the same problem so by the end of this video you'll not only know how to set up eslint and prettier in a view project but you'll also understand how to avoid this issue but before we do that we first need to understand the difference between code linting and code formatting linters are primarily concerned with code quality having a rule set up that disallows empty functions is an example of a check for code quality and here's another example of a linter doing its job here the code quality check is preventing me from assigning a value inside of a conditional if i hover my mouse over the red line you'll see the first issue here is expected a conditional expression and instead saw an assignment this is coming from eslint and this is actually valid javascript syntax and there's valid reasons people do this but it's also an easy place for bugs to occur since most of the time in this situation you would actually be intending to check for equality and not trying to make an assignment here so most teams prefer to avoid this altogether and the simplest way to do that is to just set up a linting rule that prevents it from happening so then what is code formatting well formatters are concerned with code style like whether you should include a semicolon at the end of a statement or not obviously the answer is no by the way or if indentations should be two spaces or four and let's just not even talk about whether or not you should be using tabs or spaces because tabs are just nonsense nobody should be doing that all right so now we're ready to jump in and actually do some real work so for this tutorial we're going to be using the view cli to scaffold our vue.js project this will get us about 90 of the way to having everything we need so it just makes sense to use this uh if you guys like more in-depth tutorial explaining how to set all of this up from scratch just let me know in the comments below just in case at the time of watching this video there's newer versions of the cli i'm going to get you to scaffold your project using npx and that command just looks like this so npx add view slash cli at 4.4.6 create and then i'm just going to call this linting with view and i'm going to hit enter okay now that that's done i'm just gonna go ahead and select the default preset by hitting enter okay great now that that's done you can go ahead and just cd into the project and then open that up in vs code [Music] once you have that open the first thing you should check out is the package.json file and you'll notice in the script section there's already a command called lint and if you scroll down further there's another section here it's called eslint config and this is where the vcli has set up all the rules that eslint needs in order to do its work i'll come back to these options in a minute but first i'm going to show you how to break one of these rules so you can see how this works so just go to source components helloworld.view and then go into the opening template tag and just add an attribute called key and we're going to save the file now you're not going to see any errors yet because we haven't set that up but if you open up your terminal with control tilde or command tilde if you're on a mac we're going to run a command called yarn lint and if i scroll up we're going to see that the error is template cannot be key place the key on real elements instead so this error is actually coming from our eslint config and eslint has already been installed as a dependency when we use the view cli and this is already really powerful because we can run this command as a step in our continuous integration and then can be set up to fail if this command has any issues and this is exactly what helps teams maintain coding standards across a project while not having to rely on code review to catch small things like this it allows reviewers to focus on more important things like implementation and not have to worry so much about missing a key attribute on a template tag let's just fix this error quick and then i want to show you how you can adjust easel and config before we move on to prettier now go back into your package.json if you scroll down to the eastlint configs section we're going to focus on this extends bit right here and these rules are actually collections of many rules that you don't have to have every single one to find instead you can just extend one or many collections to simplify your config the view cli gave us two by default and we're gonna focus on this first one here uh the plugin view slash essential there's actually more rule collections we can extend from and find the list of options you just head over to github and visit island plug-in view um i'll leave a link in the description but you can also just do a search for it and you can probably find it there once you get to the page you just go to docs and then click on rules and this is where you can see a list of all the rules available for this plugin as well as all the collections that we can extend now with view three finally around the corner from being officially released uh the first section is all for view three we're using v2 so i'm just going to keep scrolling down until i see that instead which is here and the way these rules work when you extend them is that they bring in all the rules for the collection or category as well as all the rules with a higher priority so in the case of this one the essential it also includes all the view base category which is actually only two rules so when you extend essential you get the rules from base as well as all the rules you see in this list below in a minute we're going to come back here for reference when we update our eslint config to have more strict linting rules but first i want to get the linting errors to show up inside of via's code without having to run the command in the terminal so switch back to vs code and then open your extensions tab and just search for easelint and the extension you're looking for is called eastland by dirk boemer volmir and i already have it installed so i'm just going to enable it and you'll just want to click install and then once that's installed just go over to the helloworld.view file and there is something i forgot to mention at the beginning of this video or rather a extension that i forgot to disable so if you are not having syntax highlighting here it's because you're missing a plugin called v tour and that's also the plugin that we need in order to render the eslint errors inside vs code without having to run it in the terminal so just go ahead and do a search for v tour if you don't have it already and make sure it's installed and then just to double check open up your settings you can do control comma if you're on windows or command comma if you're on a mac whenever i'm editing linting rules or formatting settings i always like to make sure it's just scoped to my workspace so i'm just going to click workspace and then search for vtour and just scroll all the way to the bottom of these settings and just make sure that all the validation options down here uh so the template the style and the script uh they should all be checked now you can just close your settings and back into helloworld.view let's just add that key attribute back to the template tag which we know already is an eastlint error sweet now we have feedback in our ide and we can hover over these red lines and we can actually see exactly what the problem is as well as a link that you can click to read more information if you don't know what the rule is so let's just jump back over to vs code and just delete that attribute there so we can get ourselves back to ground zero and now this is a pretty good setup already um eslint is highlighting linting errors in our code and eslin also has rules that care about how our code is formatted as well if you remember earlier in the video we talked about that overlap between linters and formatters so you could actually just stop here and you have a pretty decent setup that would allow you to enforce certain coding standards in your app as well as auto format the code based on those rules i'm going to make the es lint rules a bit more strict so i can show you an example of what i'm talking about so let's just open the package.json again and if you go down to the extends section where it says plugin colon view essential we're just going to change essential to recommended and go ahead and save and so now you should see errors um and if you hover over one of these lines you'll see these aren't code quality issues uh they're code formatting issues and eslint can take care of these uh automatically just by running that yarnlin command like we did earlier inside your terminal and now that's formatted and this can be set up with a git hook or a part of your continuous integration process and this will help your team enforce not just the code quality standards across your app but as well as stylistic opinions as well the problem with this approach is that we usually don't want to format our code using a command line tool but have our editor or ide do it for us instead usually automatically as we type or whenever we save a file this code already has some basic formatting built in but it won't work very well inside your view files for one but also the formatting won't be in sync with the linting rules you've set up in your eslint config and you might even be wondering why well if vs code already has this why don't we just use the formatting in vs code and just not use eastland at all well the first reason is eastlin isn't just for formatting remember its main strength is in enforcing code quality not just code style and the other reason is that not every developer on your team is going to be using vs code some might be on sublime or webstorm or whatever the only way you can really enforce the code styles across each team member is by using an external tool with its own config like eslint the other tool we can use if you haven't already guessed is prettier and prettier is going to handle the formatting side of things so we have a way to share a config with our other developers on our team while also being able to take advantage of the formatting features of our code editors like formatting on save or formatting while we type so let's open up the extension panel again and you're just going to search for prettier and i already have prettier installed so i'm just going to enable it and reload okay and then because this is a view app and we need formatting to work inside of these templates there's one more step we have to do and that's open up the settings and we're gonna go search for v tour and i always like to just check off workspace and you should look for the formatting options and you just want to make sure that the settings are using prettier for your css html and javascript as well as other languages if you're using prettier for that too and then go ahead close your settings from here we can auto format our code by opening up our command palette and just search for format document and you want to click on format document with and i already have v tours set up but you'll just want to click configure default formatter and this might seem unintuitive at first but remember vtour is doing the work of figuring out how to format code inside of these view single file components prettier is just kind of sitting in as the back end for vtour to talk to once you do that we can now just run format document and this is the first problem that we run into when we're using prettier with eslint so you see these errors now we just formatted our code but now we're violating the rules that we have set up in our eslint config and this is the problem that we had at the beginning of the video where you format your code you have errors you run your linter the linter fixes those errors but then you save the file and you're just stuck in this loop now the way that we fix this is actually pretty simple so prettier has a plug-in that we can pull into this project and what it's going to do is delete or override all of the formatting specific rules to eslint and that'll allow prettier to handle its job which is formatting code and i'll drop a link in the description below but if you go to the prettier website and you go to the docs under integrating with linters you're going to see mention of this exact problem we're running into and they link to this package called easelandconfig prettier so if you just click on it it'll take you to the github page and you can scroll down to the installation section here and if you want you can just copy this whole line if you're using npm i'm just going to take the name of the package and switch back into vs code and i'm just going to install this with yarn add dash d and then eslin config prettier and this will just install it as a dev dependency since we don't need this in production great now if we go back to the browser [Music] you can see we have to add this rule collection uh so i'll switch back to vs code again and go to the package.json [Music] and it's important that this goes at the bottom of everything and also since we're using view there's one more collection that we need to bring in so just go back and you'll see there's a list of additional exclusions that we can add and we're just going to bring in the prettier view exclusion and we'll add it back to our package.json and save the file and we are finally done you can go to the helloworld.view and you can format the code you can create linting errors like this and see the feedback and none of this is conflicting with anything you can even run yarn lint in your terminal and that's it guys thank you so much for watching if you have any questions please let me know in the comments below and don't forget to like the video and please subscribe cheers

Channel: Dan Fletcher

Views: 22,666

Keywords:

Id: 7qfMmCN4Uwk

Length: 19min 59sec (1199 seconds)

Published: Fri Jul 24 2020