帶有 Eslint 的 Vite.js 上的 Vue 3 — 無法解析模塊 eslint 的路徑（導入/未解決）

Question

我在帶有 Eslint + Airbnb 配置的 Vite.js 上使用 Vue 3。 Airbnb 配置有一個規則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，請查看 Seyd的回答是否對您有所幫助。

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. Create.eslintrc 支持 ES Modules。 （感謝摩根的回答）

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. 導入 map 並在.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

這解決了這個問題。

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"]
}

檢查這里的討論：

Answer 6

我這輩子都做不到，我已經嘗試了上面的所有方法。 我的文件還有其他問題嗎？

// .eslintrc.cjs
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "airbnb",
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },

  // Using the accepted answer
  settings: {
    "import/resolver": {
      alias: {
        map: [["@", "./src"]],
      },
    },
  },
};

** 更新 **

我能夠讓它工作的唯一方法是使用這個： eslint-config-airbnb 鏈接在這里，自述文件特別有用。

npm add --dev @vue/eslint-config-airbnb @rushstack/eslint-patch

我的.eslintrc.js現在是：

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

const path = require("node:path");
const createAliasSetting = require("@vue/eslint-config-airbnb/createAliasSetting");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "@vue/eslint-config-airbnb", // <-- added
    "eslint:recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },

  rules: {
    "import/no-unresolved": "error",
  },
  settings: {
    ...createAliasSetting({
      "@": `${path.resolve(__dirname, "./src")}`,
    }),
  },
};

萬歲！

Answer 7

在README.md -plugin-import的 README.md 中說：

目前已實現Node和webpack解析，但解析器只是 npm 包，因此支持（並鼓勵）第三方包。

在這里您可以看到第三方解析器的列表。

對我有用的是： eslint-import-resolver-custom-alias ，這就是我使用它的方式：

settings:
  import/resolver:
    eslint-import-resolver-custom-alias:
      alias:
        '@': './app/javascript'
      extensions:
        - '.js'
        - '.vue'

對我而言， @已在vite.config.ts中設置為app/javascript的別名，您應該根據您的項目配置更改它。