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

資源

• 規則來源
• 測試來源