Page 1 of 1

Using the ESLint Tool

Posted: Tue May 12, 2020 1:30 am
by jussij
Here are the instructions on how to use the ESLint tool: https://eslint.org/

Installing Node.js
ESLint requires Node.js so make sure it has been installed as per the details found here: https://nodejs.org/

Installing ESLint
The full ESLint installation details can be found here: https://eslint.org/docs/user-guide/getting-started

Here is a summary of those instruction:

1. Run this command to install EsLint:

Code: Select all

npm install eslint --save-dev
IMPORTANT: Depending on your Windows security settings this command may require admin rights to run correctly.

2. Using the command line prompt, create a simple test JScript project as follows:

Code: Select all

md c:\projects\tutorial
cd c:\projects\tutorial
npm init
This will create a package.json project file as needed by ESLint tool.

Create a simple test.js file in that project folder as follows:

Code: Select all

var foo = bar;

function addOne(i) {
    if (i != NaN) {
        return i ++
    } else {
      return
    }
};
3. Run this command to initialise ESLint for that project:

Code: Select all

npx eslint --init
IMPORTANT: Depending on your Windows security settings this command may require admin rights to run correctly.

4. Run this command to test check the linter:

Code: Select all

npx eslint test.js
That command should result in this output::

Code: Select all

C:\Tutorial\JScript\test.js
  1:5   error  'foo' is assigned a value but never used    no-unused-vars
  1:11  error  'bar' is not defined                        no-undef
  3:10  error  'addOne' is defined but never used          no-unused-vars
  4:9   error  Use the isNaN function to compare with NaN  use-isnan
  9:2   error  Unnecessary semicolon                       no-extra-semi

5 problems (5 errors, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
Running ESLint from Inside Zeus
To run the linter inside Zeus edit the JScript Document Type using the Options, Document Types menu and inside the Compiler panel enter this command as the Command Line:

Code: Select all

npx eslint -f codeframe test.js
Open the test.js file and use the Compiler, Compile menu to run the linter for this file.

Using that menu will produce this output inside Zeus:
js-eslint.png
js-eslint.png (189.11 KiB) Viewed 11050 times

Clicking on the errors from that output will navigate to the line of code in the source file with the reported error.

Cheers Jussi