Formatting and linting in OSDSSG

Overviews

This week, my tool has a big chance since new features that I have been added might force me and future contributors to follow some specific rules of coding. My tool now has the support of StandardJS and ESLint.

Formatter

StandardJS helps developers on Javascript style guide, formatter and even linter. One of the features that makes me into StandardJS is that there is no need of configuration. "The easiest way to enforce code quality in your project. No decisions to make. No .eslintrc files to manage. It just works". StandardJS also have an option to fix the wrong formatting styles and linting.

standard --fix

This fix can avoid some inappropriate formatting style such as wrong indentation or error related to JavaScript Standard Style like:

Expected '===' and instead saw '=='.

To set up the tool. First:

 npm install standard --save-dev

In this case, you will need to use npx in the CLI along with the name of the tool in order for Standard to work:

npx standard

Installation has been set up as easy as that. npx standard will check all JS files in current working directory only, so please be careful. If you put your files inside a directory, add the path instead, for example:

npx standard ./bin
npx standard ./bin/osdssg.js

Sometimes, you might want to ignore some files to check, if this is the case, just add on in your package.json a property call standard.ignore:

"standard": {
  "ignore": [
    "**/out/",
    "/lib/select2/",
    "/lib/ckeditor/",
    "tmp.js"
  ]
}

To disable some rules that make you feel annoying, first run:

npx standard --verbose

This will give you a verbose output such as

Error: Use JavaScript Standard Style
  routes/error.js:20:36: 'file' was used before it was defined. (no-use-before-define)

Then in the line of code that you want to disable Standard check just add

// This will disable all rules
file = 'I know what I am doing' // eslint-disable-line
// This will only disable "no-use-before-define"
file = 'I know what I am doing' //  eslint-disable-line no-use-before-define

Linter

ESLint is used to find problem related to patterns or code that does not follow the standard rule, in my case is JavaScript Standard Rule. ESLint allows developer to find the problem related to syntax or other errors without executing the code. It provides a wonderful programming experience and avoid developers to make some silly mistakes that might affect the process of running their software.
To set up, first you need to run:

npm install eslint --save-dev

After installing the package to your project, initialize ESLint by running:

npx eslint --init

This will create in you project a .eslintrc.js which is a configuration file where you can add on or disable options based on your favorite. The property rule is where you will add on your options. For example:

// Check all variable name or functions, if they include "_" in their name, send a warning to terminal
// is_valid will be warned.
rules: {
    camelcase: [1, { properties: 'always' }]
  }

By default, ESLint will have:

{
    "extends": "eslint:recommended"
}

So all of the rules marked "✓" on the rules page will be turned on. This tool also allow some quick fix with the command:

// Remember, some errors need to be fixed by your own.
npx eslint --fix

OSDSSG with Standard and ESLint

After installation, I checked my code with Standard. There was no indentation style warning due to my VSCode has integrated with Prettier before. However, for the first time I did not know that it only worked on current directory. After adding a specific path, there were just some little indentation errors, and I could simply due with it by use npx standard --fix. For ESLint, some global variables like require, process, module, you must specify it in the top of your file:

/* global require process module */

ESLint will also check and warn any variables that have declared but not been used yet. So I had to remove those variables. On top of that, I create a test option for the tool in package.json

"eslint-check": "npx eslint ./bin && osdssg -c config.json"

This will allow ESLint to check first, if there is error, the code will stop running. To integrate the tools to my VSCode, I just simply go to extensions and download StandardJS and ESLint. They automatically check highlight errors and display them to terminal once after you save the file. They are great combination, which will maintain my code in certain rules so that future developers or contributors will know what to follow and it will make me more comfortable on managing my project.