Code Monkey home page Code Monkey logo

eslint-plugin-arrow-return-style's Introduction

eslint-plugin-arrow-return-style

Enforce arrow function return style and automatically fix it

npm version npm downloads codecov License

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.

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

eslint-plugin-arrow-return-style's People

Contributors

renovate[bot] avatar u3u avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

eslint-plugin-arrow-return-style's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/ci.yaml
  • actions/checkout v4
  • actions/setup-node v4
  • codecov/codecov-action v3
.github/workflows/release.yaml
  • actions/checkout v4
  • actions/setup-node v4
npm
package.json
  • @typescript-eslint/utils ^6.21.0
  • scule ^1.3.0
  • @total-typescript/ts-reset ^0.5.1
  • @tsconfig/node20 ^20.1.4
  • @types/node ^20.12.8
  • @typescript-eslint/rule-tester ^6.21.0
  • @u3u/eslint-config ^2.15.1
  • @u3u/prettier-config ^4.5.1
  • @vitest/coverage-v8 ^1.5.3
  • @vitest/ui ^1.5.3
  • dedent ^1.5.3
  • eslint ^8.57.0
  • eslint-doc-generator ^1.7.0
  • fix-tsup-cjs ^1.2.0
  • lint-staged ^15.2.2
  • prettier ^3.2.5
  • simple-git-hooks ^2.11.1
  • tsup ^8.0.2
  • typescript ^5.4.5
  • vitest ^1.5.3
  • pnpm 8.15.8
nvm
.nvmrc
  • node 20.12.2

  • Check this box to trigger a request for Renovate to run again on this repository

`maxLen` doesn't work as expected.

I have maxLen set to 80, but when I do:

const UDimTemporary = (value: UDim, rem: number): UDim => new UDim(value.Scale, value.Offset * rem);

Despite being 101 lines long, it does not turn into an explicit export The rule works in the case of the contents of the arrow function itself being 80 lines. Is this intentional?

To me I would like the rule to support line length over content length, as I can still end up with multi-line statements which is what I'd like to avoid, e.g.

	UDimTemporary11111111111: (value: UDim, rem: number): UDim =>
		new UDim(value.Scale, value.Offset * rem),

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.