如何让 eslint 导入/首先了解我的 webpack 别名？

Posted 2023-03-27

【中文标题】如何让 eslint 导入/首先了解我的 webpack 别名？

【英文标题】：How to make eslint import/first understand my webpack aliases?

【发布时间】：2020-02-19 03:02:10

【问题描述】：

我正在使用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 配置中禁用此规则）

【参考方案1】：

使用 eslint-import-resolver-alias

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