Error-Free Code is not just a dream after all... StandardJS 16.0

A complete guide on how to write, format and maintain error free code.

In this article, we’re going to learn to write the perfect code. Code that's perfectly formatted code, free from any syntactical or semantical error. Isn't that the dream though? Yes, indeed, now let's see how we can fulfill this beautiful dream together using an easy javascript library called Standard.js also known as Standard Style.

Why Do You Need Standard Style?

Before we dive into the details of how we can use Standard Style, let me address why we should use it! Some of you might already be using a combination of a linter and a formatter such as ESLint(linter) and Prettier(formatter), and must be wondering if it’s worth switching to Standard.js instead.

A linter catches bugs. It basically looks for programmer errors in your code.

JSLint was the first original javascript linter which was released in 2002. Then, JSHint that came out in 2010 offering more rules and additional configurability. Now, what most people use is ESLint which came out in 2013, it has better ES support and additional style rules catering to how your code should look. This also has a good plugin support which allows developers to create their own rules, therefore, currently, it’s widely popular in the tech industry as a linter for javascript.

So, coming back to why you need Standard Style! Simply because it saves you time.

It's a javascript style guide, linter, and a formatter all in one. This module saves you (and others!) time in three ways:

  • No configuration: The easiest way to enforce code quality in your project. No decisions to make. No .eslintrc files to manage. It just works.

  • Automatically format code: Just run standard --fix and say goodbye to messy or inconsistent code.

  • Catch style issues & programmer errors early: Save precious code review time by eliminating back-and-forth between reviewer & contributor.

Source: JavaScript Standard Style Official Documentation

Types of Errors StandardJS Can Catch?

Let’s look at a few examples of the types of errors that StandardJS can quickly catch.

Example 1:

const processUserData = 
(username, age, firstname, lastname, email, age, gender, phone, city) => {
       console.log(‘accessing age: ’, age);
}

Explanation:

The parameter ‘age’ is present twice, in the second position and at the sixth position. This is probably a result of a copy-paste that went wrong, or perhaps, a new developer was just trying to refactor the code. It’s important for me to mention here that, having duplicate parameters in a function is totally allowed in Javascript unless you are using the strict mode. In strict mode, the javascript interpreter is going to flag it as an error. To discuss how deceiving this could be for your code; when you have more than one parameter in the function with the same name, the last occurrence of that parameter is going to overshadow the first occurrence. For instance, in the above-mentioned example, when we try to access the ‘age’ variable, we're going to grab the value of the last ‘age’(at the 6th position). Now, the thing is that you won't necessarily know that there's a problem in this code until you spend hours and hours debugging the entire piece of code because it's not that straightforward.

Example 2:

if ( user.preference = “mango” ) {
    //do something
}

Explanation: This one is really subtle yet it's an easy mistake to make, besides, it's really common. In conditional statements, it's easy to mistype a comparison operator, such as a strict equality operator(===) or a loose equality operator aka type coercion operator(==), for an assignment operator(=). Now, this if statement will always be evaluated as true, as the programmer mistakenly assigned the value ‘mango’ to the ‘preference’ field of the ‘user’ object. Now, this if block will always execute. Although, it’s really hard for human eyes to spot these kinds of conceptual mistakes, however, it’s really easy for a linter to catch them.

Who uses JavaScript Standard Style?

Almost all the big players in the Tech Industry use this library.

Source: JavaScript Standard Style Official Documentation

Installation

Install the library as a dev dependency.

npm install standard --save-dev

Using Standard

Run standard to check to see what errors are there in your codebase.

npx standard

To fix the formatting and other semantic errors.

npx standard --fix

This is going to make StandardJS fix your code issues automatically. All it can not solve are some ambiguous error that needs to be fixed manually.

Be Smart Enough To Do This

You can add Standard Style to your test script in the package.json file. Now, every time you run npm test before building your code, the Standard sanity checks are run implicitly and automatically and you won't have to manually run any standard commands on the command line every time you make some changes to the code.

{
  "name": "your-package-name",
  "devDependencies": {
    "standard": "*"
  },
  "scripts": {
    "test": "standard && node your-test.js"
  }
}

Also, you can search the marketplace to find the available plugins for StandardJS specific to your code editor. For more information about this check out the JavaScript Standard Style Official Documentation.

So, that’s it about this useful Javascript library. I hope the information provided in this article provides value to you and helps you to write and maintain your code easily.

Helpful Resources: