file-extension-in-import.md

Enforce the style of file extensions in import declarations (n/file-extension-in-import)

🔧 This rule is automatically fixable by the --fix CLI option.

We can omit file extensions in import/export declarations.

import foo from "./path/to/a/file" // maybe it's resolved to 'file.js' or 'file.json'
export * from "./path/to/a/file"

However, --experimental-modules has declared to drop the file extension omition.

Also, we can import a variety kind of files with bundlers such as Webpack. In the situation, probably explicit file extensions help us to understand code.

📖 Rule Details

This rule enforces the style of file extensions in import/export declarations.

Options

This rule has a string option and an object option.

{
    "n/file-extension-in-import": [
        "error",
        "always" or "never",
        {
            ".xxx": "always" or "never",
        }
    ]
}

• "always" (default) requires file extensions in import/export declarations.
• "never" disallows file extensions in import/export declarations.
• .xxx is the overriding setting for specific file extensions. You can use arbitrary property names which start with ..

always

Examples of 👎 incorrect code for the "always" option:

/*eslint n/file-extension-in-import: ["error", "always"]*/

import foo from "./path/to/a/file"

Examples of 👍 correct code for the "always" option:

/*eslint n/file-extension-in-import: ["error", "always"]*/

import eslint from "eslint"
import foo from "./path/to/a/file.js"

never

Examples of 👎 incorrect code for the "never" option:

/*eslint n/file-extension-in-import: ["error", "never"]*/

import foo from "./path/to/a/file.js"

Examples of 👍 correct code for the "never" option:

/*eslint n/file-extension-in-import: ["error", "never"]*/

import eslint from "eslint"
import foo from "./path/to/a/file"

.xxx

Examples of 👍 correct code for the ["always", { ".js": "never" }] option:

/*eslint n/file-extension-in-import: ["error", "always", { ".js": "never" }]*/

import eslint from "eslint"
import script from "./script"
import styles from "./styles.css"
import logo from "./logo.png"

Shared Settings

The following options can be set by shared settings. Several rules have the same option, but we can set this option at once.

typescriptExtensionMap

Adds the ability to change the extension mapping when converting between typescript and javascript

You can also use the typescript compiler jsx options to automatically use the correct mapping.

If this option is left undefined we:

1. Check your tsconfig.json compilerOptions.jsx
2. Return the default mapping (jsx = preserve)

// .eslintrc.js
module.exports = {
    "settings": {
        "node": {
            "typescriptExtensionMap": [
                [ "", ".js" ],
                [ ".ts", ".js" ],
                [ ".cts", ".cjs" ],
                [ ".mts", ".mjs" ],
                [ ".tsx", ".jsx" ],
            ]
        }
    },
    "rules": {
        "n/file-extension-in-import": "error"
    }
}

🔎 Implementation

• Rule source
• Test source