How to Configure the max-len Rule for JSX and Long Strings in the Airbnb JavaScript Style Guide

Question

Learn to configure the max-len rule for JSX and long strings in the Airbnb JavaScript style guide. Customize ESLint to enforce your preferred line lengths effectively.

Accepted Answer

The Airbnb ESLint configuration ignores long strings and template literals by default via ignoreStrings: true and ignoreTemplateLiterals: true in packages/eslint-config-airbnb-base/rules/style.js, while JSX handling requires custom overrides with specific ignorePattern regex patterns to avoid line-length violations.

The Airbnb JavaScript Style Guide enforces a strict 100-character line limit through its shareable ESLint configuration to maintain readability across large codebases. When working with JSX components or long URL strings, developers often need to adjust the default max-len rule behavior to accommodate verbose markup or concatenated messages without triggering linting errors. Understanding how to customize these settings ensures you maintain the style guide's intent while adapting to real-world code patterns.

Default max-len Configuration in Airbnb

The core max-len rule definition lives in packages/eslint-config-airbnb-base/rules/style.js at lines 205-212:

'max-len': ['error', 100, 2, {
  ignoreUrls: true,
  ignoreComments: false,
  ignoreRegExpLiterals: true,
  ignoreStrings: true,
  ignoreTemplateLiterals: true,
}]

This configuration enforces a 100-character maximum with a tab width of 2 spaces. The ignoreStrings and ignoreTemplateLiterals options are set to true, meaning the linter skips line-length checks for string literals and template expressions entirely. The ignoreUrls and ignoreRegExpLiterals options provide additional exemptions for long URLs and complex regular expressions.

Handling Long Strings and Template Literals

By default, the Airbnb style guide exempts long strings from the line-length rule to avoid forcing artificial concatenation of URLs, error messages, or GraphQL queries. The ignoreStrings: true setting means string literals like 'https://example.com/api?veryLongQueryParameter=true' will not trigger ESLint errors even if they exceed 100 characters.

If your project requires strict line-length enforcement on strings, override the default by setting ignoreStrings to false in your ESLint configuration:

// .eslintrc.js
module.exports = {
  extends: ['airbnb'],
  rules: {
    'max-len': ['error', 100, 2, {
      ignoreStrings: false,
      ignoreTemplateLiterals: false,
      ignoreRegExpLiterals: true,
      ignoreUrls: true,
    }],
  },
};

With this configuration, any string literal exceeding the column limit will trigger an ESLint error, encouraging developers to split content using template literals or concatenation.

Configuring max-len for JSX Files

The ESLint max-len rule does not provide a native ignoreJSX option, but you can control JSX-specific behavior using ESLint overrides. To ignore lines containing pure JSX elements while maintaining the 100-character limit for other JavaScript logic, add an ignorePattern regex that matches JSX tag syntax.

Create a targeted override for JSX and TSX files in your configuration:

// .eslintrc.js
module.exports = {
  extends: ['airbnb'],
  overrides: [
    {
      files: ['*.jsx', '*.tsx'],
      rules: {
        'max-len': ['error', 100, 2, {
          ignoreStrings: true,
          ignoreTemplateLiterals: true,
          ignoreRegExpLiterals: true,
          ignoreUrls: true,
          ignorePattern: '^\\s*<.*>$', // Ignore lines that are pure JSX tags
        }],
      },
    },
  ],
};

The ignorePattern regex above tells ESLint to skip lines consisting solely of JSX elements (e.g., <MyComponent prop="value" />). Adjust the pattern to match your specific component structure, such as '^\\s*<[^>]+>\\s*$' to catch opening or closing tags with whitespace.

Complete Multi-File Configuration Example

A production-ready ESLint configuration that maintains Airbnb's 100-character limit while handling JSX and strings differently across file types:

// .eslintrc.js
module.exports = {
  extends: ['airbnb'],
  overrides: [
    {
      files: ['*.jsx', '*.tsx'],
      rules: {
        'max-len': ['error', 100, 2, {
          ignoreStrings: true,
          ignoreTemplateLiterals: true,
          ignoreRegExpLiterals: true,
          ignoreUrls: true,
          ignorePattern: '^\\s*<[^>]+>\\s*$', // Ignore pure JSX element lines
        }],
      },
    },
    {
      files: ['*.js'],
      rules: {
        // Enforce strict limits on strings in plain JavaScript files
        'max-len': ['error', 100, 2, {
          ignoreStrings: false,
          ignoreTemplateLiterals: false,
          ignoreRegExpLiterals: true,
          ignoreUrls: true,
        }],
      },
    },
  ],
};

This setup allows long URLs in JavaScript files while enforcing string breaking in .js files, and permits lengthy JSX attribute lines in component files without disabling the rule entirely.

Summary

The Airbnb style guide defines the max-len rule in packages/eslint-config-airbnb-base/rules/style.js with a 100-character limit and exemptions for strings, template literals, URLs, and regex literals.
Long strings are ignored by default via ignoreStrings: true and ignoreTemplateLiterals: true, but you can enforce limits by setting these to false in your config.
JSX files require ESLint overrides with custom ignorePattern regex to handle long component lines, as no native ignoreJSX option exists in the base rule.
Use file-specific overrides to apply different max-len behaviors to .js, .jsx, and .tsx files within the same project.

Frequently Asked Questions

How do I allow long strings in JSX but enforce limits on other code?

Configure separate overrides entries for JSX and JavaScript files. In the JSX override, keep ignoreStrings: true to allow long URLs and messages, while in the JavaScript file override, set ignoreStrings: false to enforce concatenation or template literal breaking for standard logic.

Does the Airbnb style guide allow disabling max-len entirely?

Yes, the base config in packages/eslint-config-airbnb-base/.eslintrc explicitly disables max-len with a value of 0 for downstream projects that want to replace it, though the published shareable config enables it by default with the 100-character limit.

What regex pattern should I use to ignore JSX prop lines?

Use ignorePattern: '^\\s*<.*>$' to ignore lines starting with JSX tags, or '^\\s*<[^>]+>\\s*$' to match pure element lines without text content. Adjust the pattern based on whether you want to ignore lines with child text or only standalone component declarations.

Why does Airbnb ignore strings and template literals by default?

According to the Airbnb JavaScript Style Guide README, long strings are exempt from the line-length rule to prevent artificial string concatenation that reduces readability for URLs, error messages, and other immutable text content that naturally exceeds 100 characters.