如何让 eslint import/first 了解我的 webpack 别名？

Question

我用来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

| source
 - | app
    - | containers
       - | CalendarContainer.js
| .eslintrc
| webpack.config.dev.js
| webpack.config.resolve.js

webpack.config.resolve.js

const resolveConfig = require('./webpack.config.resolve')
const appConfig = {
  // lots of config,
  ...resolveConfig // to have the resolve key with aliases underneath
}
module.exports = [appConfig, ...]

.eslintrc

{  
  // ...
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "webpack.config.resolve.js"
      }
    }
  },
  // ...
}

CalendarContainer.js

const path = require('path');

module.exports = {
    resolve: {
        extensions: ['.js'],
        modules: ['node_modules'],
        alias: {
            '~containers': path.resolve(__dirname, 'source/app/containers'),
            // ...
        },
    },
};

---

除了以下行之外，这一切都很好：
import SearchModalContainer from '~containers/SearchModalContainer';

事实上，eslint 仍然报告错误：
Absolute imports should come before relative imports.eslint(import/first)

我怎样才能让 eslint 理解这个导入是相对导入而不是绝对导入？

（我不想在 eslint 配置上禁用此规则）

Answer 1

使用 eslint-import-resolver-alias

只需替换eslint-import-resolver-webpack为eslint-import-resolver-alias即可轻松为 eslint 配置别名。