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!

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

在这种情况下，doSomething 在调用时是 undefined，因此会导致运行时错误。

由于这些不同的行为，通常会有关于应该使用哪种函数风格的指南。这里实际上没有正确或错误的选项，这只是一个偏好。

规则详情

此规则强制执行特定类型的函数风格，即 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"]*/

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

const foo1 = () => {};

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

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

const foo1 = () => {};
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 }]*/

const 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 const foo = function() {
    // ...
};

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

declaration (声明)

以下是对于使用 "expression" 和 {"overrides": { "namedExports": "declaration" }} 选项的此规则的 错误 代码示例

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

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

export const 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

ignore (忽略)

以下是对于使用 {"overrides": { "namedExports": "ignore" }} 选项的此规则的 正确 代码示例

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

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

export const bar = () => {};

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

何时不使用

如果你想允许开发者各自决定他们想如何编写函数，那么你可以禁用此规则。

版本

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

延伸阅读

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

资源

• 规则源码
• 测试源码