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

ignore

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

資源

• 規則原始碼
• 測試原始碼