ESLint 报错：'xxx' is defined but never used
在前端开发过程中，我们经常会使用 ESLint 工具来检查代码的质量、风格等问题。然而，在使用 ESLint 进行代码检查时，有时候会碰到 xxx is defined but never used 的报错。这个报错意味着定义的变量、函数、类等等的实体被定义了，但是在后续的代码中却没有被使用到。这篇文章将详细介绍这个问题，以及如何避免它。
为什么会出现这个问题
通常，这个问题是由于代码重构、修改所导致的。例如，我们可能会将一个函数改名，然后相应的在代码中修改了函数名，但是忘记将调用该函数的地方也修改掉。另外，在开发过程中，我们可能会定义一些变量、常量等等，但是后续的代码中却没有使用到，这也是导致这个问题出现的原因之一。
如何避免这个问题
为了解决这个问题，我们可以按照以下几个步骤进行操作：
- 检查代码
在检查代码之前，我们需要保证代码是经过编译、打包等过程的。这也意味着我们应该先执行 npm run build 命令，生成编译后的代码，再进行检查。这样做的原因是，我们在开发过程中，经常会使用一些开发环境下的 API，这些 API 可能在编译后的代码中被移除了。如果我们直接检查开发环境中的代码，就会产生误报。
- 检查变量、函数、类的定义和调用
在检查代码之前，我们需要明确项目中所有的变量、函数、类的定义和调用情况。这需要我们对项目进行一定程度的理解和了解。我们需要仔细查看每个文件中的代码，确认是否有定义但是未被使用的实体，找到未使用的实体后进行修改，删除或者注释。
下面是一个例子：
// 未使用的函数
function unusedFunction() {
console.log('This function is not used.')
}
// 使用了 BigInt，但是没有使用到 b 变量
const a = BigInt(10)
const b = 20如果在代码执行 npm run build 后，我们运行 ESLint 工具进行检查，就会出现 unusedFunction is defined but never used 和 b is defined but never used 的报错。要解决这个问题，我们就需要删除 unusedFunction 函数，或者将其注释掉；另外，我们也需要注意在代码中没有使用的变量、常量等等，及时进行修改或者删除。
- 使用 ESLint 插件
另外，我们还可以使用 ESLint 插件，来辅助我们检查代码中的问题。例如，我们可以使用 eslint-plugin-unused-imports 插件来检查未使用的模块导入问题。这个插件可以在检查后，自动移除未使用的模块导入语句，从而避免了这个问题的发生。
- 使用开发工具
最后，我们也可以使用一些开发工具辅助我们进行代码开发和检查。例如，对于使用 VS Code 的开发者来说，我们可以安装 ESLint 插件，这个插件可以在代码编写过程中，即时提示可能存在的问题，从而让我们及时发现并修复这些问题。
结论
在前端开发中，我们会经常碰到 xxx is defined but never used 这个问题，这个问题说明了我们定义的实体未被使用到，这是一种代码存在问题的表现。为了避免这个问题，我们应该在代码编写过程中，时刻注意变量、常量、函数、类等等的定义和调用情况，并使用 ESLint 工具进行检查；另外，我们还可以使用插件、开发工具等等辅助工具，来帮助我们提升代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710d309ad1e889fe2fc3b92