多文件/项目ESLint配置：如何解决函数未定义及未使用报错

嘿，这个问题我在维护传统多JS文件的项目时碰到过好多次！ESLint默认是单文件独立检查的，所以跨文件的函数调用/定义很容易触发误报——要么在调用的文件说“函数未定义”，要么在定义的文件说“函数已定义但未使用”。下面给你两种实用的配置方案，按需挑选：

方案1：全局变量声明（适合简单小项目） #

如果你的两个JS文件是直接通过<script>引入、函数暴露在全局作用域的，直接在.eslintrc里声明全局函数即可解决两个问题：

{
  "env": {
    "browser": true, // 开启浏览器环境，识别window等全局对象
    "es2021": true
  },
  "globals": {
    // 把需要跨文件调用的函数声明为全局变量，"readonly"表示不会被重新赋值
    "calculateTotal": "readonly",
    "renderUI": "readonly"
  },
  "rules": {
    // 忽略那些专门暴露给其他文件用的函数的“未使用”报错
    "no-unused-vars": ["error", { 
      "varsIgnorePattern": "^(calculateTotal|renderUI)$" // 用正则匹配目标函数
    }]
  }
}

解释： #

• globals字段告诉ESLint：这些函数是全局可用的，别在调用它们的文件里报“未定义”。
• varsIgnorePattern让ESLint忽略指定函数的“未使用”错误——毕竟它们是给其他文件调用的，不是当前文件没用。

方案2：针对文件单独配置（适合多文件复杂项目） #

如果你的项目里JS文件职责明确（比如一个是工具函数文件，一个是业务逻辑文件），可以用overrides给不同文件单独设置规则，更精准：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "overrides": [
    // 针对工具函数文件（比如utils.js）：忽略它里面暴露的函数的“未使用”报错
    {
      "files": ["utils.js"],
      "rules": {
        "no-unused-vars": ["error", {
          "varsIgnorePattern": "^(calculateTotal|formatDate)$"
        }]
      }
    },
    // 针对业务逻辑文件（比如main.js）：声明它需要用到的全局函数
    {
      "files": ["main.js"],
      "globals": {
        "calculateTotal": "readonly",
        "formatDate": "readonly"
      }
    }
  ]
}

额外小技巧： #

如果你的函数是挂载到window对象上的（比如window.calculateTotal = function() {}），只要开启了browser环境，ESLint会自动识别window，但还是需要通过上面的方式声明全局变量，避免“window上的属性未定义”的报错。

如果不想在配置文件里写死函数名，也可以在调用函数的文件顶部加注释：/* global calculateTotal */，不过配置文件统一管理显然更省心~

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