Tuesday, 25 September 2018

Introduction to ESLint


What is ESLint?


JavaScript linting utility

What is linting?


Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines.

Why do we need linting in JavaScript?


JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. Without the benefit of a compilation process, JavaScript code is typically executed in order to find syntax or other errors. Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.

Installation


ESLint community is advocating local installation although a global installation is used in the guide on ESLint's webpage [source].

"If you want to include ESLint as part of your project’s build system, we recommend installing it locally." [Local Installation and Usage]

To install ESLint locally (after running npm init):

> npm install eslint --save-dev

package.json now contains:

"devDependencies": {
  "eslint": "^5.6.0"
}

Configuration


To set up configuration file use:

C:\dev\github\demo-html-css-js\node_modules\.bin>eslint --init
? How would you like to configure ESLint? (Use arrow keys)
  Use a popular style guide
> Answer questions about your style
  Inspect your JavaScript file(s)

NOTE: Read here why it might be better to run this command and create config file in the root directory of your project. If you choose to do so, navigate to root directory and run npx eslint --init.

This option makes eslint asking a set of questions:

? How would you like to configure ESLint? Answer questions about your style
? Which version of ECMAScript do you use? ES2018
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Windows
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in C:\dev\github\demo-html-css-js\node_modules\.bin

This config file looks like this:

..\node_modules\.bin>type .eslintrc.json
{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}


Usage


We can now call ESLint from command line:

..\node_modules\.bin> eslint <path_to_JavaScript_file>

References:


ESLint
How to disable “unexpected console statement” in Node.js?
disallow the use of console (no-console)

1 comment:

micheal pan said...

BE SMART AND BECOME RICH IN LESS THAN 3DAYS....It all depends on how fast 
you can be to get the new PROGRAMMED blank ATM card that is capable of
hacking into any ATM machine,anywhere in the world. I got to know about 
this BLANK ATM CARD when I was searching for job online about a month 
ago..It has really changed my life for good and now I can say I'm rich and 
I can never be poor again. The least money I get in a day with it is about 
$50,000.(fifty thousand USD) Every now and then I keeping pumping money 
into my account. Though is illegal,there is no risk of being caught 
,because it has been programmed in such a way that it is not traceable,it 
also has a technique that makes it impossible for the CCTVs to detect 
you..For details on how to get yours today, email the hackers on : (
atmmachinehackers1@gmail.com ). Tell your 
loved once too, and start to live large. That's the simple testimony of how 
my life changed for good...Love you all ...the email address again is ;
atmmachinehackers1@gmail.com