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

> Master the import/extensions rule in Airbnb ESLint. Learn to properly configure this essential JavaScript rule to enforce clean imports and avoid extension conflicts in your projects. Get the complete guide now.

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

---

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

```js
// 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.

```js
// 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`](https://github.com/airbnb/javascript/blob/main/bar.js), `bar.mjs`, or [`bar.jsx`](https://github.com/airbnb/javascript/blob/main/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.

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

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

```js
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`](https://github.com/airbnb/javascript/blob/main/.eslintrc.js), `.eslintrc.cjs`, or [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.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`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/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.