配置Eslint+Husky等工具提交代码时出现依赖配置报错

报错原因 #

ESLint的import/no-extraneous-dependencies规则触发错误，它判定vite和@vitejs/plugin-react-swc应放在dependencies中，但实际上这两个是构建工具，属于开发依赖，原本就该归在devDependencies里。

解决方案 #

1. 排查生产代码中的误导入

先检查src目录下的业务代码，确认有没有意外导入vite或@vitejs/plugin-react-swc——这些包只应该出现在vite.config.js这类配置文件里，生产代码完全不需要它们。如果发现误导入，直接删除相关语句即可。

2. 修改ESLint配置，给配置文件开特例

如果报错来自vite.config.js这类配置文件，直接在ESLint规则中针对这些文件调整：

在项目的.eslintrc.js或.eslintrc.json中添加配置：

module.exports = {
  // 其他已有配置...
  rules: {
    'import/no-extraneous-dependencies': [
      'error',
      {
        // 指定哪些文件可以引用devDependencies中的包
        devDependencies: ['vite.config.js', '**/*.config.js', '**/*.setup.js']
      }
    ]
  }
}

或者更直接，针对配置文件单独关闭该规则：

module.exports = {
  // 其他已有配置...
  overrides: [
    {
      files: ['vite.config.js'], // 匹配你的vite配置文件
      rules: {
        'import/no-extraneous-dependencies': 'off'
      }
    }
  ]
}

重要提醒

不要为了消报错就把vite和@vitejs/plugin-react-swc移到dependencies里——它们是构建阶段的工具，生产环境运行代码不需要，移过去只会无端增大生产包体积，完全没必要。

内容的提问来源于stack exchange，提问作者Sanket Patil