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" 选项时，此规则的错误代码示例

在在线运行中打开

/*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" 选项时，此规则的错误代码示例

在在线运行中打开

/*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

允许箭头函数

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

在在线运行中打开

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

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

覆盖

命名导出

表达式

使用 "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

声明

使用 "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

资源

编辑此页面