1 00:00:02,250 --> 00:00:10,770 Well for example with our extension. For that, again hit command shift P or a control shift P to open 2 00:00:10,770 --> 00:00:17,380 this command panel, type ESLint and choose create ESLint configuration. 3 00:00:17,420 --> 00:00:24,110 Now you get a couple of options down there in the terminal and you can choose how you want to use 4 00:00:24,120 --> 00:00:24,400 ESLint, 5 00:00:24,440 --> 00:00:29,780 if you want to check the syntax or if you want to check the syntax and also find problems or if you 6 00:00:29,780 --> 00:00:36,260 want to do that and also enforce a specific code style, so you can basically choose how strict you want 7 00:00:36,260 --> 00:00:37,230 to be there. 8 00:00:37,310 --> 00:00:43,700 Now I'll go for the last option there and now you have to choose if you're using modules and how you're 9 00:00:43,730 --> 00:00:47,980 using them and we're using the default Javascript modules import export syntax, 10 00:00:48,010 --> 00:00:51,230 we can ignore the other option for now. 11 00:00:51,230 --> 00:00:55,270 We're also asked if we're using any specific framework and we are not, 12 00:00:55,280 --> 00:00:56,860 so we can choose none of these here, 13 00:00:57,900 --> 00:00:59,960 if we're using Typescript the answer is no 14 00:01:00,000 --> 00:01:06,780 so we can just enter an n here and hit enter. Where our code runs, it runs in the browser so we select this 15 00:01:06,780 --> 00:01:14,360 option, hit space and hit enter and then we can also choose if we want to use a popular style guide as 16 00:01:14,360 --> 00:01:15,170 a preset, 17 00:01:15,290 --> 00:01:21,560 so basically a code style guide defined and developed by other people. If you want to answer a couple of questions 18 00:01:21,560 --> 00:01:28,130 about our style to create our own guide or if our file should be inspected so that a style guide is 19 00:01:28,130 --> 00:01:29,060 generated. 20 00:01:29,070 --> 00:01:40,630 Now I'll try this last option here and I want to have a look at assets/scripts/app.js, scripts app.js. 21 00:01:40,630 --> 00:01:43,680 Hit enter, 22 00:01:43,680 --> 00:01:47,430 we can then choose which kind of config file should be generated, 23 00:01:47,430 --> 00:01:53,020 I want to get a JSON config file and after all of that, you should get such a eslintrc.json 24 00:01:53,060 --> 00:01:58,060 file. Again of course, you can read all about how you can configure it and use that in the 25 00:01:58,060 --> 00:02:04,890 official documentation which you find on npmjs and in the resources linked to from that page. 26 00:02:04,890 --> 00:02:10,330 If we look into this file, we see this is the configuration that was assumed, 27 00:02:10,330 --> 00:02:14,200 it basically has a couple of rules set up now and here, 28 00:02:14,220 --> 00:02:21,240 the rules part is indeed the most interesting thing. You see there are a lot of rules here, 29 00:02:21,440 --> 00:02:24,010 basically a lot of things you can check for. Now 30 00:02:24,020 --> 00:02:33,950 for example, in there, if we search for quotes, we see that for quotes it accepts single quotes. 31 00:02:33,970 --> 00:02:38,500 Now this means that if I go into my app.js file and I would use double quotes here which is not a 32 00:02:38,500 --> 00:02:41,530 technical error, it would not like that. 33 00:02:41,530 --> 00:02:43,750 Now how can we see that it doesn't like that? 34 00:02:44,470 --> 00:02:51,490 Well, simply reload your project, so close Visual Studio Code and reopen it and ESLint should kick in 35 00:02:51,490 --> 00:02:58,590 and here it's telling me that strings must use single quote. Of course, again it's not a technically error 36 00:02:58,790 --> 00:03:03,010 it like this but we're basically not following our own style guide, 37 00:03:03,190 --> 00:03:06,000 so therefore I'll change this to be consistent again. 38 00:03:06,120 --> 00:03:13,570 It's also complaining about global this which is not defined, no undefined variables must be used. 39 00:03:13,590 --> 00:03:19,290 Now here we of course know that global this is actually a reserveed word which is available. We can 40 00:03:19,290 --> 00:03:24,640 click on quick fix for this and actually disable this specific rule for this line, 41 00:03:24,710 --> 00:03:31,530 this comment here is then added automatically and it tells ESLint please ignore this line here or ignore 42 00:03:31,530 --> 00:03:34,740 this specific rule for this line here to be precise. 43 00:03:36,090 --> 00:03:41,610 Now we can also dive into our other files and here for example we see that we got an unexpected blank 44 00:03:41,610 --> 00:03:44,340 line after a variable declaration. 45 00:03:44,340 --> 00:03:48,070 If we click on quick fix here, we see a lot of potential fixes, 46 00:03:48,090 --> 00:03:54,340 for example if I click on the first one, you see that line thereafter simply was removed. 47 00:03:54,360 --> 00:03:59,340 Now of course if you're not happy with that rule to exist in the first place, you can search the specific 48 00:03:59,400 --> 00:04:01,160 error it's pointing at, 49 00:04:01,170 --> 00:04:08,340 in this case the new line after var rule and go into your eslintrc file and search for a new line 50 00:04:09,120 --> 00:04:15,090 after var here and change this rule, for example to change this to always. 51 00:04:19,910 --> 00:04:25,760 If you do that, this specific rule is gone because now we actually force a new line after every variable 52 00:04:25,970 --> 00:04:32,210 definition, hence now in app.js I actually have an error here because I now don't have a new line here. 53 00:04:33,630 --> 00:04:36,180 So let me fix this here to always have a new line 54 00:04:36,240 --> 00:04:42,240 after we define a constant or a variable. Here it's now complaining about some trailing spaces 55 00:04:42,240 --> 00:04:44,840 and therefore we can of course also get rid of that, 56 00:04:44,850 --> 00:04:50,300 so here we can also click on quick fix and fix this problem. Now in analytics.js, 57 00:04:50,420 --> 00:04:58,250 we got more issues, for example console log is not allowed because during production, it doesn't add much. 58 00:04:58,250 --> 00:05:00,290 Now here I actually do want to allow it, 59 00:05:00,290 --> 00:05:07,670 so I'll go back to eslintrc, search for no console and instead of having error here, I'll set this 60 00:05:07,670 --> 00:05:08,690 to off 61 00:05:08,690 --> 00:05:11,390 which means this rule is disabled, 62 00:05:11,390 --> 00:05:12,830 we're now allowed to do that. 63 00:05:13,010 --> 00:05:15,700 Here I get an error that I got a missing semicolon, 64 00:05:15,770 --> 00:05:16,580 pretty good to have 65 00:05:16,580 --> 00:05:21,680 so let's add one and here, it's complaining about some magic number thing. Now it might not be clear what 66 00:05:21,680 --> 00:05:27,380 this means and therefore you can always click on quick fix, show documentation for no magic numbers and 67 00:05:27,390 --> 00:05:32,360 we can then open that link and on a new page, it leads you to the official documentation that essentially 68 00:05:32,360 --> 00:05:35,260 tells you that numbers like this are not allowed, 69 00:05:35,270 --> 00:05:46,410 it would be better to store them into a constant timer time and then use that here instead like this. 70 00:05:46,610 --> 00:05:49,700 Here, we now also got an error that a new line is required, 71 00:05:49,700 --> 00:05:55,640 we can simply add a quick fix here and here it's also complaining about a new line it wants. 72 00:05:55,660 --> 00:06:01,990 Well actually here, I don't want this, so I'll go to my function call argument new line rule here, 73 00:06:01,990 --> 00:06:02,700 copy that, 74 00:06:02,710 --> 00:06:10,150 go to eslintrc, search in that file for that and change error to control space, let's see our options, 75 00:06:10,300 --> 00:06:16,630 to off to disable that rule and with that we fixed this file. Now we can do this for all these files and as you 76 00:06:16,630 --> 00:06:18,300 see, there are a lot of issues. 77 00:06:18,450 --> 00:06:24,100 Now what you might want to do is again type ESLint in the command prompt and fix all auto fixable 78 00:06:24,100 --> 00:06:30,230 problems but even with that, you'll see we got a bunch of errors because there are different rules which 79 00:06:30,410 --> 00:06:32,090 simply don't like a certain style. 80 00:06:32,090 --> 00:06:36,430 Now let me make clear here that this does not mean that our code is bad, 81 00:06:36,470 --> 00:06:42,080 these are just some defaults which are set up here which are simply not finetuned to your specific 82 00:06:42,080 --> 00:06:43,400 requirements. 83 00:06:43,400 --> 00:06:48,910 We would have to go through all or most of these rules and instead of setting them all to be error 84 00:06:48,920 --> 00:06:54,080 here, find sensitive defaults to see what we want allow and what we don't want allow. 85 00:06:54,200 --> 00:06:59,290 Now it's not something I want to do here because it's simply a task you have to do for your own, 86 00:06:59,290 --> 00:07:05,210 you have to find your specific code style and therefore what I will do is I will remove all these rules, 87 00:07:05,240 --> 00:07:06,830 except for quotes 88 00:07:06,840 --> 00:07:12,790 so that we force single quote strings and simply get rid of all these rules. 89 00:07:12,920 --> 00:07:22,230 So mark all these rules here, delete them, also after this quotes rule so that I have way less rules now 90 00:07:22,410 --> 00:07:28,520 and if we do that of course, we fix all these problems because we now have no ESLint rules there. 91 00:07:28,790 --> 00:07:34,700 Again you might want to tweak this to your requirements but you typically don't want to add all potential 92 00:07:34,700 --> 00:07:40,820 rules and set all of them to error but add a couple of rules here which are important to you, like 93 00:07:40,820 --> 00:07:46,880 enforcing single code strings, like enforcing a semicolon and you can always add a new rule here with 94 00:07:46,880 --> 00:07:52,340 a comma, then double quotes and then the rule name, you get auto completion here as well and you can check 95 00:07:52,340 --> 00:07:59,300 out the official ESLint docs, for example here if I search for semi and set this rule, I can set this 96 00:07:59,300 --> 00:08:07,570 to error and now we would get an error if we don't use a semicolon. So that's how you can manage your 97 00:08:07,570 --> 00:08:08,130 rules here, 98 00:08:08,140 --> 00:08:11,940 again official quotes and auto completion here are your friend 99 00:08:12,040 --> 00:08:17,920 and with that you can retailor your own code style and enforce it across your entire project. 100 00:08:17,980 --> 00:08:22,240 So that was linting with ESLint and the vscode extension, 101 00:08:22,240 --> 00:08:27,940 now let's move on to bundling where we don't work on our code quality but instead really on the code 102 00:08:27,940 --> 00:08:34,840 we output so that we don't output multiple files where we need multiple requests but instead we bundle 103 00:08:35,020 --> 00:08:36,100 our code together.