Using Zeus with Eslint

[jussij]

Installing Eslint
To install eslint run the following command from the command prompt:

Code: Select all

npm i -g eslint

Verify the install by running the following command:

Code: Select all

eslint -h

That command should produce the following output:

eslint [options] file.js [file.js] [dir]

Basic configuration:
--no-eslintrc Disable use of configuration from .eslintrc.*
-c, --config path::String Use this configuration, overriding .eslintrc.* config options if present
--env [String] Specify environments
--ext [String] Specify JavaScript file extensions
--global [String] Define global variables
--parser String Specify the parser to be used
--parser-options Object Specify parser options
--resolve-plugins-relative-to path::String A folder where plugins should be resolved from, CWD by default
.......

Initializing Eslint
For Eslint to work it needs a project folder containing a package.json file.

The simplest way to do create this project structure is to npm using the following command:

Code: Select all

npm init

Once that command completes run the Eslint initialization using the following command:

Code: Select all

eslint --init

Using Eslint inside Zeus
Start Zeus and use the Options, Document Types menu to edit the JScript Document Type.

In the Compiler panel enter the following details:

Code: Select all

   Command Line: eslint "$fn"
   Lines Regex: [0-9]+:[0-9]+[ ]+
  Errors Regex: [0-9]+:[0-9]+[ ]+error
Warnings Regex: [0-9]+:[0-9]+[ ]+error
[attachment=1]eslint-comp.png[/attachment]

(o) Display on errors and warnings

Those settings should look like the screen shown below:

eslint-comp.png (144.08 KiB) Viewed 524 times

NOTE: To use Eslint for TypeScript files just repeat the steps for the TypeScript Document Type.

In the project folder initialized earlier, create a test.js file shown below:

Code: Select all

if (!!(typeof window === 'undefined')) {
  console.log('Hello from Node.js!');
}

Now with test.js as the active file use the Compiler, Compile menu to run the linter.

That should result in the output shown below:

eslint-error.png (175.44 KiB) Viewed 524 times

Clicking on the error should then navigate you back to the line and column where the error is found.

Using Eslint with the Fix Option
If you change the command line described earlier to be the following:

Code: Select all

eslint --fix "$fn"

Now when the Compiler, Compile menu is use the broken code will be automatically fixed and reloaded into the editor, replaced with the code shown below:

Code: Select all

if (typeof window === 'undefined') {
  console.log('Hello from Node.js!');
}

More command line options can be found here: https://eslint.org/docs/user-guide/comm ... -interface

Cheers Jussi