DEV Community 👩‍💻👨‍💻

Hung Nguyen
Hung Nguyen

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

Expected '===' and instead saw '=='.
Enter fullscreen mode Exit fullscreen mode

To set up the tool. First:

 npm install standard --save-dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  ]
}
Enter fullscreen mode Exit fullscreen mode

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

npx standard --verbose
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

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' }]
  }
Enter fullscreen mode Exit fullscreen mode

By default, ESLint will have:

{
    "extends": "eslint:recommended"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.