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

> 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.

- Repository: [Airbnb/javascript](https://github.com/airbnb/javascript)
- Tags: how-to-guide
- Published: 2026-02-24

---

**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`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/style.js) at lines 205-212:

```javascript
'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:

```javascript
// .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:

```javascript
// .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:

```javascript
// .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`](https://github.com/airbnb/javascript/blob/main/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.