本文介绍如何使用 ESLint 的 no-shadow 规则，精准识别并警告子作用域中与外层作用域同名的变量声明，避免因变量遮蔽（shadowing）引发的可读性与维护性问题。
本文介绍如何使用 eslint 的 `no-shadow` 规则，精准识别并警告子作用域中与外层作用域同名的变量声明，避免因变量遮蔽（shadowing）引发的可读性与维护性问题。
在 JavaScript 中，当一个变量在内层作用域（如块级作用域、函数作用域或箭头函数）中被重新声明，且名称与外层作用域中的变量完全相同时，就会发生 变量遮蔽（variable shadowing）。这种写法虽语法合法，却极易导致逻辑混淆、调试困难，甚至掩盖预期的变量引用。
例如以下代码：
{
const myVar = "ok";
if (true) {
const myVar = "not ok"; // ⚠️ 警告：遮蔽了外层的 myVar
console.log(myVar); // 输出 "not ok"
}
console.log(myVar); // 输出 "ok"
}尽管 myVar 在两个作用域中互不干扰（得益于块级作用域），但语义上极易误导开发者——误以为两次 console.log 引用的是同一变量，或忽略内层重声明对可维护性的负面影响。
此时，ESLint 内置规则 no-shadow 正是为此场景设计的。它专门检测并报告所有遮蔽外层变量的声明行为（包括 var、let、const、函数参数、函数声明等），且默认启用严格模式下的跨作用域检查（含嵌套块、函数、类、模块等）。
✅ 正确配置示例（.eslintrc.cjs）：
module.exports = {
rules: {
'no-shadow': 'error' // 或 'warn' 以降级为警告
}
};⚠️ 注意事项：
- no-shadow 默认不检查全局作用域中的变量遮蔽（如重声明 window 属性或 Node.js 全局对象），如需增强检查，可配合 no-shadow-restricted-names 或自定义规则；
- 使用 /* eslint-disable no-shadow */ 可临时禁用，但应附带明确注释说明原因；
- TypeScript 项目中，该规则仍有效；若使用 @typescript-eslint/eslint-plugin，建议优先启用 @typescript-eslint/no-shadow（功能更完善，支持类型声明遮蔽检测）；
- no-redeclare 规则仅检测同一作用域内重复声明（如连续两个 const a = 1; const a = 2;），无法覆盖跨作用域遮蔽，因此不可替代 no-shadow。
? 小结：no-shadow 是防范“命名污染”和提升代码可读性的关键守门员。将其纳入团队 ESLint 配置，并结合编辑器实时提示，能显著降低因作用域混淆导致的低级错误。坚持“命名唯一性 + 作用域意图清晰”，是编写健壮 JavaScript 的基础习惯之一。
