如何配置ESLint强制要求.ts文件的导入语句添加.js后缀

1. 安装依赖 #

首先安装所需的ESLint相关插件：

npm install --save-dev eslint @typescript-eslint/parser eslint-plugin-import eslint-import-resolver-typescript

2. 配置ESLint规则 #

在你的.eslintrc.json（或其他格式的ESLint配置文件）中添加如下配置：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["import"],
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {}
    }
  },
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "always",
        "tsx": "always",
        "js": "always",
        "jsx": "always"
      }
    ]
  }
}

上述规则中ignorePackages表示忽略第三方npm包的导入校验，仅校验项目内的相对/绝对导入路径；配置要求导入.ts/.tsx后缀的源文件时，必须显式携带对应的.js后缀。

3. 批量修复现有导入语句 #

该规则支持ESLint自动修复能力，项目规模较大时直接执行以下命令即可批量为所有缺失后缀的导入语句添加.js后缀：

npx eslint . --ext .ts,.tsx --fix

前置依赖校验 #

请先确认你的tsconfig.json中已开启符合ESM规范的配置，否则TypeScript本身会报错无法识别带.js后缀的导入：

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "ESNext"
  }
}

内容的提问来源于stack exchange，提问作者Ricky Kazuo Miller