Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:28Length:1.7 hours
Speedy workflows with atom.io
  • Overview
  • Transcript

6.7 Linter

It's really hard to not make mistakes when you're writing code. One of the benefits of using a full-blown IDE such as Intelliger Visual Studio is that they're very good at finding your errors before they ever become a problem. However, with editors such as Sublime and Atom, we're left searching through a stack trace to figure out what's going on. To fix this issue a lot of people use linters. And linters look though our code, and they identify any areas that look like they could cause errors. There are some command line utilities you can use to run linters, but atom provides and entire linter package that allow us to see our errors within atom. So let's pull up the settings tab, and we'll go into packages and we're going to search for linter. And right here we see linter and we'll click learn more. And what we can see with linter in this picture is that when there are errors, they show up to the left gutter. And then we get a little dialogue box letting us know what the error was one of the confusing things about this package though is that it's actually a parent package that needs sub packages installed to work. Right down here we see available linters and it has a bunch of different languages. PHP, Java, JavaScript, all these different types of linters that we can use. So not only do you need this package, you also need the linter for your specific language. For this video, we're gonna cover one using JavaScript. So install the linter right here. Now that that's installed, we'll do a jshints linter. And right here we see linter jshint, so we'll install that. And now, we'll refresh our ATOM by saying control,option, command L. So, let's go and write some bad code. So, let's go and create variable. And since I haven't closed out that statement, we can see that there are two problems right here. If I click right here, we can see down in this dialog box at the bottom, the problems we have. It's saying that route provider is already defined, and that's because it looks like I'm creating a far route provider. I'm seeing other errors as well, so if I didn't notice that this var was up here at the top, I could be confused looking through a crazy stack trace for a while until I finally saw that this was just something simple, a three character mistake at the top. Let's make another mistake to see some of the more power that we can get out of elinter let's create a new object, and we'll create a new fire based reference, and don't worry about what that is, we're just going to worry about the error. Right here I'm saying new fire base, and the thing I'm not doing is I'm not using parenthesis for my constructor function. If we click on this right here it let's us know that missing parenthesis invoking a constructor. And that's because this is a warning. This will run without producing an error. It's not a best practice but it will work. That's the example of a warning. If we were to put an equals sign at the end of firebase, that will result in an error. And our linter will let us know that. Not only are we missing the parenthesis for the constructor function, we're also creating a bad assignment, because we have an equals sign that doesn't really go out to anything. And that will cause an error. And those are the two key components of a linter. We have warnings, and we have errors. And that's just an example for the JavaScript linter. There's actually a lot of different linter packages being created every day. One of the more interesting linter packages that was just recently released is called Write-Good. In the Packages tab we can search for Write-Good. In here we can see Linter Write-Good. So we'll go and click Learn More. There's not a ton of information about it, but it currently does work and it's a very useful tool. Linter-write-good is a linter interface for the write-good library. It says that it lits English prose for developers who can't write good and want to do other good stuff too. Then I'll just leave it at that for those of you who get that joke. And the write-good library was written by Brian Cord on the angular team. And what this does is it analyzes your writing and gives you suggestions depending on what you've written. Write Good itself is just an NPM package and this linter leverages that inside of Atom. So let's go back and install this package. So we'll click install, and now that it's installed we'll go and refresh, Ctrl + Alt, Cmd + L. And let's go down here and let's open up the README.md. Right now it's not complaining about anything I've written just yet. But if we scroll down here, we can start to see some complaints in the left gutter. If I click on only, it lets us know that only can weaken meaning. And as I scroll down, we'll click on are located, that tells us that are located is a passive voice. And continuing on, is made up of is passive. All of is wordy or unneeded. So this package will analyze your writing and give you suggestions based upon what you've written. Now everything can be taken with a grain of salt. Passive voice isn't always terrible, and sometimes I find it to be too strict on what is defined as wordy. Or you can glean some information from here, is where you see the same error popping up over and over again. If you see a lot of suggestions for being too passive, that might be something you want to take a look at. This is just an example of how Linters are really helpful, especially in the context of ATOM. And as a recap, we need to remember that we have to have the main Linter package installed. And then from there, we can install other Linter packages such as the JavaScript package and the Write Good package, and there's other Linter packages that we can use as well. So going forward, try using a Linter, you just may find yourself saving a lot of time.

Back to the top