Enforce arrow function return style and automatically fix it
npm install eslint-plugin-arrow-return-style> Enforce arrow function return style and automatically fix it
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]
> This rule serves as an alternative to the arrow-body-style with as-needed options, used to improve the style of arrow function return statement.
- When arrow function expressions are multiline or exceed a certain length, explicit return should be enforced to improve readability and extensibility.
- When an arrow function has only one return statement (and does not contain any comments), implicit return should be used to simplify the code and improve readability.
- When using arrow functions as named exports, explicit return should always be used to maintain consistency with regular functions.
- When using arrow functions as React components, always use explicit return to facilitate the addition of props and hooks in the future.
``sh`
pnpm add eslint-plugin-arrow-return-style -D
`js`
/* @type {import('eslint').Linter.Config} /
module.exports = {
extends: ['plugin:arrow-return-style/recommended'],
};
`tsx
/ eslint-disable arrow-return-style/arrow-return-style /
const delay = () =>
new Promise((resolve) => {
setTimeout(resolve, 1000);
});
const foo = () => {
return 'foo';
};
Array.from({ length: 10 }).map((_, i) => {
return i + 1;
});
const obj = () => {
return { name: '' };
};
const data = () => ({
name: '',
});
export const defineConfig =
const fn = () => / block comment / 1;
const Div = () => (
<>
$3
tsx
const delay = () => {
return new Promise((resolve) => {
setTimeout(resolve, 1000);
});
};const foo = () => 'foo';
const obj = () => ({ name: '' });
Array.from({ length: 10 }).map((_, i) => i + 1);
const data = () => {
return {
name: '',
};
};
export const defineConfig = (config: T) => {
return config;
};
const fn = () => {
/ block comment /
return 1;
};
const Div = () => {
return (
<>
);
};
`Options
$3
Type:
\
Default: 80If the arrow function expression exceeds
characters, it is forced to use explicit return.$3
Type:
boolean\
Default: falseIf set
, always use explicit return when return value is JSXElement or JSXFragment.$3
Type:
boolean\
Default: trueBy default, named exported arrow functions will always use explicit return to maintain consistency with regular functions because it is more intuitive and unified, and convenient for expansion.
Rules
⚠️ Configurations set to warn in.\
✅ Set in the
configuration.\
🔧 Automatically fixable by the --fix` CLI option.| Name | Description | ⚠️ | 🔧 |
| :--------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | :- | :- |
| arrow-return-style | Enforce arrow function return style | ✅ | 🔧 |
| no-export-default-arrow | Disallow export default anonymous arrow function
_Automatically fix using the current file name._ | ✅ | 🔧 |
[npm-version-src]: https://img.shields.io/npm/v/eslint-plugin-arrow-return-style
[npm-version-href]: https://npmjs.com/package/eslint-plugin-arrow-return-style
[npm-downloads-src]: https://img.shields.io/npm/dm/eslint-plugin-arrow-return-style
[npm-downloads-href]: https://npmjs.com/package/eslint-plugin-arrow-return-style
[codecov-src]: https://codecov.io/gh/u3u/eslint-plugin-arrow-return-style/graph/badge.svg
[codecov-href]: https://codecov.io/gh/u3u/eslint-plugin-arrow-return-style
[license-src]: https://img.shields.io/github/license/u3u/eslint-plugin-arrow-return-style.svg
[license-href]: ./LICENSE