ESLint的no-undef规则为什么还是会报未定义变量？

你这个问题我也遇到过，确实有点坑。问题出在 ESLint 对 window.myVar 这种全局变量的识别上。

你在 .eslintrc 里加的 "globals": { "myVar": "readonly" } 是对的，但这是声明的是一个全局变量 myVar，而你在代码里用的是 window.myVar，ESLint 并不会自动把 window.myVar 当成全局变量处理。

你可以试试这样：

在 ESLint 的配置文件里加上：

"globals": {

  "window": "readonly"

}

然后再在代码中使用 window.myVar 就不会报错了。

或者如果你真想直接用 myVar，你得在全局作用域里显式声明一次变量，比如：

/* global myVar */

或者在 JS 文件中写：

var myVar = window.myVar;

这样 ESLint 才会认为你是在使用一个全局变量，而不是访问 window 对象的属性。

另外，Vue 单文件组件本身不会影响 ESLint 的这种行为，主要是 ESLint 的规则和变量作用域的问题。希望这个办法能帮你解决报错～

嗯，这个问题还挺常见的，尤其是用 Vue 单文件组件的时候。咱们一步一步来分析原因并解决。

### 1. 为什么 ESLint 还是报错？
no-undef 规则的核心作用是检查当前作用域下是否有未定义的变量引用。也就是说，它会严格地要求你只能使用那些在当前代码作用域中明确声明过的变量。

在你的例子中，虽然你在顶部写了 window.myVar = 'test'，但这里的 myVar 并没有被显式声明为一个全局变量。ESLint 默认不会自动把 window.xxx 的属性当成全局变量来看待。即使你通过 window 定义了它，ESLint 认为这和直接声明一个全局变量 var myVar 是两回事。

再加上 Vue 单文件组件（SFC）的特殊性，脚本部分可能会被提取出来单独处理，导致 ESLint 对作用域的理解和实际运行时的作用域不一致。

---

### 2. 如何正确配置？

#### 方法一：显式声明全局变量
最简单的方式就是告诉 ESLint，这个变量确实是全局可用的。你之前试过加 "globals": { "myVar": "readonly" }，但可能没生效的原因是规则配置的位置不对。确保你的 .eslintrc 文件中有类似这样的内容：

{

  "rules": {

    "no-undef": "error"

  },

  "globals": {

    "myVar": "writable" // 注意这里要写 writable，因为你在代码里修改了它的值

  }

}

解释一下：
- "writable" 表示这个变量是可以被修改的。
- 如果用 "readonly"，ESLint 会报错说你不应该给它赋值。

不过这种方法有个小问题：如果你有大量类似的全局变量，一个个加到 globals 里会很麻烦。

---

#### 方法二：通过注释临时忽略
如果不想改 ESLint 配置，可以直接在代码中通过 ESLint 注释来忽略单个变量的检查。比如这样：

/* global myVar */



window.myVar = 'test';



console.log(myVar); // 不会再报错了

这种方式适合临时处理个别变量，但如果全局变量很多的话，还是推荐方法一。

---

#### 方法三：让 ESLint 理解 Vue 的上下文
有时候 Vue 单文件组件中的脚本部分会被当作独立模块处理，导致 ESLint 没法正确识别全局变量的作用域。为了更精准地解决问题，你可以安装一个专门针对 Vue 的 ESLint 插件：eslint-plugin-vue。

安装命令：

npm install eslint-plugin-vue --save-dev

然后更新 .eslintrc 配置文件，添加插件支持：

{

  "extends": ["plugin:vue/essential", "eslint:recommended"],

  "plugins": ["vue"],

  "rules": {

    "no-undef": "error"

  },

  "globals": {

    "myVar": "writable"

  }

}

这样做可以让 ESLint 更好地理解 Vue 单文件组件的结构，减少误报。

---

### 3. 总结
- 根本原因是 no-undef 规则对全局变量的识别比较严格，需要显式声明。
- 推荐方法一是通过 globals 配置告诉 ESLint 哪些变量是全局可用的。
- 如果是 Vue 项目，建议引入 eslint-plugin-vue 插件以优化 ESLint 对 Vue 的支持。
- 方法二的注释方式可以作为临时解决方案，但不太适合长期维护。

最后提醒一下，尽量少用全局变量，尤其是在大型项目里，容易导致命名冲突和维护困难。这里需要注意，虽然解决了 ESLint 报错，但还是要评估是否真的需要使用全局变量哦！