func-style

强制一致使用 function 声明或分配给变量的表达式

在 JavaScript 中有两种定义函数的方法:分配给变量的 function 声明和函数表达式。函数声明是以 function 关键字开头的语句。函数表达式可以是箭头函数,也可以使用带有可选名称的 function 关键字。这里有些例子:

¥There are two ways of defining functions in JavaScript: function declarations and function expressions assigned to variables. Function declarations are statements that begin with the function keyword. Function expressions can either be arrow functions or use the function keyword with an optional name. Here are some examples:

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

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

// function expression assigned to a variable
const doSomethingAgain = function() {
    // ...
};

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

¥The primary difference between function declarations and function expressions is that declarations are hoisted to the top of the scope in which they are defined, which allows you to write code that uses the function before its declaration. For example:

doSomething(); // ok

function doSomething() {
    // ...
}

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

¥For function expressions, you must define the function before it is used, otherwise it causes an error. Example:

doSomething();  // error!

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

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

¥In this case, doSomething is undefined at the time of invocation and so causes a runtime error.

由于这些不同的行为,通常有关于应该使用哪种函数样式的指南。这里真的没有正确或错误的选择,这只是一种偏好。

¥Due to these different behaviors, it is common to have guidelines as to which style of function should be used. There is really no correct or incorrect choice here, it is just a preference.

规则详情

¥Rule Details

此规则强制执行特定类型的函数样式,即 function 声明或分配给变量的表达式。你可以在配置中指定你喜欢的。

¥This rule enforces a particular type of function style, either function declarations or expressions assigned to variables. You can specify which you prefer in the configuration.

注意:此规则不适用于所有函数。例如,此规则不考虑作为参数传递给另一个函数的回调函数。

¥Note: This rule does not apply to all functions. For example, a callback function passed as an argument to another function is not considered by this rule.

选项

¥Options

此规则有一个字符串选项:

¥This rule has a string option:

  • "expression"(默认)要求使用函数表达式而不是函数声明

    ¥"expression" (default) requires the use of function expressions instead of function declarations

  • "declaration" 要求使用函数声明而不是函数表达式

    ¥"declaration" requires the use of function declarations instead of function expressions

该规则有一个针对两个例外的对象选项:

¥This rule has an object option for two exceptions:

  • "allowArrowFunctions"true(默认 false)允许使用箭头函数。此选项仅在字符串选项设置为 "declaration" 时适用(无论此选项如何,当字符串选项设置为 "expression" 时始终允许使用箭头函数)

    ¥"allowArrowFunctions": true (default false) allows the use of arrow functions. This option applies only when the string option is set to "declaration" (arrow functions are always allowed when the string option is set to "expression", regardless of this option)

  • "overrides"

    • "namedExports": "expression" | "declaration" | "ignore":用于覆盖命名导出中的函数样式

      ¥"namedExports": "expression" | "declaration" | "ignore": used to override function styles in named exports

      • "expression":就像字符串选项

        ¥"expression": like string option

      • "declaration":就像字符串选项

        ¥"declaration": like string option

      • "ignore":任何一种风格都可以接受

        ¥"ignore": either style is acceptable

expression

使用默认 "expression" 选项的此规则的错误代码示例:

¥Examples of incorrect code for this rule with the default "expression" option:

在线运行
/*eslint func-style: ["error", "expression"]*/

function foo() {
    // ...
}

使用默认 "expression" 选项的此规则的正确代码示例:

¥Examples of correct code for this rule with the default "expression" option:

在线运行
/*eslint func-style: ["error", "expression"]*/

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

var foo = () => {};

// allowed as allowArrowFunctions : false is applied only for declaration

declaration

使用 "declaration" 选项的此规则的错误代码示例:

¥Examples of incorrect code for this rule with the "declaration" option:

在线运行
/*eslint func-style: ["error", "declaration"]*/

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

var foo = () => {};

使用 "declaration" 选项的此规则的正确代码示例:

¥Examples of correct code for this rule with the "declaration" option:

在线运行
/*eslint func-style: ["error", "declaration"]*/

function foo() {
    // ...
}

// Methods (functions assigned to objects) are not checked by this rule
SomeObject.foo = function() {
    // ...
};

allowArrowFunctions

使用 "declaration", { "allowArrowFunctions": true } 选项的此规则的附加正确代码示例:

¥Examples of additional correct code for this rule with the "declaration", { "allowArrowFunctions": true } options:

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

var foo = () => {};

overrides

namedExports

expression

使用 "declaration"{"overrides": { "namedExports": "expression" }} 选项的此规则的错误代码示例:

¥Examples of incorrect code for this rule with the "declaration" and {"overrides": { "namedExports": "expression" }} option:

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

export function foo() {
    // ...
}

使用 "declaration"{"overrides": { "namedExports": "expression" }} 选项的此规则的正确代码示例:

¥Examples of correct code for this rule with the "declaration" and {"overrides": { "namedExports": "expression" }} option:

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

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

export var bar = () => {};

declaration

使用 "expression"{"overrides": { "namedExports": "declaration" }} 选项的此规则的错误代码示例:

¥Examples of incorrect code for this rule with the "expression" and {"overrides": { "namedExports": "declaration" }} option:

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

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

export var bar = () => {};

使用 "expression"{"overrides": { "namedExports": "declaration" }} 选项的此规则的正确代码示例:

¥Examples of correct code for this rule with the "expression" and {"overrides": { "namedExports": "declaration" }} option:

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

export function foo() {
    // ...
}

ignore

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

¥Examples of correct code for this rule with the {"overrides": { "namedExports": "ignore" }} option:

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

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

export var bar = () => {};

export function baz() {
    // ...
}

何时不使用

¥When Not To Use It

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

¥If you want to allow developers to each decide how they want to write functions on their own, then you can disable this rule.

版本

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

进阶读物

资源

ESLint 中文网
粤ICP备13048890号