Formatting and linting in OSDSSG
Published: 2021-11-06 04:06:33

# 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 <code>.eslintrc</code> 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 <code>npx</code> 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. <code>npx standard</code> will check all <code>JS</code> 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 <code>package.json</code> a property call <code>standard.ignore</code>:
```
"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 <code>.eslintrc.js</code> which is a configuration file where you can add on or disable options based on your favorite. The property <code>rule</code> 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](https://eslint.org/docs/rules/) 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 <code>npx standard --fix</code>. For ESLint, some global variables like <code>require, process, module</code>, 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 <code>package.json</code>
```
"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.

# Links:
ESLint: https://eslint.org/
Standard: https://standardjs.com/
OSDSSG: https://github.com/nguyenhung15913/OSD600-SSG