@caspeco/slint-config- react

用于React + TypeScript项目的 Caspeco ESLint配置.

安装

npm install --save-dev @caspeco/eslint-config-react

从 v4. x 移走

如果你正在升级 从 @caspeco/eslint-config v4.x,使用自动迁移脚本 :

# Preview changes
npx caspeco-react-migrate-v5 src/ --dry-run

# Apply changes
npx caspeco-react-migrate-v5 src/

更新插件命名空间 caspeco/ 改为 caspeco-react/见 移徙指南 详细情况.

使用量

创建一个 eslint.config.js 在工程根中的文件 :

import config from "@caspeco/eslint-config-react";

export default [{ ignores: ["dist/**/*", "build/**/*"] }, ...config];

反应编译器( opt- in)

如果你的项目通过了 React 编译器,使用 /compiler 而不是进入点。 它是一个即时的替换 使得全 eslint-plugin-react-hooks 建议的规则,包括反应编译器规则 (单位:千美元)react-hooks/purity, (中文(简体) ), react-hooks/static-components, (中文(简体) ), react-hooks/use-memo, (中文(简体) ), react-hooks/immutability, (中文(简体) ), react-hooks/set-state-in-render,还有:

import config from "@caspeco/eslint-config-react/compiler";

export default [{ ignores: ["dist/**/*", "build/**/*"] }, ...config];

默认配置( N)@caspeco/eslint-config-react故意只允许 react-hooks/rules-of-hooks 财务报告和审定财务报表 react-hooks/exhaustive-deps,所以没有 尚未通过 React 编译器, 也没有被特定编译器的警告淹没 .

包含什么

此配置包括来自我们 TypeScript 配置加 React 特定规则的所有内容 :

基础类型脚本配置

• 类型脚本 ESLint - 建议类型检查的配置
• 没有弹匣文件 - 防止桶文件的使用
• 文件命名公约 - 执行文件和文件夹的kebab案
• 高级整合 - 与Pretier格式兼容

反应- 特定配置

• 反应插件 - 核心回放规则
• 反应钩 - 执行钩子规则
• 反应刷新 - 对Vite/开发的快速更新支持
• Caspeco 插件 - Caspeco项目的自定义规则(Chakra UI进口限制)

同伴依赖关系

此软件包需要以下对等依赖( 自动由 npm 7+ 安装) :

• eslint (9或10个)
• eslint-plugin-react-hooks
• eslint-plugin-react-refresh
• globals

见 软件包.json 用于特定版本要求.

说明: 其它类型Script 关联的对等关系从 @caspeco/eslint-config-ts (作为正常依赖而自动安装).

eslint-plugin-react 是一种正常的依赖,而不是对等关系。 它还没有发布支持 ESLint 10,所以这个软件包用 fixupRule 从 @eslint/compat。 。 。 .

ESLint 10 (英语)

• 删除 eslint-plugin-react 从你自己 package.json,或 npm 失败 ERESOLVE。 。 。 .
• npm 指纹 npm warn ERESOLVE overriding peer dependency 页:1 eslint-plugin-react。安装成功并启动.
• 安装严格的对等关系( 如 pnpm) strict-peer-dependencies失败直到 eslint-plugin-react 支持 ESLint 10 语句.
• 使用 @eslint/js 10与ESLint 10 (英语). 内容 recommended 添加 no-useless-assignment, (中文(简体) ), no-unassigned-vars 财务报告和审定财务报表 preserve-caught-error。 。 。 .
• 在ESLint 9上,保留 @eslint/js 打开 ^9。没有锁文件的新安装 @eslint/js 10个.

插件

eslint- 插件反应

eslint- 插件反应

Core React Linting 规则,并附带以下定制:

• react-in-jsx-scope: 关闭( 现代反应中不需要)
• prop-types: 关闭( 使用类型脚本代替)
• display-name关闭 :

eslint-plugin- react-hooks (英语)

eslint-plugin- react-hooks (英语)

执行:

• 虎克规则(错误)
• 过度依赖( 警告)

eslint-plugin-反应再现

eslint-plugin-反应再现

确保组件与开发中的快刷新兼容.

光谱反应插件

自定义具有 Caspeco 规则的特定反应插件 :

• 阻碍直接从 @chakra-ui/react (代之以使用主题组件)

与@caspeco/eslint-config-ts的关系

此软件包依赖于并延伸 @caspeco/eslint-config-ts,它作为依赖性自动安装。 这保证了React工程总是使用同样的TypeScript规则而不会漂移. 如果你正在建立一个反应项目,使用这个包. 用于香草类型Script项目 @caspeco/eslint-config-ts。 。 。 .

许可证

麻省理工学院