我在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是否可以帮助您。
6条答案
按热度按时间mu0hgdu01#
这解决了我的
TypeScript
项目中的问题。eslint-import-resolver-typescript
安装后应添加到
.eslintrc.js.
my tsconfig.json(删除不需要的设置)
点击此处查看讨论:
y3bcpkx12#
如果有人遇到这个问题,这在我的情况 *:
非常感谢@ https://github.com/aladdin-add通过github问题给出的答案!
dgenwo3n3#
我遇到了同样的问题,即使我修复了src路径,它仍然有问题。它没有工作,直到我添加扩展:
ecfdbz9o4#
1.在vite.config.js中使用导出别名(& E)
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
。2.4在
.eslintrc.js
中包含以下代码:3.从
vite.config.js
导入、Map并在.eslintrc.esm.js
中使用别名3.1
npm i eslint-import-resolver-alias -D
3.2在
.eslintrc.esm.js
中包含以下代码:5sxhfpxr5#
在.eslintrc.js中添加
},
tcbh2hod6#
我怎么也弄不好,上面的方法我都试过了。我的文件还有什么问题吗?
更新
我唯一能让它工作的方法就是用这个:
eslint-config-airbnb
链接在这里,自述文件特别有帮助。npm add --dev @vue/eslint-config-airbnb @rushstack/eslint-patch
我的**.eslintrc.js**现在是:
好耶!