 Here we have a JavaScript program. I want you to look through the program and find mistakes. Today we're going to discuss four different Visual Studio Code extensions that will help you find mistakes much more quickly than manually scanning the code. So when I look at this code, the first thing I notice is that the font is very boring. So first let's fix the font. There we go. Now we have a much more comical font, easier to read, especially for dyslexic people. So the first extension we're going to talk about is the TypeScript extension. Now the TypeScript extension comes with Visual Studio Code, and it can check JavaScript code, not just TypeScript code. So when you install Visual Studio Code, the extension is enabled by default. I turned it off, so you didn't cheat and catch the mistakes. So let's turn on the extension, which is enabled by default. So we go to JavaScript, validate in the settings, turn that back on. And here we see that some things have changed. We have this red squiggly here and this grayed out, and we got some dots. So the first issue up here is that we are missing a right parenthesis. So let's have that right parenthesis. This note over here says unreachable code detected. Now this isn't obvious, especially to beginner programmers or people just starting JavaScripts. When you have a return statement, and you have a new line, the new line will end the return statement as if you had a semicolon there. So this program behaves the same regardless of whether you have a semicolon. So what's actually happening is that we're returning nothing, and then we're skipping past this code because it's not running. That's why the TypeScript extension says unreachable code detected. So if we fix that mistake, put it all online, we no longer have unreachable code. And then down here we have three dots, the three dots indicates we could not find occupation. Did you mean occupation? So we typoed the variable name. Let's do a quick fix, change the spelling. And now our code is good to go. So that's the built in TypeScript extension. It checks JavaScript code. You can see this is just .js. I didn't have any configuration to turn on the TypeScript checker works out of the box. That's your out of the box experience with Studio Code. So let's turn that back off so we can demonstrate other checkers. The next checker we're going to look at is Dino. So let's install the Dino extension. Okay, now we get an error as soon as we install it, it says couldn't start client Dino language server. That's because Dino has two parts. It has the Visual Studio Code extension, which we just installed, but it also has Dino. Now the Dino command line utility is being installed separately. So let's go do that. In order to do that, we have to go to the Dino website. Had Dino dot land, we click the install button. There's different install options. Let's follow this option here. And let's open a terminal. And do the install. Okay, now we have Dino installed. We still don't get any feedback. We need to restart VS Code in order to have the Dino extension really enable. And we still don't get any feedback. That's because we need to enable the Dino extension. You can do it on a per project basis or you can do it globally for VS Code. Let's do it for VS Code. So let's search Dino enable and check that box. Dino has extra checks we can enable. So let's turn those on. It's called Dino lens. And here now we have some changes. We have the same right parent thing as we got before. And as soon as we type that we get some more squigglies, I love squigglies. So here we have an unnecessary semicolon. I have an unnecessary semicolon. So let's fix that. It doesn't have an option to remove the semicolon only to disable the warning. I don't want to disable the warning. So let's fix it manually. Here empty code block. Okay, I guess we don't want that empty else. And here we have the unreachable code issue again. So let's fix that. And of course, occupations misspelled. So you notice that the Dino extension has all the checks that the TypeScript extension has, which is built in, plus some extra things like finding the extra semicolon and finding the empty else. So that is the Dino extension. Let's move on to the quick lint.js extension. And let's first disable Dino. Let's disable the extension. Load. Okay, now we're at a blank slate. Let's install quick lint.js install. Alright, now we don't have any extra setup we got to do, we just install the extension and we get some squigglies. These squigglies are different than the other two extensions. Here on fancy, it says if statement is missing a right print. Okay, let's add that. Oops. We have assignment to cost variable. Okay, well, it looks like our occupation variable is const. We can't reassign a cost variable. So let's declare it with let and get rid of that issue. Here on return, it says return statement returns nothing defined. So we need to unlike the other checkers which detected the unreachable code. This one tells us at return. So it's in a different spot. The the error indication is a different spot. That's common with linters, they find issue different issues or report them in different ways. And here we have use some undeclared variable occupation, we have to fix this ourselves. So that is the quick lint.js extension. Now let's move on to the most popular code checker for JavaScript code, which is ESLint. So let's disable quick lints. Let's install the ESLint extension. Okay, so we don't get any feedback. And that is because similar to Dino, we need to install ESLint. So let's go ahead and install ESLint, which using npm. So save dev says we want to save it in our project as a developer tool. npm install save dev ESLint. So now ESLint is installed. However, we still don't get feedback. That's because we also need to configure ESLint. There's a wizard tool we can use. So let's use that ESLint init. And it asks us a bunch of questions and we can use it to customize our configuration. So let's find errors. Let's modules. Sure, we're not using react. We're not using TypeScript browser. Sure. So now after we finish the wizard, we get a squiggly here. It says unexpected token left curly, we know that's because we're missing a right print. And after we fix that issue, we get a bunch of other issues. Here we have unnecessary semicolon. Let's quick fix that. Cool. Here we have occupation is a constant. That's because this is constant, we need to make that let. We still have a squiggly here, it says occupation is assigned a value but never used. All that is because here we have a typo in the variable name. If we fix the typo here, now we're using that variable. And now it doesn't complain. Here we have an empty block statement. Quick fix. It looks like we can't disable the issue. Well, we can't fix the issue, but we can disable it. Let's not disable this fix it manually. And here unreachable code, you got to put that on one line. So that is ESLint default settings. Now ESLint has a big ecosystem of plugins. So many of these plugins add extra checks. And there's different categories of checks and different opinions on what the checks should be. You can add your own checks, of course. Let's look at some extension. Let's look at a plugin that will help us code in style. So the plugin we're going to look at is the Airbnb preset. So in order to install the Airbnb preset, we need to go to our ESLint configuration, which is an ESLint RC. And in the extends line, we need to change this to Airbnb base. Now if we do that, it doesn't find any more issues because we need to install the Airbnb preset as well with NPM. So let's do that. We can install save the ESLint config error, Airbnb base, and as soon as we install it, we get more squigglies. So here we have missing semicolon. Okay, let's fix that. Here we have strings must use single quote. So this is the opinion of the authors of this plugin that you should use single quote. So sure, let's adhere to that style. Here we have unexpected string canation. I don't know what's wrong with string canation seems legal to me. Let's do a fix. Okay, it seems like it likes using a template literals instead of string canation. Fine. And we have these red squigglies here looks like extra spaces. So let's fix those. We have a bunch of issues down here. I expect the annotation of zero. It looks like a white space issue fix that console.log unexpected console statement. This is from just documentation. But here's the checker say unexpected console statement. I think that's because it doesn't like us putting console log in production. It's just a demo. So let's fix it by disabling the checker. And then here we also have missing semicolon. So that is the different extensions. We covered the TypeScript extension, the Dino extension, the Quiklin.js extension and the ESLint extension and ESLint with some plugins.