我正在使用 eslint-import-resolver-webpack
让我的 eslint 知道我的 webpack 别名。
但是我还剩下一个问题:
eslint 正在报告:Absolute imports should come before relative imports. eslint(import/first)
如何让 eslint 理解我的别名导入是相对导入而不是绝对导入?
这是有关我的设置的更多信息:
| source
- | app
- | containers
- | CalendarContainer.js
| .eslintrc
| webpack.config.dev.js
| webpack.config.resolve.js
webpack.config.dev.js
const resolveConfig = require('./webpack.config.resolve')
const appConfig = {
// lots of config,
...resolveConfig // to have the resolve key with aliases underneath
}
module.exports = [appConfig, ...]
webpack.config.resolve.js
const path = require('path');
module.exports = {
resolve: {
extensions: ['.js'],
modules: ['node_modules'],
alias: {
'~containers': path.resolve(__dirname, 'source/app/containers'),
// ...
},
},
};
.eslintrc
{
// ...
"settings": {
"import/resolver": {
"webpack": {
"config": "webpack.config.resolve.js"
}
}
},
// ...
}
CalendarContainer.js
import React, { useEffect, useState } from 'react';
import Button from '../Components/Button';
import SearchModalContainer from '~containers/SearchModalContainer';
除了以下行外,这一切正常:
import SearchModalContainer from '~containers/SearchModalContainer';
确实,eslint 还是报错:
Absolute imports should come before relative imports.eslint(import/first)
我怎样才能让 eslint 理解这个导入是相对导入而不是绝对导入?
(而且我不想在 eslint 配置上禁用此规则)
最佳答案
使用 eslint-import-resolver-alias
只需更换 eslint-import-resolver-webpack
与 eslint-import-resolver-alias你会很容易为 eslint 配置别名。
关于webpack - 如何让 eslint 导入/首先理解我的 webpack 别名?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58513122/