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:

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:

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.