如何在 ESLint 项目中启用 eslint-plugin-react-compiler 的 recommended 规则检查 Rules of React 违规【免费下载链接】reactThe library for web and native user interfaces.项目地址: https://gitcode.com/GitHub_Trending/re/react在一个已有 ESLint 的 React 项目里你希望不引入独立的编译器配置步骤直接让 ESLint 检查组件和 hook 是否违反 React Compiler 依据的 Rules of React 约束组件/hook 纯度、props 与 state 不可变、副作用必须离开 render、ref 使用、gating 配置等。eslint-plugin-react-compiler的用途正是“surfacing problematic React code found by the React compiler”见 compiler/packages/eslint-plugin-react-compiler/README.md。启用它的configs.recommended预设后运行 ESLint 时就会以[ReactCompilerError]开头的报错加代码帧的形式指出违规位置。环境要求以下要求来自插件的 package.json 与 READMENode 版本^14.17.0 || ^16.0.0 || 18.0.0engines.node。ESLintpeer dependency 要求eslint 7README 中给出的 Flat config 写法针对 “eslint 8 config”例如eslint.config.mjs。项目已有或即将安装ESLint。README 的第一步就是安装 ESLintnpm i eslint --save-dev如果项目里已有 ESLint跳过这条直接执行下一条npm install eslint-plugin-react-compiler --save-dev两条命令来自 README 的 Installation 小节。在 Flat Configeslint.config.mjs中启用 recommended这是 README 给出的推荐配置方式。按 README 的 diff 示例在eslint.config.mjs中导入插件并把reactCompiler.configs.recommended加入配置数组 import reactCompiler from eslint-plugin-react-compiler import react from eslint-plugin-react export default [ // Your existing config { ...pluginReact.configs.flat.recommended, settings: { react: { version: detect } } }, reactCompiler.configs.recommended ]示例中import react from eslint-plugin-react及pluginReact.configs.flat.recommended那两行代表你项目里已有的 ESLint 配置README 标注为 “Your existing config”你保留自己现有的配置项即可新增的实质内容只有 import 和数组里的reactCompiler.configs.recommended。configs.recommended的内部行为可以在源码中核对src/index.ts 中它注册react-compiler插件的全部规则并把recommendedRules里的每条规则按react-compiler/规则名映射到 ESLint 严重级别error→errorwarning→warnhint/off→off映射函数mapErrorSeverityToESlint见 src/rules/ReactCompilerRule.ts。在 .eslintrcLegacy config中启用可选分支如果你的项目仍使用.eslintrc风格配置README 给出的做法是在plugins中加入react-compiler可省略eslint-plugin-前缀并在rules中配置规则{ plugins: [ react-compiler ] }{ rules: { react-compiler/react-compiler: error } }需要注意一处文档与源码不一致README 示例使用的单条规则名react-compiler/react-compiler在当前源码导出的规则名中并不存在。src/index.ts 导出的rules按LintRules的分类名注册即purity、globals、immutability、refs这类名字使用时写作react-compiler/purity等。因此 legacy 配置下按单条规则手动开启时请以源码实际导出的规则名为准要启用完整 recommended 集合优先使用上一条的 Flat config 方式。recommended 预设实际检查哪些内容recommendedRules由 LintRules 中preset为Recommended的规则组成。根据 CompilerError.ts 中的定义当前包含以下规则级别与描述取自源码中的severity和description字段规则名级别检查内容源码 description 摘要react-compiler/configerror校验编译器配置选项react-compiler/gatingerror校验 gating 模式的配置react-compiler/globalserror校验 render 期间对全局变量的赋值/变更属于“副作用必须离开 render”的检查react-compiler/immutabilityerror校验不可变约束即不得变更 props、state 等不可变值react-compiler/purityerror校验组件/hook 是纯函数检查是否调用了已知不纯的函数react-compiler/refserror校验 ref 的正确使用不在 render 中读写react-compiler/set-state-in-effecterror校验不在 effect 中同步调用 setStatereact-compiler/set-state-in-rendererror校验不在 render 中设置 state避免额外渲染与可能的无限渲染循环react-compiler/static-componentserror校验组件是静态的不会每次渲染被重新创建react-compiler/preserve-manual-memoizationerror校验编译器不会降低已有的手动 memoizationuseMemo/useCallback/React.memoreact-compiler/use-memoerror校验useMemo()的常见误用react-compiler/error-boundarieserror校验使用 error boundary 而非 try/catch 处理子组件错误react-compiler/unsupported-syntaxwarn校验 React Compiler 不打算支持的语法react-compiler/incompatible-librarywarn校验是否使用了与 memoization手动或自动不兼容的库另外void-use-memo校验 useMemo 总是返回值且结果被使用属于更实验性的RecommendedLatest预设不在configs.recommended里。README 的 Rules 一节目前还是自动生成的 TODO 占位所以官方规则列表尚未发布上表以仓库源码中的LintRules定义为参照。验证是否生效配置完成后运行项目的 lint 脚本或标准 ESLint 入口如npx eslint 文件或目录检查一个包含违规代码的文件。从 ReactCompilerRule.ts 的printErrorMessage与makeSuggestions可以看到违规会被context.report上报消息格式为[ReactCompilerError] reason随后附加 description 和文件:行:列定位的代码帧每条诊断还可以携带 suggestions规则 meta 中hasSuggestions: true。也就是说判断生效的标志是ESLint 输出中出现上述格式的错误条目并指向具体代码位置。下面是一段来自插件测试用例tests/PluginTest-test.ts的示例输入与预期消息仅供对照消息格式不是固定预期输出import Child from ./Child; function Component() { const result cond ?? useConditionalHook(); return {Child(result)} /; }测试期望上报两条诊断Hooks must always be called in a consistent order Capitalized functions are reserved for components限制与注意事项版本边界Flat config 写法面向 ESLint 8Node 需满足^14.17.0 || ^16.0.0 || 18.0.0。recommended不包含实验性预设recommended-latest中的规则如void-use-memooff预设的规则也不会被configs.recommended启用。README 中 legacy 示例的规则名与当前源码导出的规则名不一致见上文说明按单条规则名手动开启时以源码为准。该插件 peerDependencies 中babel-plugin-react-compiler-rust为可选依赖peerDependenciesMeta标记 optional不影响按 README 安装配置的主路径。完成上述安装与配置后违规代码会在 lint 结果中以[ReactCompilerError]条目暴露后续若需调整检查范围可对照 CompilerError.ts 中的LintRules定义逐条确认各规则所属预设与级别。【免费下载链接】reactThe library for web and native user interfaces.项目地址: https://gitcode.com/GitHub_Trending/re/react创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何在 ESLint 项目中启用 eslint-plugin-react-compiler 的 recommended 规则检查 Rules of React 违规【免费下载链接】reactThe library for web and native user interfaces.项目地址: https://gitcode.com/GitHub_Trending/re/react在一个已有 ESLint 的 React 项目里你希望不引入独立的编译器配置步骤直接让 ESLint 检查组件和 hook 是否违反 React Compiler 依据的 Rules of React 约束组件/hook 纯度、props 与 state 不可变、副作用必须离开 render、ref 使用、gating 配置等。eslint-plugin-react-compiler的用途正是“surfacing problematic React code found by the React compiler”见 compiler/packages/eslint-plugin-react-compiler/README.md。启用它的configs.recommended预设后运行 ESLint 时就会以[ReactCompilerError]开头的报错加代码帧的形式指出违规位置。环境要求以下要求来自插件的 package.json 与 READMENode 版本^14.17.0 || ^16.0.0 || 18.0.0engines.node。ESLintpeer dependency 要求eslint 7README 中给出的 Flat config 写法针对 “eslint 8 config”例如eslint.config.mjs。项目已有或即将安装ESLint。README 的第一步就是安装 ESLintnpm i eslint --save-dev如果项目里已有 ESLint跳过这条直接执行下一条npm install eslint-plugin-react-compiler --save-dev两条命令来自 README 的 Installation 小节。在 Flat Configeslint.config.mjs中启用 recommended这是 README 给出的推荐配置方式。按 README 的 diff 示例在eslint.config.mjs中导入插件并把reactCompiler.configs.recommended加入配置数组 import reactCompiler from eslint-plugin-react-compiler import react from eslint-plugin-react export default [ // Your existing config { ...pluginReact.configs.flat.recommended, settings: { react: { version: detect } } }, reactCompiler.configs.recommended ]示例中import react from eslint-plugin-react及pluginReact.configs.flat.recommended那两行代表你项目里已有的 ESLint 配置README 标注为 “Your existing config”你保留自己现有的配置项即可新增的实质内容只有 import 和数组里的reactCompiler.configs.recommended。configs.recommended的内部行为可以在源码中核对src/index.ts 中它注册react-compiler插件的全部规则并把recommendedRules里的每条规则按react-compiler/规则名映射到 ESLint 严重级别error→errorwarning→warnhint/off→off映射函数mapErrorSeverityToESlint见 src/rules/ReactCompilerRule.ts。在 .eslintrcLegacy config中启用可选分支如果你的项目仍使用.eslintrc风格配置README 给出的做法是在plugins中加入react-compiler可省略eslint-plugin-前缀并在rules中配置规则{ plugins: [ react-compiler ] }{ rules: { react-compiler/react-compiler: error } }需要注意一处文档与源码不一致README 示例使用的单条规则名react-compiler/react-compiler在当前源码导出的规则名中并不存在。src/index.ts 导出的rules按LintRules的分类名注册即purity、globals、immutability、refs这类名字使用时写作react-compiler/purity等。因此 legacy 配置下按单条规则手动开启时请以源码实际导出的规则名为准要启用完整 recommended 集合优先使用上一条的 Flat config 方式。recommended 预设实际检查哪些内容recommendedRules由 LintRules 中preset为Recommended的规则组成。根据 CompilerError.ts 中的定义当前包含以下规则级别与描述取自源码中的severity和description字段规则名级别检查内容源码 description 摘要react-compiler/configerror校验编译器配置选项react-compiler/gatingerror校验 gating 模式的配置react-compiler/globalserror校验 render 期间对全局变量的赋值/变更属于“副作用必须离开 render”的检查react-compiler/immutabilityerror校验不可变约束即不得变更 props、state 等不可变值react-compiler/purityerror校验组件/hook 是纯函数检查是否调用了已知不纯的函数react-compiler/refserror校验 ref 的正确使用不在 render 中读写react-compiler/set-state-in-effecterror校验不在 effect 中同步调用 setStatereact-compiler/set-state-in-rendererror校验不在 render 中设置 state避免额外渲染与可能的无限渲染循环react-compiler/static-componentserror校验组件是静态的不会每次渲染被重新创建react-compiler/preserve-manual-memoizationerror校验编译器不会降低已有的手动 memoizationuseMemo/useCallback/React.memoreact-compiler/use-memoerror校验useMemo()的常见误用react-compiler/error-boundarieserror校验使用 error boundary 而非 try/catch 处理子组件错误react-compiler/unsupported-syntaxwarn校验 React Compiler 不打算支持的语法react-compiler/incompatible-librarywarn校验是否使用了与 memoization手动或自动不兼容的库另外void-use-memo校验 useMemo 总是返回值且结果被使用属于更实验性的RecommendedLatest预设不在configs.recommended里。README 的 Rules 一节目前还是自动生成的 TODO 占位所以官方规则列表尚未发布上表以仓库源码中的LintRules定义为参照。验证是否生效配置完成后运行项目的 lint 脚本或标准 ESLint 入口如npx eslint 文件或目录检查一个包含违规代码的文件。从 ReactCompilerRule.ts 的printErrorMessage与makeSuggestions可以看到违规会被context.report上报消息格式为[ReactCompilerError] reason随后附加 description 和文件:行:列定位的代码帧每条诊断还可以携带 suggestions规则 meta 中hasSuggestions: true。也就是说判断生效的标志是ESLint 输出中出现上述格式的错误条目并指向具体代码位置。下面是一段来自插件测试用例tests/PluginTest-test.ts的示例输入与预期消息仅供对照消息格式不是固定预期输出import Child from ./Child; function Component() { const result cond ?? useConditionalHook(); return {Child(result)} /; }测试期望上报两条诊断Hooks must always be called in a consistent order Capitalized functions are reserved for components限制与注意事项版本边界Flat config 写法面向 ESLint 8Node 需满足^14.17.0 || ^16.0.0 || 18.0.0。recommended不包含实验性预设recommended-latest中的规则如void-use-memooff预设的规则也不会被configs.recommended启用。README 中 legacy 示例的规则名与当前源码导出的规则名不一致见上文说明按单条规则名手动开启时以源码为准。该插件 peerDependencies 中babel-plugin-react-compiler-rust为可选依赖peerDependenciesMeta标记 optional不影响按 README 安装配置的主路径。完成上述安装与配置后违规代码会在 lint 结果中以[ReactCompilerError]条目暴露后续若需调整检查范围可对照 CompilerError.ts 中的LintRules定义逐条确认各规则所属预设与级别。【免费下载链接】reactThe library for web and native user interfaces.项目地址: https://gitcode.com/GitHub_Trending/re/react创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
