How to Configure the import/extensions Rule in Airbnb ESLint: A Complete Guide

The import/extensions rule in Airbnb's ESLint configuration enforces omitting file extensions for JavaScript files while ignoring packages, and you can customize this behavior by overriding the rule in your project's .eslintrc.js file.

The import/extensions rule is integrated into the airbnb/javascript repository as part of its eslint-plugin-import setup. It standardizes how file extensions appear in ES6 import statements, ensuring consistency across JavaScript and TypeScript codebases that extend Airbnb's widely adopted style guide.

Default Configuration in Airbnb

Airbnb's base configuration strictly defines how the import/extensions rule behaves for JavaScript-related files. In packages/eslint-config-airbnb-base/rules/imports.js (lines 40–45), the rule is configured to treat missing extensions as errors while allowing the resolver to locate files automatically.

// packages/eslint-config-airbnb-base/rules/imports.js
'import/extensions': ['error', 'ignorePackages', {
  js:  'never',
  mjs: 'never',
  jsx: 'never',
}],

This configuration achieves three specific outcomes:

• Error level – Violations break the build (error severity).
• Package ignorance – Modules from node_modules are exempt from extension checks.
• Extension omission – You must omit extensions for .js, .mjs, and .jsx files in import paths.

Understanding the Resolver Settings

For the rule to function correctly, Airbnb also registers known extensions in the ESLint settings. Located at lines 19–24 in the same file, this array tells the resolver which extensions to attempt when resolving bare imports.

// packages/eslint-config-airbnb-base/rules/imports.js
'import/extensions': [
  '.js',
  '.mjs',
  '.jsx',
],

This settings array works in tandem with the rule definition. When you write import foo from './bar', the resolver attempts to locate bar.js, bar.mjs, or bar.jsx automatically, making explicit extensions redundant and enforcing the DRY principle across your imports.

Customizing the Rule for Your Codebase

While Airbnb's defaults suit pure JavaScript projects, modern workflows often require TypeScript or explicit extension policies. You can override the rule in your project's ESLint configuration without forking the entire config.

Adding TypeScript Support (Enforcing .tsx Extensions)

When integrating TypeScript into an Airbnb-based project, you typically want to omit extensions for JavaScript files but require them for TypeScript React components to avoid ambiguity.

module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'import/extensions': ['error', 'ignorePackages', {
      js:   'never',
      mjs:  'never',
      jsx:  'never',
      tsx:  'always',   // Force explicit .tsx extension
    }],
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.mjs', '.jsx', '.tsx'],
      },
    },
    'import/extensions': ['.js', '.mjs', '.jsx', '.tsx'],
  },
};

Disabling the Rule for Legacy Projects

If you're migrating a legacy codebase where mixed extension styles exist temporarily, you can disable the rule entirely to prevent build failures during the transition.

module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'import/extensions': 'off',
  },
};

Requiring Explicit Extensions for All Files

Some project architectures or specific bundler configurations benefit from explicit extensions. This setup reverses Airbnb's default to require extensions for every file type.

module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'import/extensions': ['error', 'ignorePackages', {
      js:   'always',
      mjs:  'always',
      jsx:  'always',
      ts:   'always',
      tsx:  'always',
    }],
  },
  settings: {
    'import/extensions': ['.js', '.mjs', '.jsx', '.ts', '.tsx'],
  },
};

Step-by-Step Implementation Guide

Follow these steps to apply a custom import/extensions configuration in your project:

1. Create or edit your ESLint configuration file (.eslintrc.js, .eslintrc.cjs, or .eslintrc.json).
2. Extend the Airbnb base config by adding 'airbnb-base' (or 'airbnb' for React projects) to the extends array.
3. Override the import/extensions rule in the rules object with your preferred extension policy.
4. Update the resolver settings in the settings object if you introduce new file extensions like .ts or .vue, ensuring the import/resolver.node.extensions array includes all relevant extensions.
5. Run ESLint using npx eslint . to verify that your imports comply with the new configuration.

Summary

• The import/extensions rule in packages/eslint-config-airbnb-base/rules/imports.js enforces omitting extensions for .js, .mjs, and .jsx files by default.
• Airbnb configures the rule at error level with ignorePackages enabled, while registering known extensions in the resolver settings (lines 19–24).
• You can override the rule in your project's ESLint config to support TypeScript, require explicit extensions, or disable the rule entirely.
• Always synchronize the import/resolver.node.extensions setting with your rule configuration to ensure the resolver can locate files correctly.

Frequently Asked Questions

What is the default import/extensions configuration in Airbnb ESLint?

According to the airbnb/javascript source code, the default configuration enforces error severity with ignorePackages enabled, requiring you to omit extensions for .js, .mjs, and .jsx files. This is defined in packages/eslint-config-airbnb-base/rules/imports.js at lines 40–45.

How do I add TypeScript (.ts and .tsx) support to the import/extensions rule?

Extend the Airbnb config and override the rule to specify 'never' for JavaScript files and 'always' for TypeScript files. You must also update the import/resolver.node.extensions setting to include .ts and .tsx, and add these extensions to the import/extensions settings array so the resolver can locate the modules.

Can I disable the import/extensions rule if it conflicts with my existing codebase?

Yes. You can disable the rule entirely by setting 'import/extensions': 'off' in your ESLint configuration's rules object. This is useful during legacy codebase migrations where mixed extension styles exist temporarily.

Why does Airbnb recommend omitting file extensions in import statements?

Omitting extensions improves code portability and relies on Node.js module resolution logic. By configuring the resolver with specific extensions in the settings (lines 19–24), the build system can resolve the correct file automatically, keeping import statements cleaner and framework-agnostic.

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