Previous blog posts have highlighted various pitfalls developers should be aware of when coding in javascript. Then there were discussions on various solutions to every issue highlighted.
This post dives deep into some very amazing tools most relevant in recent versions of javascript from es6. These tools are more indulging and proactive when it comes to code monitoring.
Linting Tools:
So what is linting all about?
lint, or a linter, basically is a tool that analyzes your code and basically highlights any errors, bugs, or even syntax errors.
Before we get to look at these tools there are a few highlights that a developer should be aware of when coding with the latest versions of javascript especially when using an ide like vs-code. One of these highlights is that it's always a good idea to make your ide( aware of the version of javascript you are using. for example;
let name = 'cyrus';
The keyword let is fairly new in javascript and is used to declare variables in the latest javascript versions. Now an ide like vs code will highlight it and even provide a warning like this;
'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). (W104)jshint(W104)
As you can see, in the response a tool called jshint responded but remember the code does not have an error. To mitigate this all you have to do is tell the ide of the js version you are using to code with the following lines of code at the beginning of your js file;
// jshint esversion:6
Once you include this code snippet at the top of your file, as commented as it is, the latest javascript code snippets will not be highlighted as we had in our first example.
There are other tools just like this that even highlight the errors in your code and we may not look at all of them in this post but you should have a look at;
- eslint
- jslint
- jscs
The other tool I'd like to look at is a strict directive in javascript. This is quite an amazing feature that is either utilized to affect your entire .js file or a particular part of the program like a function. Strict directive mode;
Checks for errors, bugs, and issues with your code,
Checks whether there are any undeclared variables,
Checks the use or misuse of reserved keywords in your code.
This feature is particularly useful when you choose to refactor your code. You can use it in various code functions to ensure they execute smoothly and once satisfied apply it to the main .js file.
When placed at the beginning of the javascript file, then all the javascript code in that file runs on strict mode and when it's placed inside a function, all the code inside the function runs on strict mode.
The syntax of placing the directive in your file is quite simple;
'use strict';
placed at either at the top of your .js file or at the beginning of the function. An example where this mode is effective in code is checking for undefined variables;
"use strict";
/* jshint node: true */
let namesList = function () {
names = ['cyrus', 'codes', 'javascript'];
console.log(names);
};
namesList();
console.log(names);
Which will highlight the variable name names and indicate that it's not defined with the help of jshint and once you try to run the code, the strict mode will produce a reference error on the same issue;
ReferenceError: names is not defined. Thank you for taking your time to read this article and hopefully you'll follow me on Twitter and or stick around and have a look at more posts. I'd appreciate the gesture.