Solid.js项目ESLint解析TSX组件导入路径规则冲突问题

问题现象 #

开发Solid.js项目时导入TSX组件会触发双向ESLint报错：

• 导入路径省略.tsx扩展名时，ESLint提示无法解析对应模块路径
• 导入路径携带.tsx扩展名时，ESLint提示应当移除文件扩展名
  现有配置存在规则逻辑冲突，且缺少TypeScript路径解析能力，两种写法均无法通过校验。

问题根源 #

1. 项目使用airbnb-base规则集自带的eslint-plugin-import做导入校验，但未安装TypeScript对应的路径解析器，插件无法识别.ts/.tsx类TypeScript文件的无后缀导入
2. 现有import/extensions规则配置缺少对npm包的忽略，且未和解析器能力对齐，导致规则校验和路径解析逻辑打架

修复步骤 #

1. 安装缺失的TypeScript导入解析依赖

# npm 执行
npm i -D eslint-import-resolver-typescript

# pnpm 执行
pnpm add -D eslint-import-resolver-typescript

# yarn 执行
yarn add -D eslint-import-resolver-typescript

2. 调整.eslintrc.yaml配置，新增解析器设置，修正导入扩展名规则
   完整可用配置参考如下：

env:
  browser: true
  es2021: true
extends:
  - airbnb-base
  - eslint:recommended
  - plugin:solid/typescript
  - prettier
parser: "@typescript-eslint/parser"
parserOptions:
  ecmaVersion: latest
  sourceType: module
plugins:
  - prettier
  - simple-import-sort
  - solid
  - "@typescript-eslint"
# 新增import插件解析器配置，支持TypeScript路径识别
settings:
  import/resolver:
    typescript:
      alwaysTryTypes: true
      # 若项目tsconfig.json不在根目录，可取消下行注释指定路径
      # project: ./tsconfig.json
rules:
  # 修正扩展名校验规则，忽略npm包校验，覆盖所有前端常用脚本扩展名
  import/extensions:
    - error
    - ignorePackages
    - tsx: never
      ts: never
      jsx: never
      js: never
  prettier/prettier:
    - error
  simple-import-sort/imports: error
  simple-import-sort/exports: error

3. 重启ESLint服务生效
   编辑器（如VS Code）可通过命令面板执行ESLint: Restart ESLint Server重启服务，命令行场景直接重新执行ESLint校验命令即可。

效果说明 #

修复后导入TSX/TS/JSX/JS文件统一省略扩展名即可，不会触发路径解析错误；若携带扩展名会按规则提示移除，符合Solid.js官方模板及Vite等构建工具的默认导入习惯，无规则冲突。

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