useImportExtensions

诊断类别：lint/correctness/useImportExtensions

¥Diagnostic Category: lint/correctness/useImportExtensions

JavaScript (and super languages)

自从：v1.8.0

¥Since: v1.8.0

强制显式比较值的、、或属性。

¥Enforce file extensions for relative imports.

浏览器和 Node.js 本身不支持导入没有扩展名的文件。此规则强制使用文件扩展名进行相对导入以使代码更加一致。

¥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.

该规则检查静态导入和动态导入调用，例如 import() 和 require()。

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

要确保 Visual Studio Code 在自动导入变量时添加文件扩展名，你可以将 javascript.preferences.importModuleSpecifierEnding and typescript.preferences.importModuleSpecifierEnding 设置为所需的文件扩展名。

¥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/correctness/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/correctness/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/correctness/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/correctness/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/correctness/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/correctness/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");

选项

¥Options

使用选项根据 linted 文件扩展名为你的项目指定正确的导入扩展名。这些映射将覆盖规则的默认逻辑。

¥Use the options to specify the correct import extensions for your project based on the linted file extension. These mappings will override the rule’s default logic.

目前，Biome 根据检查的文件扩展名确定导入扩展名。suggestedExtensions 选项用作映射，其中键是源文件扩展名，值应提供两种可能的导入映射：

¥Currently, Biome determines the import extension based on the inspected file extension. The suggestedExtensions option works as a map, where the key is the source file extension and the value should provide two possible mappings for imports:

module 用于以小写字符开头的模块导入，例如 foo.js

¥module is used for module imports that start with a lower-case character, e.g. foo.js
component 用于以大写字符开头的组件文件，例如 Foo.jsx（这是 React JSX 的常见约定）

¥component is used for component files that start with an upper-case character, e.g. Foo.jsx (which is a common convention for React JSX)

例如，如果你希望 .ts 文件将其他模块导入为 .js（或 .jsx），则应在 Biome 配置中配置以下选项：

¥For example, if you want .ts files to import other modules as .js (or .jsx), you should configure the following options in your Biome config:

{
    "//": "...",
    "options": {
        "suggestedExtensions": {
            "ts": {
                "module": "js",
                "component": "jsx"
            }
        }
    }
}

注意事项

¥Caveats

如果你使用的是 TypeScript，则需要 TypeScript 5.0 及更高版本，还要确保在 tsconfig.json 中启用 allowImportingTsExtensions=true。

¥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.

useImportExtensions

示例

无效

有效

选项

注意事项

相关链接