func-style

强制一致地使用 `function` 声明或赋值给变量的表达式

在 JavaScript 中，定义函数有两种方法：`function` 声明和赋值给变量的函数表达式。函数声明是以 `function` 关键字开头的语句。函数表达式可以是箭头函数，也可以使用 `function` 关键字并带有一个可选的名称。以下是一些示例

// function declaration
function doSomething() {
    // ...
}

// arrow function expression assigned to a variable
const doSomethingElse = () => {
    // ...
};

// function expression assigned to a variable
const doSomethingAgain = function() {
    // ...
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

`function` 声明和函数表达式之间的主要区别在于，声明会被提升到其定义的作用域的顶部，这允许您在函数声明之前编写使用该函数的代码。例如

doSomething(); // ok

function doSomething() {
    // ...
}
1
2
3
4
5

对于函数表达式，您必须在使用它之前定义它，否则会导致错误。示例

doSomething();  // error!

var doSomething = function() {
    // ...
};
1
2
3
4
5

在这种情况下，`doSomething()` 在调用时未定义，因此会导致运行时错误。

由于这些不同的行为，通常会有一些关于应该使用哪种函数风格的指南。这里并没有真正正确或错误的选择，这仅仅是一个偏好问题。

规则详情

此规则强制执行特定的函数风格，即 `function` 声明或赋值给变量的表达式。您可以在配置中指定您喜欢的风格。

注意：此规则并不适用于所有函数。例如，作为参数传递给另一个函数的回调函数不受此规则约束。

选项

此规则有一个字符串选项

• `"expression"`（默认）要求使用函数表达式而不是函数声明
• `"declaration"` 要求使用函数声明而不是函数表达式

此规则有两个例外情况的对象选项

• `"allowArrowFunctions"`：`true`（默认 `false`）允许使用箭头函数。此选项仅在字符串选项设置为 `“declaration”` 时适用（当字符串选项设置为 `“expression”` 时，无论此选项如何，始终允许使用箭头函数）
• "overrides":
  • `"namedExports": "expression" | "declaration" | "ignore"`：用于覆盖命名导出中的函数风格
    • `"expression"`：与字符串选项相同
    • `"declaration"`：与字符串选项相同
    • `"ignore"`：两种风格都可以接受

expression

使用默认的 `“expression”` 选项时，此规则的错误代码示例

/*eslint func-style: ["error", "expression"]*/

function foo() {
    // ...
}
1
2
3
4
5

使用默认的 `“expression”` 选项时，此规则的正确代码示例

/*eslint func-style: ["error", "expression"]*/

var foo = function() {
    // ...
};

var foo = () => {};

// allowed as allowArrowFunctions : false is applied only for declaration
1
2
3
4
5
6
7
8
9

declaration

使用 `“declaration”` 选项时，此规则的错误代码示例

/*eslint func-style: ["error", "declaration"]*/

var foo = function() {
    // ...
};

var foo = () => {};
1
2
3
4
5
6
7

使用 `“declaration”` 选项时，此规则的正确代码示例

/*eslint func-style: ["error", "declaration"]*/

function foo() {
    // ...
}

// Methods (functions assigned to objects) are not checked by this rule
SomeObject.foo = function() {
    // ...
};
1
2
3
4
5
6
7
8
9
10

allowArrowFunctions

使用 `“declaration”, { "allowArrowFunctions": true }` 选项时，此规则的其他正确代码示例

/*eslint func-style: ["error", "declaration", { "allowArrowFunctions": true }]*/

var foo = () => {};
1
2
3

overrides

namedExports

expression

使用 `“declaration”` 和 `{"overrides": { "namedExports": "expression" }}` 选项时，此规则的错误代码示例

/*eslint func-style: ["error", "declaration", { "overrides": { "namedExports": "expression" } }]*/

export function foo() {
    // ...
}
1
2
3
4
5

使用 `“declaration”` 和 `{"overrides": { "namedExports": "expression" }}` 选项时，此规则的正确代码示例

/*eslint func-style: ["error", "declaration", { "overrides": { "namedExports": "expression" } }]*/

export var foo = function() {
    // ...
};

export var bar = () => {};
1
2
3
4
5
6
7

declaration

使用 `“expression”` 和 `{"overrides": { "namedExports": "declaration" }}` 选项时，此规则的错误代码示例

/*eslint func-style: ["error", "expression", { "overrides": { "namedExports": "declaration" } }]*/

export var foo = function() {
    // ...
};

export var bar = () => {};
1
2
3
4
5
6
7

使用 `“expression”` 和 `{"overrides": { "namedExports": "declaration" }}` 选项时，此规则的正确代码示例

/*eslint func-style: ["error", "expression", { "overrides": { "namedExports": "declaration" } }]*/

export function foo() {
    // ...
}
1
2
3
4
5

忽略

使用 `{"overrides": { "namedExports": "ignore" }}` 选项时，此规则的正确代码示例

/*eslint func-style: ["error", "expression", { "overrides": { "namedExports": "ignore" } }]*/

export var foo = function() {
    // ...
};

export var bar = () => {};

export function baz() {
    // ...
}
1
2
3
4
5
6
7
8
9
10
11

何时不使用它

如果您想允许开发人员自行决定如何编写函数，则可以禁用此规则。

版本

此规则在 ESLint v0.2.0 中引入。

进一步阅读

JavaScript 作用域和提升
www.adequatelygood.com

资源

• 规则源代码
• 测试源代码