How to Configure the `import/order` Rule for Organized Imports with Airbnb ESLint

Airbnb's ESLint configuration enforces a minimal three-group import order by default, but you can override the import/order rule in your project's ESLint config to add alphabetical sorting, custom path aliases, and strict newline separation while preserving the rest of the style guide.

The import/order rule is essential for maintaining consistent import organization across JavaScript codebases. Airbnb's shareable ESLint config provides a sensible baseline for this rule in eslint-config-airbnb-base, but many teams require stricter conventions for large applications. This guide explains how the default import/order rule for organized imports with Airbnb ESLint works and how to extend it for custom project requirements without forking the entire configuration.

Understanding Airbnb's Default import/order Configuration

Airbnb distributes its ESLint rules across two packages: eslint-config-airbnb-base for core JavaScript and eslint-config-airbnb which extends the base with React-specific rules. The import/order rule lives in the base package at packages/eslint-config-airbnb-base/rules/imports.js.

At line 149 of this file, Airbnb defines a deliberately minimal configuration:

'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],

This configuration groups imports into three buckets—builtin (Node.js modules), external (npm packages), and internal (local project files)—and requires each bucket to appear as a contiguous block. The philosophy here is to provide sensible defaults without being overly opinionated about ordering within each group, leaving room for teams to adopt more detailed conventions through extension.

The rule is aggregated into the final configuration through packages/eslint-config-airbnb-base/index.js, which exports all rule objects including the imports module. When ESLint loads the config, it merges this rule set with any user-provided overrides according to ESLint's configuration cascading rules.

Extending the import/order Rule for Strict Organization

To achieve a fully organized import layout, create a project-level ESLint configuration that overrides Airbnb's default. Because the base config already enables eslint-plugin-import, you only need to supply a richer options object in your .eslintrc.js file.

Key options for customizing import organization include:

• pathGroups – Define custom groups for path aliases (e.g., @components/**)
• pathGroupsExcludedImportTypes – Exclude specific import types from built-in classification
• alphabetize – Sort members within each group using order: 'asc' or 'desc'
• newlines-between – Enforce blank lines between groups (always, never, or ignore)
• warnOnUnassignedImports – Warn when imports have no assigned variables

When you override the rule, ESLint hands your custom options object to eslint-plugin-import's order rule, which validates the file-by-file import layout during linting.

Practical Implementation Examples

Default Airbnb Import Grouping

Out of the box, Airbnb enforces only the three-group block structure. Valid code looks like this:

// example.js
import fs from 'fs';                 // builtin
import React from 'react';           // external
import myUtil from './myUtil';       // internal

Any deviation—such as placing a relative import before an external package—will raise an error because it violates the contiguous block rule defined in the base config.

Custom Configuration with Path Aliases and Alphabetization

For teams using path aliases (e.g., @/utils) and requiring alphabetical ordering within groups, override the rule as follows:

// .eslintrc.js
module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'import/order': [
      'error',
      {
        groups: [
          ['builtin', 'external'],   // Node modules and npm packages
          ['internal', 'parent', 'sibling', 'index'], // Local imports
        ],
        pathGroups: [
          {
            pattern: '@/**',
            group: 'internal',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['builtin'],
        alphabetize: { order: 'asc', caseInsensitive: true },
        'newlines-between': 'always',
        warnOnUnassignedImports: true,
      },
    ],
  },
};

This configuration enforces the following layout:

// example.js
import fs from 'fs';                     // builtin
import path from 'path';                 // builtin

import react from 'react';               // external
import lodash from 'lodash';             // external

import utils from '@utils';              // internal alias (pathGroups)

import myUtil from './myUtil';           // sibling
import { helper } from '../helper';      // parent

Directory-Specific Overrides

To apply strict ordering only in certain directories while keeping the default Airbnb config elsewhere, use the overrides feature:

// .eslintrc.js
module.exports = {
  extends: ['airbnb-base'],
  overrides: [
    {
      files: ['src/**/*.js'],
      rules: {
        'import/order': [
          'error',
          {
            groups: [['builtin', 'external', 'internal']],
            alphabetize: { order: 'asc', caseInsensitive: true },
            'newlines-between': 'always',
          },
        ],
      },
    },
  ],
};

Now the strict ordering applies only to files under src/, while the rest of the codebase follows Airbnb's original, looser enforcement.

Summary

• Airbnb's default import/order configuration in packages/eslint-config-airbnb-base/rules/imports.js enforces only three contiguous groups: builtin, external, and internal.
• The rule is exposed through packages/eslint-config-airbnb-base/index.js and requires eslint-plugin-import as a dependency.
• You can override the rule in your project's ESLint config to add alphabetization, path aliases, and newline enforcement without modifying the base package.
• Use ESLint's overrides feature to apply custom import ordering to specific directories only.

Frequently Asked Questions

What is the default import/order rule in Airbnb's ESLint config?

According to the source code in packages/eslint-config-airbnb-base/rules/imports.js at line 149, Airbnb enforces a minimal configuration that groups imports into three categories—builtin, external, and internal—and requires each group to appear as a contiguous block. This default does not enforce alphabetical ordering or handle custom path aliases.

How do I add path aliases like @/components to import/order with Airbnb?

Add a pathGroups array to your rule override specifying the pattern (e.g., @/**), the group (internal), and the position (before). Combine this with pathGroupsExcludedImportTypes: ['builtin'] to ensure the alias is recognized correctly. This extends the base eslint-config-airbnb without forking it.

Can I apply different import ordering rules to different folders?

Yes. Use the overrides key in your .eslintrc.js to target specific file patterns (e.g., files: ['src/**/*.js']) and provide a custom import/order configuration for those files only. This allows legacy code to remain unchanged while new code follows stricter organization rules.

Does eslint-config-airbnb include the import/order rule or do I need to install it separately?

The import/order rule is included via eslint-config-airbnb-base, which both the base and React-specific packages depend on. The base package lists eslint-plugin-import as a dependency in its package.json, so the rule is available as long as you extend the Airbnb config. You do not need to manually install the plugin, only override the rule configuration.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}