ESLint 开启报错：'alert' is not defined

最近，在进行前端开发时，我使用了 ESLint 进行代码规范检查，但是常常遇到这样的问题：'alert' is not defined，引发我一番思考和研究。下面将分享我探讨的结果。

什么是 ESLint？

ESLint 是一个插件化的 JavaScript 代码检查工具，可以在编写代码的过程中，自动发现并报告代码的问题。ESLint 的最大特点在于其灵活性，可以支持用户自定义规则以及集成到不同的开发环境中。

报错分析

在前端开发中，经常使用 alert() 函数来弹出对话框。然而，ESLint 在做代码检查时，会默认认为 alert() 函数未被定义，从而引起错误提示。

这个问题的根本原因是因为 alert() 函数是由浏览器对象提供的，它并不是标准的 JavaScript 函数。在未经过明确声明的情况下，ESLint 无法智能识别 alert() 函数属于哪个对象。

解决方案

为了解决这个问题，我们可以通过以下两种方法来告诉 ESLint 如何识别 alert() 函数：

1.全局声明 alert() 函数

在代码的顶部使用 /* global alert */ 声明，告诉 ESLint alert() 函数是从全局对象中引入的：

/* global alert */

function myFunction() {
    alert('Hello World!');
}

这样，ESLint 就会将 alert() 函数识别为全局对象的属性。

2.在环境变量中添加 alert() 函数

在 .eslintrc.js 配置文件中添加如下代码：

// javascriptcn.com 代码示例
const env = {
    browser: true,
    es6: true
}

module.exports = {
    //...
    "env": env,
    "globals": {
        "alert": "readonly"
    },
    //...
}

其中，告诉 ESLint 我们在浏览器环境中进行开发，将 alert() 函数声明为只读属性，这样就可以不必手动声明全局对象。

总结

通过学习和思考，我们了解了 ESLint 报错的原因和解决方案。使用 ESLint 对代码进行规范化检查，可以帮助我们在实际开发中，提升代码质量、减少错误和 bug，为我们的项目开发带来巨大的便捷和效益。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f6af11f6b2d6eab3f3ff5c