How to Use and Disable ESLint Max-Lines-Per-Function

The ESLint max-lines-per-function rule is not enabled by default, and that is probably a good thing because it would often flag reasonable function components as too long.

However, the rule can be useful when selectively applied. I believe it can ensure that developers don’t get lazy and pack too much functionality into one function.

In this post we will examine the max-lines-per-function options, when to use the rule, and how to disable the rule.

Max-Lines-Per-Function with Function Components

It is common in React to use Function Components to create a component. Here’s an example:

React Function Component with ESLint max-lines-per-function
React Function Component with ESLint max-lines-per-function

As soon as I enable the max-lines-per-function rule, this component will violate a reasonable line limit. However, the function component is mostly filled with JSX, so it doesn’t make sense to apply line length rules to it.

A potential work-around is to use ES6 React.Component syntax to define a component. However, by default ESLint throws the prefer-stateless-function error if you try this.

Using ESLint Max-Lines-Per-Function in an Arrow Function

The max-lines-per-function is smart enough to analyze arrow functions as well. Here’s example code:

/* eslint max-lines-per-function: ["error", 4] */
const testFunction = () => {
  let x = 3;
  x += 1;
  x += 2;
  x += 3;
  console.log(x);
};

It throws an error specific to arrow functions:

ESLint max-lines-per-function in an arrow function
ESLint max-lines-per-function in an arrow function

When to Use ESLint Max-Lines-Per-Function

I think there are two good opportunities to use max-lines-per-function:

  1. Helper files – If you have a file dedicated to exported functions instead of components, enable the rule at the top of the file.
  2. Before a Function Component render statement – The rule can be useful for limiting function size in hooks and handlers.

Unfortunately, I was unable to test opportunity 2. In theory, you should be able to control where the rule is applied with code like the following:

/* eslint max-lines-per-function: ["error", {"max": 2, "skipBlankLines": true}] */
CODE CODE CODE
/* eslint-disable max-lines-per-function */

But the rule could not be selectively enabled inside a Function Component because it kept looking at the length of the Function Component itself.

This rule is similar to the max line length rule.

ESLint Max-Lines-Per-Function Options: Max, skipBlankLines, skipComments, and IIFEs

The max-lines-per-function rule has four options:

  • max – This specifies the maximum number of lines a function can be. It includes the beginning and ending lines that contain a curly brace. Default is 50.
  • skipBlankLines – By default, blank lines are included in the count of function line length.
  • skipComments – By default, lines only containing comments are included in the count of function line length.
  • IIFEs – By default, lines of code inside internal immediately invoked functions are not counted.

You may end up taking more lines than necessary depending on your semicolon rule configuration.

Disable Max-Lines-Per-Function

I suggest selectively enabling max-lines-per-function in useful sections of your code. I’ll go with Bob Martin’s suggestion that 20 lines is a good max length for a function:

/*eslint max-lines-per-function: ["error", 20]*/

There are a couple of options for disabling the rule:

  • Change it to “warn” in .eslintrc.json like this: "max-lines-per-function": ["warn", { "max": 2, "skipBlankLines": true }]
  • Add /* eslint-disable max-lines-per-function */ – Keep in mind this only works outside of Function Components

This is similar to how to ban TS comments.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.