一个小 bug 卡了好久，查了 ESLint 文档才找到解决方法

标题：ESLint 助力于解决前端开发中遇到的小 bug

前端开发中，经常会遇到各种各样的问题，其中一些小 bug 往往会让我们卡上好久，导致非常烦躁。本文将介绍我在开发中遇到的一个小 bug，并分享如何使用 ESLint 进行代码规范检测及解决该 bug 的方法，希望对读者有所启发和帮助。

问题描述

在开发一个前端项目时，我遇到了一个小 bug，导致程序运行时出现了奇怪的错误。具体表现为，在控制台中出现了如下错误：

TypeError: Cannot read property ‘XXX’ of null

当时我查询了许多资料，修改了代码多处，但问题却依旧存在。后来，我根据提示信息判断了代码发现，问题出在了对一个未定义的对象进行操作上。

let obj = null;
console.log(obj.XXX);  // 报错

ESLint 检测并解决问题

我猜测是代码规范问题导致的，于是我使用了 ESLint 工具对代码进行分析，并查看该工具的 官方文档 。

首先我全局安装了 ESLint，命令如下：

npm install -g eslint

然后，我在项目中新建了一个 .eslintrc.js 文件，并在其中进行了以下配置：

// javascriptcn.com 代码示例
module.exports = {
    "extends": [
        "eslint:recommended",
    ],
    "rules": {
        // 允许使用 null
        "no-undef": ["error", {"typeof": true}],
    },
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    }
};

在上面的配置中，我设置了 no-undef 规则，该规则用于检测使用未定义的变量。但是，ESLint 默认会把 null 视为一个未定义的变量。所以，我使用了这个规则来允许使用 null 变量，以此来解决我代码中出现的问题。

总结

在前端开发中，我们通常会遇到各种各样的问题。但我们不要怕遇到问题，要善于学习并寻找合适的解决方案。ESLint 作为前端代码规范工具，可以帮助开发者发现代码中的问题，优化代码质量；同时，也可以通过配置来解决一些小 bug，提高开发效率和体验。

示例代码

// javascriptcn.com 代码示例
let obj = null;
console.log(obj.XXX);  // 报错

/* .eslintrc.js */
module.exports = {
    "extends": [
        "eslint:recommended",
    ],
    "rules": {
        // 允许使用 null
        "no-undef": ["error", {"typeof": true}],
    },
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    }
};

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65322f967d4982a6eb47c571