Monday, 2 December 2019

Eslint Standalone tool

I have created a standalone Eslint tool the last weeks! This tool is available through Npmjs here: https://www.npmjs.com/package/eslint-standalone The source code is available here: https://github.com/toreaurstadboss/eslint-standalone To clone the repo, you can run this command:

git clone https://github.com/toreaurstadboss/eslint-standalone.git

This animated gif shows how the tools shows linting capabilities. The loaded .eslintrc.js file errors if there are ES6 syntax, which does not work well in Internet Explorer. This is done by specifying env->es6 set to true and parserOptions->ecmaVersion set to '5'. Why would you even consider supporting Internet Explorer as a browser for your products ? Well, in the real world, some customers still use Internet Explorer due to company restrictions and compability reasons. So this standalone tool together with .eslintrc.js file below should help you check files conforming to ES5 Syntax and thereby supporting Internet Explorer.

module.exports = {
  "plugins": ["ie11"],
  "env": {
    "browser": true,
    "node": true,
    "es6": false
  },
  "parserOptions": {
    "ecmaVersion": 5,
  },
  "rules": {
    "ie11/no-collection-args": ["error"],
    "ie11/no-for-in-const": ["error"],
    //"ie11/no-loop-func": ["warn"],
    "ie11/no-weak-collections": ["error"]
  }
};

To check that your Javascript code works using this tool, add the .eslinrc.js file above in the folder of your project (or any parent folder on that media disk volume). Then run the command eslint-standalone.exe after adding the .eslintrc.js file. You should then have outputted to the command line the errors (or warnings found) of ES6 Syntax, which IE does not support. Note that I have not added functionality for '--fix' with this ESLint tool yet. You must inspect the warnings and errors reported and manually adjust/fix the Javascript source code. Also note that this tool only supports looking at .js and .htm and .html files. I tried adding .cshtml files in the list of file globs supported, but the tool could not understand Razor syntax. Feel free to give me some tips here if you know how to add this as a support. Also note that it is additional documentation to be found for this tool on the Npmjs.org site and also in the GitHub repository.
eslint-standalone.exe 
The sample screen shot shows how to run the tool from the command line (simple command). I deliberately added an arrow method in a Javascript file and the tool quickly spots this issue. For a medium sized project the tool takes only 5-10 seconds to execute.