How To Use and Disable ESLint Max-Len (Line Length Rule)

The ESLint max-len rule is a useful rule for clean code and code organization. However, it is not enabled by default in ESLint, even with the AirBnB plugin. In this tutorial I will show several examples of using it and how to disable the rule when desired.

Here is the configuration in my .eslintrc rules section that I use in this example:

"max-len": [
  "error",
  {
    "code": 60,
    "tabWidth": 2,
    "ignoreComments": true, //"comments": 80
    "ignoreUrls": true,
    "ignoreStrings": true,
    "ignoreTemplateLiterals": true
  }
]

We will explore what each of these values means and what effect they have.

ESLint Max-Len Defaults

If you have max-len enabled, by default it sets “code”: 80 and “tabWidth”: 4. This means that the compiler allows lines up to 80 chars long and expects a tab to add four spaces. Comments are also expected to be only 80 chars unless the “comments” option is configured with a larger or smaller value.

Code and tab width are the only two default values. All other options are disabled. The other flags turn off the line length check if a line contains certain types of values.

Read about ESLint semicolon default rules here.

ESLint Max Length Example Code and Errors

Below are two examples of how max-len works. In the first example, I have “ignoreStrings”: true enabled.

Notice that only two lines are flagged even though other lines are longer? This is because the other lines contain strings, so they are completely ignored.

Another interesting result is that the line length check includes the preceding tab spacing. I expected the tab not to be included since it is white space. However, it does contribute or take away from readability.

Here I have "ignoreStrings": false configured. Now the lines with strings are also flagged as being too long.

My auto formatter is not formatting these lines. I expected that it would since they are very long. I do not have prettier enabled currently but it would likely be a good compliment to max-len.

The max-lines-per-function rule is similar to the max-len rule.

ESLint Max-Len Ignore Comments, URLs, Strings, and Template Literals

Here are the configurations for ignoring comments, urls, strings, and template literals:

• “ignoreComments”: true
• “ignoreUrls”: true
• “ignoreStrings”: true
• “ignoreTemplateLiterals”: true

Here’s an example where a comment is 90+ chars long but the compiler allows it:

Remember, these force the compiler to ignore the entire line if it has one of these value types. You may still want to manually format lines containing these types.

These flags in the max-len rule configuration will apply to the entire app. Here’s an example of configuration rules for eslint no-unused-vars.

ESLint Ignore Line Length for One or Many Lines

If you want to ignore a single line for this rule, use the following code:

// eslint-disable-next-line max-len

If you need to ignore a block of code, use the following:

{/* eslint-disable max-len */}
//....code
{/* eslint-enable max-len */}

Don’t forget to re-enable the checker or else you may miss some opportunities to reduce line length.

Here’s an example where code is too long but is not getting flagged because it is wrapped in a disable max length comment:

Here’s an example of disabling ban-types, and here’s how to turn off rules when using typescript-eslint.

ESLint Prettier Line Length

If you are using Prettier with ESLint it makes line length settings easy to follow. If Prettier is chosen as the formatter, auto formatting will break apart long lines cleanly.

Here’s my setup:

• Prettier as the formatter in VS Code
• Prettier ESLint plugin enabled
• Prettier listed as the last extention in .eslintrc.json

Here’s a sample of the same code as previous sections, but now it’s formatted by prettier:

Prettier does not directly have a line length rule. However, it has a print line length rule. A way to configure print line length for Prettier is with a .editorconfig file in your Code Editor. Simply add max_line_length and Prettier will observe the setting for printing.