functionDeclarationStyles

Reports functions that don't match the configured style (declaration vs expression).

✅ This rule is included in the ts preset.

There are two ways of defining functions in JavaScript: function declarations and function expressions assigned to variables. Function declarations are hoisted to the top of their scope, while function expressions are not. Enforcing a consistent style helps maintain code consistency across a codebase.

Examples

With the default "expression" style:

❌ Incorre

AEfuncti5<3 sp ansty="le--0:#82AAFF;--1:#3B61">B0doSomethi11<()sp ansty="le--0:#D6DEEB;--1:#403F">53< {d ivclassNa="meec-li">nt< sp ansty="le--0:#C792EA;--1:#8844">AEretu5<3 sp ansty="le--0:#F78C6C;--1:#AA09">82<42sp ansty="le--0:#D6DEEB;--1:#403F">5<3;d ivclassNa="meec-li">5<3}d ivclassNa="meco"><}d>

44AEco61B0doSomet44AE = funct11<11() spans="tyle--0:#C792EA;--1:#88">444444AEret09<8242 spans="tyle--0:#C792EA;--1:#88">4<4AE ;divclass="Nameec-">4<4AE} spans="tyle--0:#D6DEEB;--1:#40">3<;}><;di vdivclass="Nameexpressive-">44AEco61B0doSomet44A11<11() spans="tyle--0:#C792EA;--1:#88">44AE <=> {divclass="Nameec-">4444AEret09<8242 spans="tyle--0:#C792EA;--1:#88">4 ><4AE ;divclass="Nameec-">4<4AE} spans="tyle--0:#D6DEEB;--1:#40">3<;}>

With the "declaration" style:

❌ Incorre

AEconsB0doSomethiAE = functio11<()sp ansty="le--0:#C792EA;--1:#8844">AE< {d ivclassNa="meec-li">AE< sp ansty="le--0:#C792EA;--1:#8844">AEretur82<42sp ansty="le--0:#C792EA;--1:#8844">AA5<3;d ivclassNa="meco"><};d>AEconsB0doSomethiAE <= sp ansty="le--0:#D9F5DD;--1:#1111">11<()sp ansty="le--0:#C792EA;--1:#8844">AE =>< {d ivclassNa="meec-li">AE< sp ansty="le--0:#C792EA;--1:#8844">AEretur82<42sp ansty="le--0:#C792EA;--1:#8844">AA5<3;d ivclassNa="meco"><};d>

44AEfunc361B0doSomet11<11() spans="tyle--0:#D6DEEB;--1:#40">3F<53 {divclass="Nameec-">de44AEre309<8242 spans="tyle--0:#D6DEEB;--1:#40">33<2;>

Options

style

Which function style to enforce:

• "expression" (default): Requires function expressions instead of declarations
• "declaration": Requires function declarations instead of expressions

{
  "rules": {
    "ts/functionDeclarationStyles": ["error", { "style": "declaration" }]
  }
}

allowArrowFunctions

When true and style is "declaration", arrow functions are allowed. Default is false.

{
  "rules": {
    "ts/functionDeclarationStyles": [
      "error",
      { "style": "declaration", "allowArrowFunctions": true }
    ]
  }
}

When Not To Use It

If your team doesn’t have a preference between function declarations and expressions, or if you want developers to choose the style that best fits each situation, you can disable this rule.

Further Reading

• MDN: function declaration
• MDN: function expression
• MDN: Arrow function expressions

Equivalents in Other Linters

• ESLint: func-style
• Oxlint: eslint/func-style