引入外部JS库后ESLint/JSLint/JSHint报未定义、已赋值未使用错误如何解决

报错核心原因 #

• 这类ESLint/JSHint/JSLint的报错完全是静态扫描工具的固有逻辑导致的：校验工具只会对单个JS文件做语法、作用域分析，不会解析HTML里的脚本加载顺序，也不会预判运行时由外部库挂载到全局的变量，因此扫描main.js时会认为Rellax、AOS是未定义的非法变量，和是否使用jQuery完全无关。
• 之前尝试用函数包裹代码没生效，是因为哪怕把代码包在自执行函数里，校验器依然无法识别这些全局变量的合法性，自然会继续报错。

分场景解决方法 #

单文件快速生效 #

直接在main.js最顶部添加对应校验工具的全局变量声明注释即可：

• ESLint / JSHint 通用写法：

/* global Rellax, AOS */

• JSLint 单独写法：

/*global Rellax, AOS*/

项目级全局生效 #

如果不想每个用到这些库的文件都加注释，可以修改对应校验器的项目配置文件，一次配置全项目生效：

• 本地配置文件修改：在项目根目录的.eslintrc/.jshintrc文件的globals字段下添加声明：

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

• CodeKit内置校验器修改：直接打开项目的CodeKit设置面板，找到对应校验工具的「预定义全局变量」输入框，填入Rellax, AOS即可，无需修改任何业务代码。

无配置兼容的容错写法 #

如果不想修改校验配置，也可以在调用外部库前加一层类型判断，这种写法会被所有静态校验器自动识别为合法，同时还能避免外部库加载失败时直接抛出运行时错误：

/* RELLAX */
if (typeof Rellax !== 'undefined') {
  var rellax = new Rellax('.rellax');
}
/* AOS */
if (typeof AOS !== 'undefined') {
  AOS.init();
}

内容的提问来源于stack exchange，提问作者user1406440