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

> Master the Airbnb ESLint import/order rule. Customize import sorting with path aliases and newlines to enhance code organization and readability. Learn powerful configuration tips.

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

---

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

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

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

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

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

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

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