Using Zeus with Eslint

Find Tips and tricks on how to better use the Zeus IDE. Feel free to post your own tips but please do not post bug reports, feature requests or questions here.
Post Reply
jussij
Site Admin
Posts: 2494
Joined: Fri Aug 13, 2004 5:10 pm

Using Zeus with Eslint

Post by 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
eslint-comp.png (144.08 KiB) Viewed 1919 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
eslint-error.png (175.44 KiB) Viewed 1919 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
Post Reply