使用Vite的React+JS项目Lint时出现无法解析模块路径错误

在基于Vite的React+JS项目中，使用别名@images导入图片时触发ESLint错误：

2:23 error Unable to resolve path to module '@images/react.svg' import/no-unresolved

项目目录结构为src/assets/images/react.svg，导入代码为import reactLogo from '@images/react.svg';。已尝试修改.jsconfig.json和vite.config.js的路径配置（相对/绝对路径均试过），问题仍未解决；编辑器能提示@images别名，但无法显示对应文件夹内的内容。

以下是项目相关配置文件：

package.json依赖项 #

{
  "dependencies": {
    "@vitejs/plugin-react": "^3.1.0",
    "eslint-plugin-import": "^2.27.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "stylelint-order": "^6.0.2",
    "vite": "^4.1.0",
    "vite-plugin-eslint": "^1.8.1"
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@types/node": "^18.14.1",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "eslint": "^8.34.0",
    "eslint-config": "^0.3.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.8.4",
    "stylelint": "^15.2.0",
    "stylelint-config-recommended": "^10.0.1"
  }
}

.eslintrc文件 #

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["react", "import", "react-hooks", "prettier"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",
    "prettier/prettier": "error"
  },
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module",
    "allowImportExportEverywhere": true
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": ["./src"],
        "extensions": [".js", ".jsx"],
        "moduleDirectory": ["./", "node_modules"]
      }
    }
  },
  "env": {
    "browser": true,
    "node": true
  }
}

vite.config.js文件 #

import path from 'path';

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [
    react(),
    eslintPlugin({
      include: ['./src/**/*.jsx', './src/**/*.js'],
      fix: true,
    }),
  ],
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, './src/components/'),
      '@images': path.resolve(__dirname, './src/assets/images/'),
      '@fonts': path.resolve(__dirname, './src/assets/fonts/'),
    },
  },
});

.jsconfig.json文件 #

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components": ["src/components/"],
      "@images": ["src/assets/images/"],
      "@fonts": ["src/assets/fonts/"]
    }
  }
}

解决方案 #

1. 安装ESLint别名解析器 #

ESLint默认的node解析器无法直接识别Vite配置的别名，需安装专门的解析器：

npm install eslint-import-resolver-alias --save-dev

2. 修改ESLint配置，添加别名映射与图片扩展名 #

更新.eslintrc中的settings.import/resolver配置，让ESLint识别别名和图片文件：

"settings": {
  "react": {
    "version": "detect"
  },
  "import/resolver": {
    "alias": {
      "map": [
        ["@components", "./src/components"],
        ["@images", "./src/assets/images"],
        ["@fonts", "./src/assets/fonts"]
      ],
      "extensions": [".js", ".jsx", ".svg", ".png", ".jpg"]
    },
    "node": {
      "extensions": [".js", ".jsx", ".svg", ".png", ".jpg"],
      "moduleDirectory": ["./", "node_modules"]
    }
  }
}

3. 调整jsconfig配置，添加通配符支持 #

修改.jsconfig.json的paths配置，添加通配符*，让编辑器识别别名下的子文件：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@images/*": ["src/assets/images/*"],
      "@fonts/*": ["src/assets/fonts/*"]
    }
  },
  "include": ["src/**/*"]
}

4. 重启服务与编辑器 #

保存所有配置文件后，重启Vite开发服务和编辑器，确保配置生效。

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