使用波浪线路径导入时ESLint报错，如何配置解决？

ESLint抛出这个错误是因为它无法识别~对应的实际文件路径，需要配置导入解析器让它映射到正确的目录。以下是不同场景下的配置方案：

1. 纯JavaScript项目（使用eslint-import-resolver-alias） #

• 首先安装依赖：

  npm install eslint-import-resolver-alias --save-dev
  # 或使用yarn
  yarn add eslint-import-resolver-alias --dev
  # 或pnpm
  pnpm add eslint-import-resolver-alias -D
  

• 修改你的ESLint配置文件（.eslintrc.js/.eslintrc.json等），在settings中添加解析规则，将~映射到你的源码根目录（通常是src）：

  module.exports = {
    // ...其他ESLint规则配置
    settings: {
      'import/resolver': {
        alias: {
          map: [['~', './src']],
          extensions: ['.js', '.jsx', '.json'] // 根据项目文件类型调整
        }
      }
    }
  };
  

2. 使用Webpack的项目 #

如果你的Webpack配置中已经定义了~的别名，可以直接让ESLint复用这个配置：

• 安装依赖：

  npm install eslint-import-resolver-webpack --save-dev
  

• 在ESLint配置中指定Webpack配置文件路径：

  module.exports = {
    settings: {
      'import/resolver': {
        webpack: {
          config: './webpack.config.js' // 替换为你的Webpack配置文件路径
        }
      }
    }
  };
  

  Webpack配置中的resolve.alias示例：

  // webpack.config.js
  module.exports = {
    resolve: {
      alias: {
        '~': path.resolve(__dirname, 'src')
      }
    }
  };
  

3. TypeScript项目 #

对于TS项目，推荐通过tsconfig.json配置路径映射，再让ESLint读取这个配置：

• 先在tsconfig.json中添加路径配置：

  {
    "compilerOptions": {
      "baseUrl": "./src",
      "paths": {
        "~/*": ["*"] // 将~/*映射到src下的所有文件
      }
      // ...其他TS配置
    }
  }
  

• 安装依赖：

  npm install eslint-import-resolver-typescript --save-dev
  

• 修改ESLint配置：

  module.exports = {
    settings: {
      'import/resolver': {
        typescript: {
          project: './tsconfig.json' // 指定TS配置文件路径
        }
      }
    }
  };
  

配置完成后重启ESLint服务（或编辑器），错误即可消除。

内容的提问来源于stack exchange，提问作者Guillermo Brachetta