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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!