Vue 3 on Vite.js with Eslint — 无法解析模块 eslint 的路径（import/no-unresolved）

Question

我在 Vite.js 上使用 Vue 3 和 Eslint + Airbnb 配置。 Airbnb config 有一条规则eslint(import/no-unresolved)，很好，但是 Eslint 不知道如何解析别名路径。

我想为路径使用别名——例如： import TableComponent from '@/components/table/TableComponent.vue'˙

环境采用纯 JavaScript。

我设法设置了我的vite.config.js，以便应用可以解析如下路径：

import path from 'path';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [{
        find: "@", replacement: path.resolve(__dirname, 'src')
      },],
  },
});

Vue 应用就是这样工作并正确解析导入路径，但 Eslint 一直报错：Unable to resolve path to module eslint(import/no-unresolved)

我如何以及在哪里可以告诉 Eslint 如何解析别名？

我尝试过： install eslint-plugin-import eslint-import-resolver-alias --save-dev

// .eslintrc.js

// ...
extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'airbnb-base',
    'plugin:vue/vue3-strongly-recommended',
],

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', 'src'],
        ],
      },
    },
  },

但这不起作用。

---

编辑：
解决了这个问题，如果你像我一样使用纯 JavaScript，请查看接受的答案。

如果您使用的是 TypeScript，请查看 Seyd's answer 是否可以帮助您。

Answer 1

如果有人遇到这个问题，这适用于我的情况*：

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src'],
        ],
      },
    },
  },

*在我的例子中，Vue 的根目录是 'src' 目录，而 Eslint 的根目录更高一级，所以它需要 './src' 路径。

非常感谢@https://github.com/aladdin-add 通过 github 问题的回答！

Answer 2

我遇到了同样的问题，即使我修复了 src 路径，它仍然存在问题。在我添加扩展之前它没有工作：

  "settings": {
    "import/resolver": {
      "alias": {
        "map": [
          ["@", "./src"]
        ],

        "extensions": [".js",".jsx"] <--- HERE
      }
    }
  },

Answer 3

1.在 vite.config.js 中使用和导出别名

// vite.config.js

import { resolve } from 'path';

import { defineConfig } from 'vite';

export const aliases = {
    '@': resolve(__dirname, './src'),
    '@u': resolve(__dirname, './src/utils'),
};

export default () => defineConfig({
  // ...
  resolve: {
      alias: aliases,
  },
})

2。使用 ES 模块支持创建 .eslintrc。（感谢 Morgan's answer）

2.1npm i esm -D

2.2 为.eslintrc.js 创建同级 — .eslintrc.esm.js。

2.3 将您的 ESLint 配置放入 .eslintrc.esm.js。

// .eslintrc.esm.js

export default {
  root: true,
  extends: ['@vue/airbnb', 'plugin:vue/recommended'],
  // ...
}

2.4 在.eslintrc.js 内包含以下代码：

const _require = require('esm')(module)
module.exports = _require('./.eslintrc.esm.js').default

3.在.eslintrc.esm.js 中导入、映射和使用来自vite.config.js 的别名

3.1npm i eslint-import-resolver-alias -D

3.2 在.eslintrc.esm.js 内包含以下代码：

// .eslintrc.esm.js

import { aliases } from './vite.config';

const mappedAliases = Object.entries(aliases).map((entry) => entry); // [[alias, path], [alias, path], ...]

export default {
  // ...
  settings: {
      'import/resolver': {
          alias: {
              map: mappedAliases,
          },
      },
  },
}

Answer 4

这解决了我的TypeScript 项目中的问题。

npm install eslint-import-resolver-typescript

eslint-import-resolver-typescript安装后

{
  // other configuration are omitted for brevity
  settings: {
    "import/resolver": {
      typescript: {} // this loads <rootdir>/tsconfig.json to eslint
    },
  },
}

应该添加到.eslintrc.js.

我的 tsconfig.json（删除不需要的设置）

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": false,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client", "node"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "allowJs": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

查看讨论here：

Answer 5

在 .eslintrc.js 中添加

settings: {
'import/resolver': {
  alias: {
    map: [['@', './src/']],
    extensions: ['.js', '.vue'],
  },
},

},