本文介绍如何使用 ESLint 的 no-shadow 规则精准识别子作用域中对父作用域同名变量的遮蔽（shadowing），避免因变量名复用引发的可读性与维护性问题，并提供配置示例与注意事项。
本文介绍如何使用 eslint 的 `no-shadow` 规则精准识别子作用域中对父作用域同名变量的遮蔽（shadowing），避免因变量名复用引发的可读性与维护性问题，并提供配置示例与注意事项。
在 JavaScript 中，当子作用域（如 if 块、函数、循环或箭头函数内部）中声明了一个与外层作用域同名的变量时，会发生变量遮蔽（variable shadowing）。这种写法虽合法（尤其在 const/let 块级作用域下不会报语法错误），但极易导致逻辑混淆、调试困难和意外覆盖——正如以下示例所示：
{
const myVar = "ok";
if (true) {
const myVar = "not ok"; // ❌ 警告：遮蔽了外层 myVar
console.log(myVar); // "not ok"
}
console.log(myVar); // "ok"
}尽管 myVar 在两个作用域中互不干扰（得益于块级作用域），但语义上“同一名称代表不同值”的上下文切换会显著降低代码可读性，尤其在嵌套较深或团队协作场景中。
此时，ESLint 内置规则 no-shadow 是专为此类问题设计的标准解决方案。它严格检查所有变量声明（var、let、const、函数参数、函数声明、类声明等），一旦发现内层声明与外层作用域中已存在的绑定标识符同名，即触发警告。
✅ 正确启用方式（推荐 .eslintrc.cjs 配置）：
module.exports = {
rules: {
'no-shadow': ['error', {
'builtinGlobals': false, // 不检查全局内置对象（如 Math、JSON）
'hoist': 'functions', // 'all' | 'functions' | 'never'；默认仅提升函数声明
'allowRedeclare': false, // 禁止同作用域内重复声明（增强严谨性）
'ignoreOnInitialization': false // 初始化时也不豁免（如 let x = x + 1 中的 x）
}]
}
};⚠️ 注意事项：
- no-redeclare 规则仅检测同一作用域内重复声明（如 let a = 1; let a = 2;），无法捕获跨作用域的遮蔽，因此不适用于本场景；
- no-shadow 默认不检查 function 参数对函数外部同名变量的遮蔽，但可通过配置 hoist: 'all' 启用（需谨慎评估兼容性）；
- TypeScript 项目中，若使用 @typescript-eslint/no-shadow，建议优先采用该插件规则以获得更精确的类型感知检查；
- 对于有意为之的遮蔽（极少数场景），可使用 /* eslint-disable no-shadow */ 行注释临时忽略，但应辅以清晰注释说明原因。
? 总结：no-shadow 是防范作用域污染、提升代码健壮性的关键静态检查规则。将其纳入 CI 流程与编辑器实时校验，能从源头减少因命名歧义引发的潜在缺陷，是现代 JavaScript/TypeScript 工程化实践的必备配置之一。
