useImportExtensions (since v1.8.0)

Diagnostic Category: lint/nursery/useImportExtensions

Enforce file extensions for relative imports.

Browsers and Node.js do not natively support importing files without extensions. This rule enforces the use of file extensions for relative imports to make the code more consistent.

Tooling also benefits from explicit file extensions, because they do not need to guess which file to resolve.

The rule checks static imports and dynamic imports calls such as import() and require().

To ensure that Visual Studio Code adds the file extension when it automatically imports a variable, you may set javascript.preferences.importModuleSpecifierEnding and typescript.preferences.importModuleSpecifierEnding to the desired file extension.

Examples

Invalid

import "./foo";

code-block.js:1:8 lint/nursery/useImportExtensions  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Add a file extension for relative imports.
  
  > 1 │ import "./foo";
      │        ^^^^^^^
    2 │ 
  
  ℹ Explicit import improves compatibility with browsers and makes file resolution in tooling faster.
  
  ℹ Unsafe fix: Add potential import extension .js.
  
    1   │ - import·"./foo";
      1 │ + import·"./foo.js";
    2 2 │

import "./foo/";

code-block.js:1:8 lint/nursery/useImportExtensions  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Add a file extension for relative imports.
  
  > 1 │ import "./foo/";
      │        ^^^^^^^^
    2 │ 
  
  ℹ Explicit import improves compatibility with browsers and makes file resolution in tooling faster.
  
  ℹ Unsafe fix: Add potential import extension .js.
  
    1 │ import·"./foo/index.js";
      │               ++++++++

import "../";

code-block.js:1:8 lint/nursery/useImportExtensions  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Add a file extension for relative imports.
  
  > 1 │ import "../";
      │        ^^^^^
    2 │ 
  
  ℹ Explicit import improves compatibility with browsers and makes file resolution in tooling faster.
  
  ℹ Unsafe fix: Add potential import extension .js.
  
    1 │ import·"../index.js";
      │            ++++++++

import "../.";

code-block.js:1:8 lint/nursery/useImportExtensions  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Add a file extension for relative imports.
  
  > 1 │ import "../.";
      │        ^^^^^^
    2 │ 
  
  ℹ Explicit import improves compatibility with browsers and makes file resolution in tooling faster.
  
  ℹ Unsafe fix: Add potential import extension .js.
  
    1   │ - import·"../.";
      1 │ + import·"../index.js";
    2 2 │

import("./foo");

code-block.js:1:8 lint/nursery/useImportExtensions  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Add a file extension for relative imports.
  
  > 1 │ import("./foo");
      │        ^^^^^^^
    2 │ 
  
  ℹ Explicit import improves compatibility with browsers and makes file resolution in tooling faster.
  
  ℹ Unsafe fix: Add potential import extension .js.
  
    1   │ - import("./foo");
      1 │ + import("./foo.js");
    2 2 │

require("./foo");

code-block.js:1:9 lint/nursery/useImportExtensions  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Add a file extension for relative imports.
  
  > 1 │ require("./foo");
      │         ^^^^^^^
    2 │ 
  
  ℹ Explicit import improves compatibility with browsers and makes file resolution in tooling faster.
  
  ℹ Unsafe fix: Add potential import extension .js.
  
    1   │ - require("./foo");
      1 │ + require("./foo.js");
    2 2 │

Valid

import "biome";

import "./foo.js";

import "./bar/index.js";

import("./foo.js");

require("./foo.js");

Caveats

If you are using TypeScript, TypeScript version 5.0 and later is required, also make sure to enable allowImportingTsExtensions=true in your tsconfig.json.

Rule does not yet check filesystem for file type. It tries to guess which extension it should add based on the file extension of the current file and the import path. When applying the suggested fix, make sure to verify that the file type is correct.