eslint-plugin-arrow-return-style

Enforce arrow function return style and automatically fix it

Features

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.

Install

pnpm add eslint-plugin-arrow-return-style -D

Usage

/** @type {import('eslint').Linter.Config} */
module.exports = {
  extends: ['plugin:arrow-return-style/recommended'],
};

Examples

Fail

/* 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 = <T extends Linter.Config>(config: T) => config;

const fn = () => /* block comment */ 1;

const Div = () => (
  <>
    <div />
  </>
);

Pass

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 = <T extends Linter.Config>(config: T) => {
  return config;
};

const fn = () => {
  /* block comment */
  return 1;
};

const Div = () => {
  return (
    <>
      <div />
    </>
  );
};

Options

maxLen

Type: number
Default: 80

If the arrow function expression exceeds maxLen characters, it is forced to use explicit return.

jsxAlwaysUseExplicitReturn

Type: boolean
Default: false

If set true, always use explicit return when return value is JSXElement or JSXFragment.

namedExportsAlwaysUseExplicitReturn

Type: boolean
Default: true

By 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 recommended 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.	✅	🔧

License

MIT License © 2023 u3u