如何修改ESLint配置使其识别基于src目录的绝对导入？

我之前也碰到过一模一样的情况！用NODE_PATH=src搞定了webpack的绝对导入，但ESLint完全不买账，报一堆import/no-unresolved和import/extensions错误——这是因为ESLint不知道你自定义的模块查找路径，得给它单独配置一下才行。

下面是具体的解决步骤：

1. 安装ESLint路径解析依赖
   首先需要装一个辅助ESLint识别自定义路径的包，在终端里执行：

   npm install eslint-import-resolver-node --save-dev
   # 或者用yarn的话
   yarn add eslint-import-resolver-node -D
   

2. 修改ESLint配置文件
   打开你的.eslintrc.js（或者.eslintrc），添加settings字段，把src目录加入ESLint的模块查找路径，同时指定你项目里用到的文件扩展名：

   module.exports = {
     parser: 'babel-eslint',
     extends: 'airbnb',
     // 新增这部分配置
     settings: {
       'import/resolver': {
         node: {
           paths: ['src'],
           extensions: ['.js', '.jsx'] // 如果用TS的话加上'.ts', '.tsx'
         }
       }
     },
     rules: {
       'react/no-did-mount-set-state': 'off',
       'import/no-extraneous-dependencies': 'off',
       'no-use-before-define': 'off',
       'arrow-body-style': 'off',
       // ...你的其他规则
     }
   };
   

3. 重启ESLint服务
   配置改完后，记得重启一下编辑器里的ESLint插件（或者直接重启编辑器），让新配置生效。

这样一来，ESLint就能正确识别你从src根目录开始的绝对导入了，那些报错应该就消失啦。

内容的提问来源于stack exchange，提问作者Alexander Knyazev