disallow variable declarations from shadowing variables declared in the outer scope (no-shadow)

禁止变量声明覆盖外层作用域的变量 (no-shadow)

Shadowing is the process by which a local variable shares the same name as a variable in its containing scope. For example:

覆盖是指在同一作用域里局部变量和全局变量同名，比如：

var a = 3;
function b() {
    var a = 10;
}

In this case, the variable a inside of b() is shadowing the variable a in the global scope. This can cause confusion while reading the code and it’s impossible to access the global variable.

在这种情况中，b() 作用域中的 a 覆盖了全局环境中的 a。这会混淆读者并且在 b中不能获取全局变量。

Rule Details

This rule aims to eliminate shadowed variable declarations.

此规则旨在消除变量声明覆盖。

Examples of incorrect code for this rule:

错误 代码示例：

/*eslint no-shadow: "error"*/
/*eslint-env es6*/

var a = 3;
function b() {
    var a = 10;
}

var b = function () {
    var a = 10;
}

function b(a) {
    a = 10;
}
b(a);

if (true) {
    let a = 5;
}

Options

This rule takes one option, an object, with properties "builtinGlobals", "hoist" and "allow".

对象配置项，包含属性 "builtinGlobals"、"hoist" 和 "allow".

{
    "no-shadow": ["error", { "builtinGlobals": false, "hoist": "functions", "allow": [] }]
}

builtinGlobals

The builtinGlobals option is false by default. If it is true, the rule prevents shadowing of built-in global variables: Object, Array, Number, and so on.

默认值是 false，如果 builtinGlobals 是 true，会检测内置对象如 Object，Array、Number 等等。

Examples of incorrect code for the { "builtinGlobals": true } option:

选项 {"builtinGlobals": true} 的 错误 代码示例：

/*eslint no-shadow: ["error", { "builtinGlobals": true }]*/

function foo() {
    var Object = 0;
}

hoist

The hoist option has three settings:

此配置项有三个值：

hoist: functions

Examples of incorrect code for the default { "hoist": "functions" } option:

默认选项 { "hoist": "functions" } 的 错误 代码示例：

/*eslint no-shadow: ["error", { "hoist": "functions" }]*/
/*eslint-env es6*/

if (true) {
    let b = 6;
}

function b() {}

Although let b in the if statement is before the function declaration in the outer scope, it is incorrect.

虽然 if 语句中的 let b 在 function声明之前，该示例是正确的。

Examples of correct code for the default { "hoist": "functions" } option:

默认选项 { "hoist": "functions" } 的 正确 代码示例：

/*eslint no-shadow: ["error", { "hoist": "functions" }]*/
/*eslint-env es6*/

if (true) {
    let a = 3;
}

let a = 5;

Because let a in the if statement is before the variable declaration in the outer scope, it is correct.

因为在 if 语句中 let a 在外层作用域声明语句之前，所以是正确的。

hoist: all

Examples of incorrect code for the { "hoist": "all" } option:

选项 { "hoist": "all" } 的 错误 代码示例：

/*eslint no-shadow: ["error", { "hoist": "all" }]*/
/*eslint-env es6*/

if (true) {
    let a = 3;
    let b = 6;
}

let a = 5;
function b() {}

hoist: never

Examples of correct code for the { "hoist": "never" } option:

选项 { "hoist": "never" } 的 正确 代码示例：

/*eslint no-shadow: ["error", { "hoist": "never" }]*/
/*eslint-env es6*/

if (true) {
    let a = 3;
    let b = 6;
}

let a = 5;
function b() {}

Because let a and let b in the if statement are before the declarations in the outer scope, they are correct.

因为在 if 语句中 let a 和 let b 在外层作用域声明语句之前，所以是正确的。

allow

The allow option is an array of identifier names for which shadowing is allowed. For example, "resolve", "reject", "done", "cb".

allow 选项是个标识符名称的数组，以允许他们被重写。例如："resolve"， "reject"， "done"， "cb"。

Examples of correct code for the { "allow": ["done"] } option:

选项 { "allow": ["done"] } 的 正确 代码示例：

/*eslint no-shadow: ["error", { "allow": ["done"] }]*/
/*eslint-env es6*/

import async from 'async';

function foo(done) {
  async.map([1, 2], function (e, done) {
    done(null, e * 2)
  }, done);
}

foo(function (err, result) {
  console.log({ err, result });
});

Further Reading

Version

This rule was introduced in ESLint 0.0.9.

该规则在 ESLint 0.0.9 中被引入。

Resources