Vite.js上带有Eslint的Vue 3-无法解析模块eslint的路径(导入/未解析)

osh3o9ms  于 2022-11-17  发布在  Vue.js
关注(0)|答案(6)|浏览(477)

我在Vite.js上使用Vue 3,并使用Eslint + Airbnb配置。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应用程序的工作原理与此类似,并正确解析导入路径,但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是否可以帮助您。

mu0hgdu0

mu0hgdu01#

这解决了我的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.
my 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"]
}

点击此处查看讨论:

y3bcpkx1

y3bcpkx12#

如果有人遇到这个问题,这在我的情况 *:

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src'],
        ],
      },
    },
  },
  • 在我的例子中,Vue的根目录是“src”目录,而Eslint的根目录更高一级,所以它需要“./src”路径。

非常感谢@ https://github.com/aladdin-add通过github问题给出的答案!

dgenwo3n

dgenwo3n3#

我遇到了同样的问题,即使我修复了src路径,它仍然有问题。它没有工作,直到我添加扩展:

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

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

ecfdbz9o4#

1.在vite.config.js中使用导出别名(& E)

// 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.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.从vite.config.js导入、Map并在.eslintrc.esm.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,
          },
      },
  },
}
5sxhfpxr

5sxhfpxr5#

在.eslintrc.js中添加

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

},

tcbh2hod

tcbh2hod6#

我怎么也弄不好,上面的方法我都试过了。我的文件还有什么问题吗?

// .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")}`,
    }),
  },
};

好耶!

相关问题