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
.......

More details on these command line options can be found here: https://eslint.org/docs/latest/user-guide/command-line-interface

Initializing Eslint
By default Eslint needs a project folder containing a package.json file to run.

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

If you fail to do this then the following error is produced:

Code: Select all

Oops! Something went wrong! :(

ESLint: 8.22.0

ESLint couldn't find a configuration file. To set up a configuration file for this project, please run:

    npm init @eslint/config

ESLint looked for configuration files in C:\Projects and its ancestors. If it found none, it then looked in your home directory.

If you think you already have a configuration file or if you need more help, please stop by the ESLint chat room: https://eslint.org/chat/help

Using Eslint Without a Package File
An alternative to creating a project is to use the following command line option:

Code: Select all

--no-eslintrc

Using that option it is possible to validate a parse a json file without the need to have first defined a project.

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: cmd.exe /c eslint --no-eslintrc "$fn"
   Lines Regex: [0-9]+:[0-9]+[ ]+
  Errors Regex: [0-9]+:[0-9]+[ ]+error
Warnings Regex: [0-9]+:[0-9]+[ ]+warning
[attachment=1]eslint-comp.png[/attachment]
[x] Capture Standard Output    		[x] Capture Standard Error
(o) Display on errors and warnings

Those settings should look like the screen shown below:

eslint-comp.png (144.08 KiB) Viewed 28538 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 28538 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