前言
在前端开发过程中，我们经常会使用到 ESLint 这个工具来进行代码规范检查。而在使用 ESLint 进行检查时，我们可能会遇到一些错误，其中一个常见的错误就是 'xxx' is not defined。本文将详细介绍这个错误的原因和解决方法，希望能够对大家有所帮助。
错误原因
当我们的代码中使用了一个未定义的变量或函数时，ESLint 就会提示 'xxx' is not defined 的错误。这个错误的原因是 ESLint 在检查代码时无法识别这个变量或函数，因为它没有在当前作用域中被定义。
解决方法
1. 定义变量或函数
最简单的解决方法就是在代码中定义这个变量或函数。比如，如果我们使用了一个叫做 foo 的变量，但是它没有被定义，那么我们可以在代码中添加如下的定义：
var foo = 'bar';
同样地，如果我们使用了一个叫做 baz 的函数，但是它没有被定义，那么我们可以添加如下的定义：
function baz() {
// ...
}2. 使用全局变量
ESLint 默认情况下只会检查当前文件中的变量和函数。如果我们使用了一个在其他文件中定义的全局变量，那么 ESLint 就会提示 'xxx' is not defined 的错误。这时，我们可以使用 /* global xxx */ 注释来告诉 ESLint 这个变量是一个全局变量。比如，如果我们使用了一个叫做 jQuery 的全局变量，那么我们可以在代码中添加如下的注释：
/* global jQuery */
3. 使用 ES6 模块
如果我们使用了 ES6 模块，那么我们可以使用 import 语句来引入其他模块中的变量或函数。比如，如果我们想要使用另一个模块中的 foo 变量，那么我们可以在代码中添加如下的语句：
import { foo } from './other-module.js';这样，ESLint 就会知道 foo 是一个已定义的变量。
4. 使用 ESLint 的配置项
如果我们确定一个变量或函数是已定义的，但是 ESLint 却提示 'xxx' is not defined 的错误，那么我们可以使用 ESLint 的配置项来忽略这个错误。比如，如果我们确定一个叫做 process 的变量是一个全局变量，那么我们可以在 .eslintrc 文件中添加如下的配置项：
{
"globals": {
"process": true
}
}这样，ESLint 就会知道 process 是一个已定义的全局变量。
示例代码
下面是一个示例代码，其中使用了一个未定义的变量 bar，导致 ESLint 提示 'bar' is not defined 的错误：
function foo() {
console.log(bar);
}
foo();我们可以使用上面介绍的方法之一来解决这个错误。比如，我们可以在代码中添加一个定义：
var bar = 'baz';
function foo() {
console.log(bar);
}
foo();或者，我们可以使用 /* global bar */ 注释来告诉 ESLint bar 是一个全局变量：
/* global bar */
function foo() {
console.log(bar);
}
foo();或者，我们可以使用 ES6 模块来引入 bar：
-- -------------------- ---- ------- -- --------------- ------ ----- --- - ------ -- ------- ------ - --- - ---- -------------------- -------- ----- - ----------------- - ------
或者，我们可以使用 ESLint 的配置项来忽略这个错误：
{
"globals": {
"bar": true
}
}总结
ESLint 错误 'xxx' is not defined 提示我们代码中使用了一个未定义的变量或函数。我们可以使用定义变量或函数、使用全局变量、使用 ES6 模块、使用 ESLint 的配置项等方法来解决这个错误。在开发过程中，我们应该遵循代码规范，尽可能地避免出现这种错误，以提高代码质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660996d6d10417a22284c006