ESLint 未定义/被赋值但未使用

Question

I'm loading a couple of external JS files and keep getting errors in CodeKit/LSLint (and JSHint) - even though both scripts appear to work as intended when viewing in browser

All my JS files are loaded below the closing </body> tag at the foot of the page like so:

<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/vendor/rellax.min.js"></script>
<script src="js/vendor/aos.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

The main.js file, where I load external scripts currently reads like this:

/* RELLAX */
var rellax = new Rellax('.rellax');
/* AOS */
AOS.init();

But returns the following errors:

Any ideas how I resolve this? I assume the calls in main.js are looking for the references in the same place but obviously they're in an external file. Normally I'd just turn the Hints as everything works but I'd like to resolve if possible...I think previously I've maybe resolved this by wrapping in a function but that didn't work this time (as I'm not using jQUery?)

Answer 1

You can specify that those are global variables so that ESLint will not warn about them being undefined. The easiest way to do this would be to add the following comment to the top of your main.js file.

/* global Rellax:readonly, AOS:readonly */

Or, you could specify the globals in your .eslintrc file like so:

{
  "globals": {
    "Rellax": "readonly",
    "AOS": "readonly"
  }
}

Check out the ESLint docs for more details.