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"

We can also import a variety of file types with bundlers such as Webpack. In this situation, explicit file extensions can help to identify the type of file being imported.

📖 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

tsconfigPath

This can be configured in the shared settings settings.tsconfigPath. Please see the shared settings documentation for more information.

typescriptExtensionMap

This can be configured in the shared settings settings.typescriptExtensionMap. Please see the shared settings documentation for more information.

🔎 Implementation

• Rule source
• Test source