Vite.js 上带有 Eslint 的 Vue 3 — 无法解析模块 eslint(import/no-unresolved) 的路径

Question

我在 Vite.js 上使用带有 Eslint + Airbnb 配置的 Vue 3。 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 app 是这样工作的，正确解析了导入路径，但是 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，看看是否可以帮助您。

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。（感谢）

2.1 npm 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.1 npm 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

在 .eslintrc.js 添加

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

},

Answer 5

这解决了我的 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:

Vite.js 上带有 Eslint 的 Vue 3 — 无法解析模块 eslint(import/no-unresolved) 的路径

Vue 3 on Vite.js with Eslint — Unable to resolve path to module eslint(import/no-unresolved)

path

eslint

vue.js

eslintrc

vite