使用typescript-eslint-parser时，ESLint脚本指定.ts后缀报错如何解决？

我来帮你搞定这个问题——你遇到的「Missing file extension "ts"」报错，本质是ESLint默认没把.ts当成合法的模块扩展名，再加上切换到TypeScript后，ESLint的配置和脚本命令都需要做对应调整。按下面的步骤来修改就行：

1. 先确认依赖包安装完整 #

首先得确保你已经装了TypeScript ESLint的核心依赖，没装的话先跑这个命令：

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

这些包分别负责ESLint核心功能、TypeScript专属规则插件、TypeScript代码解析器，还有TypeScript本身的编译支持。

2. 简化并修正package.json的lint脚本 #

你原来直接调用node ./node_modules/eslint/bin/eslint.js的写法太冗余了，npm脚本会自动识别node_modules/.bin里的可执行文件，直接用eslint命令就行。另外最好明确指定要检查的目录（比如src/），避免误扫无关文件。修改后的脚本如下：

"scripts": {
  "lint": "eslint --ext .ts src/"
}

如果你的项目里还有.tsx文件，也可以用逗号分隔多个扩展名：eslint --ext .ts,.tsx src/

3. 配置ESLint识别TypeScript文件 #

关键一步：你需要创建或修改ESLint的配置文件（比如.eslintrc.js或.eslintrc.json），告诉ESLint用TypeScript解析器，并调整扩展名相关规则。示例配置如下：

module.exports = {
  // 指定用typescript-eslint解析器处理TS文件
  parser: '@typescript-eslint/parser',
  // 启用TypeScript ESLint插件
  plugins: ['@typescript-eslint'],
  // 继承官方推荐的规则集
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    // 关闭ESLint默认的文件扩展名检查规则（TS模块导入通常不需要写扩展名）
    'import/extensions': 'off',
    // 如果你用到了eslint-plugin-import插件，也可以更精细配置：
    // 'import/extensions': ['error', 'ignorePackages', { ts: 'never' }]
  },
  settings: {
    // 让import插件能正确解析TypeScript模块路径
    'import/resolver': {
      typescript: {}
    }
  }
};

这个配置里，我们关掉了导致报错的import/extensions规则——因为在TypeScript项目中，导入模块时通常不需要写.ts扩展名，ESLint默认规则会把这种情况判定为错误，所以必须关掉或者调整规则适配TS场景。

4. 可选：关联tsconfig.json（启用类型检查规则） #

如果你想让ESLint遵循项目的TypeScript配置（比如tsconfig.json里的include/exclude范围），并且启用需要类型信息的高级规则，可以在ESLint配置里加上parserOptions.project：

module.exports = {
  // ...其他配置
  parserOptions: {
    project: './tsconfig.json'
  }
};

这一步是可选的，如果你不需要依赖类型信息的ESLint规则，可以跳过。

做完这些调整后，再运行npm run lint应该就能正常检查你的TypeScript文件，不会再出现扩展名报错了，WebStorm的ESLint支持也能继续正常工作。

内容的提问来源于stack exchange，提问作者Joe