Chrome扩展项目ESLint报错'chrome' is not defined(no-undef)求助

我经常碰到Chrome扩展开发者遇到这个ESLint报错问题，给你几个靠谱的解决方案，你可以逐个尝试：

• 检查ESLint配置的层级是否正确
  有时候我们会不小心把env配置嵌套在了其他字段（比如rules）里面，导致ESLint没有正确识别。确保你的.eslintrc.json（或其他格式的配置文件）中，"env"是顶级键，结构应该像这样：

  {
    "env": {
      "browser": true,
      "chrome": true,
      "es6": true
    },
    "rules": {
      // 你的规则配置
    }
  }
  

• 直接声明chrome为全局变量
  如果添加chrome环境还是不行，可以在配置里显式声明chrome是全局只读变量，这样ESLint就不会把它当成未定义的变量了：

  {
    "globals": {
      "chrome": "readonly"
    }
  }
  

• 使用专门的Chrome扩展ESLint插件
  推荐安装eslint-plugin-chrome，这个插件是专门为Chrome扩展开发打造的，不仅能自动识别所有Chrome API的全局变量，还能提供针对扩展开发的规则检查。

  1. 先安装插件：

     npm install eslint-plugin-chrome --save-dev
     

  2. 然后在ESLint配置中添加插件和推荐规则：

     {
       "plugins": ["chrome"],
       "extends": ["plugin:chrome/recommended"]
     }
     

• 验证配置是否生效
  有时候修改配置后需要重启编辑器（比如VS Code），或者重新运行ESLint命令，确保新的配置被加载。另外也可以检查是否有.eslintignore文件不小心排除了你的脚本文件，导致配置没应用到目标文件上。

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