如何通过ESLint自动将项目中导入路径替换为别名

步骤1：配置项目路径别名 #

先在项目核心配置文件中定义路径别名，让工具链识别映射关系：

• TypeScript项目（tsconfig.json）：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "uikit/*": ["./src/uikit/*"]
      }
    }
  }
  

• JavaScript项目（jsconfig.json）：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "uikit/*": ["./src/uikit/*"]
      }
    }
  }
  

步骤2：安装ESLint依赖插件 #

安装用于解析别名和检查导入规范的插件：

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

• Webpack项目替换为eslint-import-resolver-webpack；Vite项目替换为eslint-import-resolver-vite

步骤3：配置ESLint规则 #

在ESLint配置文件（如.eslintrc.js）中添加以下配置，让ESLint识别别名并强制使用：

module.exports = {
  settings: {
    'import/resolver': {
      // TypeScript项目用此配置，Webpack/Vite替换为对应解析器
      typescript: {
        project: './tsconfig.json'
      }
    }
  },
  rules: {
    // 确保别名导入能被正确解析
    'import/no-unresolved': 'error',
    // 关闭扩展名检查（按需调整）
    'import/extensions': 'off',
    // 禁止父目录相对导入，强制使用别名
    'import/no-relative-parent-imports': 'error'
  }
}

步骤4：自动修复现有导入 #

运行ESLint修复命令，批量将长相对路径导入替换为别名：

npx eslint src --fix

补充说明 #

• 如果需要允许部分特定路径的相对导入，可以给import/no-relative-parent-imports规则添加例外配置
• 确保ESLint配置中指向的项目配置文件路径正确，避免解析失败

内容的提问来源于stack exchange，提问作者Timur Zakirov