ESLint Plugin for .js Extension Enforcement

0.1.3 · active · verified Wed Apr 22

The `eslint-plugin-require-extensions` package provides a straightforward ESLint plugin designed to ensure that relative import and export paths consistently include the `.js` file extension. This plugin addresses a specific pain point in TypeScript development where TypeScript itself does not automatically transform file extensions nor strictly enforce their presence in module resolution, particularly problematic for environments that require explicit extensions for ESM, such as Node.js. The current stable version is `0.1.3`, indicating an early stage of development, likely with infrequent releases focused on stability and specific enhancements. Its primary differentiator is its singular focus on this `.js` extension problem, providing a targeted and effective solution for projects aiming for full ESM compatibility and consistent module resolution across different environments. It's a pragmatic tool for maintaining import consistency that TypeScript currently leaves unaddressed, helping prevent runtime errors related to module resolution.

Common errors

```
Relative imports and exports must end with .js  require-extensions/require-extensions
```
cause A relative import or export statement is missing the '.js' file extension.

fix Add the '.js' extension to all relative import and export paths (e.g., change `import Foo from './bar'` to `import Foo from './bar.js'`). You can run `eslint --fix .` to automatically fix most of these issues.

Warnings

gotcha TypeScript's default behavior does not enforce or transform file extensions for relative imports, which can lead to runtime errors, especially in Node.js ESM environments that require explicit '.js' extensions. This plugin directly addresses that gap.
Fix: Ensure the plugin is correctly installed and configured in your `.eslintrc` file, using either the `recommended` preset or explicitly enabling the `require-extensions/require-extensions` rule.
gotcha Using this plugin in a mixed CommonJS/ESM codebase might lead to linting errors for CommonJS files if they use relative imports without `.js` extensions, even though CommonJS typically doesn't strictly require them. This plugin is primarily aimed at ESM consistency.
Fix: Consider using ESLint overrides in your `.eslintrc` to disable or relax this rule for specific CommonJS files or directories if they are not intended to comply with ESM extension rules. Alternatively, ensure all relative imports in both CJS and ESM code conform to the `.js` extension for consistency.

Install

npm install eslint-plugin-require-extensions npm
yarn add eslint-plugin-require-extensions yarn
pnpm add eslint-plugin-require-extensions pnpm

Imports

plugins
wrong:
```
    "plugins": [
        "eslint-plugin-require-extensions"
    ]
```
correct:
```
    "plugins": [
        "require-extensions"
    ]
```
When configuring ESLint, plugins are referenced by their short name after 'eslint-plugin-' prefix. Do not include the full package name.
extends (recommended)
wrong:
```
    "extends": [
        "require-extensions/recommended"
    ]
```
correct:
```
    "extends": [
        "plugin:require-extensions/recommended"
    ]
```
The 'recommended' configuration preset should be referenced with the 'plugin:' prefix, followed by the short plugin name.

rules (individual)

wrong:

    "rules": {
        "require-extensions": "error"
    }

correct:

    "rules": {
        "require-extensions/require-extensions": "error"
    }

To configure individual rules, prepend the plugin's short name (e.g., 'require-extensions') to the rule name.

Quickstart

This quickstart installs the plugin, configures it in `.eslintrc.json` using the recommended rules, demonstrates correct and incorrect import syntax, and shows how to lint and fix issues.

npm install --save-dev eslint-plugin-require-extensions

// .eslintrc.json
{
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:require-extensions/recommended"
    ],
    "plugins": [
        "require-extensions"
    ],
    "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
    }
}

// src/index.ts (example file)
// import SomeModule from './some-module'; // This would trigger an error
import OtherModule from './other-module.js'; // This is correct

// To run the linter and fix errors:
npx eslint src --fix

view raw JSON →