JavaScript linters

04/06/2018

אין תגובות

I`m rather new to front-end development, I only began touching it about a year ago on a great project which I learned a lot from it. I got to know closely to jQuery, ASP.NET MVC, I got to use external tools like kendo which are nice. But the main downside of my work is that I don`t have people around me to ask so the progress is slow, and I only learn from need, not also from looking at real projects and how they are being built.

Today I listened to a great video from “Coding Tech” channel on YouTube, video named “Type Systems Will Make You a Better JavaScript Developer” hosted by Jared Forsyth from Khan Academy. He was talking about ways to find errors in your JavaScript code and making sure your code is better. The first error tracking he talked about and the one I will talk about here is JavaScript linters.

When we code JavaScript in most code editors we write the code and run it in the browsers to check for errors. Until today this is what I have done. But apparently there are tools like JSLint & JSHint which “compile” your code, check it for coding errors and bad behaviors before you move to checking your code at runtime.

At first, I searched for JavaScript lint and got a few results which looks relevant, online JavaScript linters.
After testing the first 2 websites with not much luck I got to the 3rd site, JSHint.com. This site gave me what I needed. It takes my JavaScript code and checks it for errors. I found in my code errors like I missed a few semicolons, I left a few variables which are now no longer used, but most important it taught me how to code better with suggestion for better coding practices.

Here is a screen shot of the output I get from using the online JavaScript linter HSHint.com.

You can see form this screen shot I have several errors and warnings, most of them are easy to fix.

I marked in red lines which error/warning is pointing to which line of code, so I just added semicolon where needed, I added an ignore for the $ variable as I include jQuery in another file, and I will use ‘a’ variable as value for property g in b variable. Here is how it looks now:

Now we are left with the last error.

In JavaScript we can add functions to prototypes and extend them. In this code sample I extend the “Person” type with a new function named “newFunction”. When I run on the p instance of “Person” type with a for-in loop I print to log all of the properties and function of the type. But it also prints to log the new properties and functions added after the creation using a call to prototype.

If we want to run only on the original properties and functions of the type we need to filter out using an if statement all the “extra” properties and functions added using prototype call.

This is the reason why JSHint warned us to wrap the inside of the for-in loop with an if statement. By calling the JavaScript method “hasOwnProperty” we can check if the property name belongs to the original type, or if the property is an “extra” property. Now in the results we get only what we wanted: “Shahar” & “50”.

Using JavaScript linter tools like JSHint we can check our code before it gets to the browser, and we also might get to learn better coding practices which are harder to learn when not working with an experienced team. There are extensions to Visual Studio and other IDEs so you can check your code as you write.

Enjoy

 

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *