src/content/docs/linter/rules/use-arrow-function.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/complexity/useArrowFunction`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has a [**safe**](/linter/#safe-fixes) fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - Sources: - Inspired from [`prefer-arrow-callback`](https://eslint.org/docs/latest/rules/prefer-arrow-callback){
"linter": {
"rules": {
"complexity": {
"useArrowFunction": "error"
}
}
}
}
Use arrow functions over function expressions.
An arrow function expression is a compact alternative to a regular function expression,
with an important distinction:
this is not bound to the arrow function. It inherits this from its parent scope.
This rule proposes turning all function expressions that are not generators (function*) and don't use this into arrow functions.
This rule does not modify top-level function declarations (discuss here).
const z = function() {
return 0;
}
const delegatedFetch = async function(url) {
return await fetch(url);
}
const f = function() {
return this.prop;
}
Named function expressions are ignored:
const z = function z() {
return 0;
}
Functions that reference the arguments object are ignored because the arguments object is not available to arrow functions.
const q = function () {
return arguments[0];
}
Function expressions that declare the type of this are also ignored:
const z = function(this: A): number {
return 0;
}