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!
const 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"(默认)要求使用函数表达式而不是函数声明"declaration"要求使用函数声明而不是函数表达式
该规则有一个针对两个例外的对象选项:
🌐 This rule has an object option for two exceptions:
"allowArrowFunctions":true(默认false)允许使用箭头函数。此选项仅在字符串选项设置为"declaration"时适用(当字符串选项设置为"expression"时,总是允许使用箭头函数,无论此选项如何)"allowTypeAnnotation":true(默认false)允许在变量声明具有类型注解的情况下使用函数表达式和箭头函数,而不管allowArrowFunctions选项如何。此选项仅在字符串选项设置为"declaration"时适用。(仅限 TypeScript)"overrides":"namedExports": "expression" | "declaration" | "ignore":用于覆盖命名导出中的函数样式"expression":就像字符串选项"declaration":就像字符串选项"ignore":任何一种风格都可以接受
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"]*/
const foo = function() {
// ...
};
const foo1 = () => {};
// allowed as allowArrowFunctions : false is applied only for declaration
此规则不会将重载函数声明报告为错误。这些是具有相同名称但参数类型或返回类型不同的多个声明的函数(通常在 TypeScript 中用于为调用同一函数的不同方式提供类型信息)。
🌐 Overloaded function declarations are not reported as errors by this rule. These are functions that have multiple declarations with the same name but different parameter types or return types (commonly used in TypeScript to provide type information for different ways of calling the same function).
此规则在默认 "expression" 选项下的 正确 TypeScript 代码示例:
🌐 Examples of correct TypeScript code for this rule with the default "expression" option:
/*eslint func-style: ["error", "expression"]*/
function process(value: string): string;
function process(value: number): number;
function process(value: unknown) {
return value;
}
declaration
使用 "declaration" 选项时违反此规则的错误代码示例:
🌐 Examples of incorrect code for this rule with the "declaration" option:
/*eslint func-style: ["error", "declaration"]*/
const foo = function() {
// ...
};
const foo1 = () => {};
使用 "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 }]*/
const foo = () => {};
allowTypeAnnotation
使用 "declaration", { "allowTypeAnnotation": true } 选项时,该规则的 错误 TypeScript 代码示例:
🌐 Examples of incorrect TypeScript code for this rule with the "declaration", { "allowTypeAnnotation": true } options:
/*eslint func-style: ["error", "declaration", { "allowTypeAnnotation": true }]*/
const foo = function(): void {};
使用 "declaration", { "allowTypeAnnotation": true } 选项遵守此规则的 正确 TypeScript 代码示例:
🌐 Examples of correct TypeScript code for this rule with the "declaration", { "allowTypeAnnotation": true } options:
/*eslint func-style: ["error", "declaration", { "allowTypeAnnotation": true }]*/
type Fn = () => undefined;
const foo: Fn = function() {};
const bar: Fn = () => {};
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 const foo = function() {
// ...
};
export const 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 const foo = function() {
// ...
};
export const 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() {
// ...
}
这个规则在使用 "expression" 和 { "allowTypeAnnotation": true, "overrides": { "namedExports": "declaration" }} 选项时的正确代码示例:
🌐 Examples of correct code for this rule with the "expression" and { "allowTypeAnnotation": true, "overrides": { "namedExports": "declaration" }} option:
/*eslint func-style: ["error", "expression", { "allowTypeAnnotation": true, "overrides": { "namedExports": "declaration" } }]*/
export const foo: () => void = function () {}
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 const foo = function() {
// ...
};
export const 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 中引入。