React Native Template Obytes 项目中 ESLint 自动修复功能失效问题解析

在 React Native Template Obytes 7.0.2 版本中，开发者可能会遇到一个常见问题：ESLint 的自动修复功能在保存文件时无法正常工作。这个问题尤其影响开发效率，因为开发者需要手动运行修复命令或手动修正代码格式问题。

问题现象

当开发者在项目中故意违反代码规范时（例如移除 JSX/TS 代码中的必要换行），保存文件后预期的自动修复行为没有发生。具体表现为：

1. 不符合规范的代码格式不会被自动修正
2. 未使用的导入语句不会被自动移除
3. 其他 ESLint 规则违规不会被自动修复

根本原因分析

经过技术验证，该问题主要源于两个关键因素：

1. ESLint 配置不完整：项目从 React Native Community 的 ESLint 配置迁移到 Expo 配置时，缺少了对 Prettier 插件的显式声明。

2. 规则继承链断裂：虽然 Expo 提供了良好的基础配置，但针对 React Native 特定场景的规则继承关系没有完全建立，导致部分格式化规则无法生效。

解决方案

要彻底解决这个问题，需要进行以下配置调整：

1. 在 .eslintrc.js 文件中明确添加 Prettier 插件：

plugins: ['prettier']

2. 在 rules 部分添加 Prettier 规则：

rules: {
  'prettier/prettier': 'error'
}

3. 确保 extends 数组包含必要的配置继承：

extends: [
  'expo',
  'plugin:prettier/recommended'
]

验证方法

开发者可以通过以下步骤验证修复是否成功：

1. 在代码中故意添加未使用的导入语句
2. 保存文件后观察是否自动移除
3. 故意破坏代码格式（如删除必要换行）
4. 检查保存后是否自动恢复正确格式
5. 运行 pnpm lint --fix 命令检查终端修复功能

最佳实践建议

1. 统一团队配置：建议将修正后的 ESLint 配置提交到项目模板中，确保所有新项目都具备正确的自动修复功能。

2. IDE 集成检查：在 VS Code 中确保已安装 ESLint 和 Prettier 扩展，并在设置中启用 "Format On Save" 选项。

3. 预提交钩子：考虑在 husky 的 pre-commit 钩子中添加 lint 检查，作为代码质量的最后一道防线。

通过以上调整，React Native Template Obytes 项目将恢复完整的代码自动格式化功能，显著提升开发体验和代码一致性。这一解决方案不仅修复了当前问题，也为项目的长期代码质量维护奠定了基础。