jsx-eslint/eslint-plugin-react

主题

为 ESLint 注入 React 专属的代码规范检查能力，解决 React 开发中常见的反模式、潜在 Bug 与代码风格不统一问题。

核心分点总结

1. JSX 规范：深度解析 JSX 语法，强制统一标签闭合、属性命名等基础代码风格，消除低级错误。

2. Hooks 守护：内置 React Hooks 专属规则（如依赖数组校验、条件调用拦截），在编码阶段直接阻断闭包陷阱与无限循环。

3. 性能反模式检测：识别不必要的重渲染、无效的 props 传递等性能隐患，引导开发者写出更高效的组件。

4. 无障碍支持：提供 JSX 可访问性规则（jsx-a11y），确保交互元素具备合理的 ARIA 属性，让应用对所有人友好。

行动指南

1. 在 React 项目初始化阶段，将其集成到 ESLint 配置中，并配合 Prettier 使用，从源头统一团队代码风格。
2. 针对已有老项目，先开启基础规则进行存量代码扫描，再逐步开启严格规则，避免一次性修改带来的重构阵痛。
3. 在 CI/CD 流程中加入该插件的检查步骤，将代码规范作为合入主干的硬性卡点，确保线上代码质量。

金句总述

让 ESLint 真正读懂 React，把 Bug 扼杀在代码敲下的瞬间。

故事性收尾

曾经，你总是在深夜的 Code Review 中为遗漏的 Hook 依赖和莫名的组件重渲染而抓狂；现在，编辑器里温和的红色波浪线在敲击键盘的瞬间就为你指明了方向。你不再疲于奔命地排查那些本可避免的低级错误，而是将精力倾注在真正的业务逻辑与架构设计上，指尖流淌出的代码，干净、稳健且充满自信。