eslint-react

<p align="center"><img src="https://yellow-cdn.veclightyear.com/835a84d5/da4b4740-211f-49a4-bcff-6045dbbfa9e7.svg" alt="logo" width="150" /></p> <h1 align="center" alt="title">ESLint React</h1>

一系列为使用React作为UI运行时的库和框架重写的可组合ESLint规则。

特点

适用于使用React作为UI运行时的库和框架的通用规则。
精心设计的规则行为和合理的默认设置。
通过最少的规则选项实现最大的灵活性。

公共包

一体化插件

@eslint-react/eslint-plugin - 主要的ESLint插件包，包含本仓库中的所有规则和配置预设。

单独插件（将在2.0版本提供）

eslint-plugin-react-x - 核心规则（与渲染器无关，兼容跨平台）。
eslint-plugin-react-dom - 专用于React DOM的规则。
eslint-plugin-react-hooks-extra - 额外的React Hooks规则。
eslint-plugin-react-naming-convention - 命名约定规则。

谁在使用？

<details> <summary>点击展开内容</summary>

AndreaPontrandolfo/sheriff - 一个全面且有主见的TypeScript优先的ESLint配置。
antfu/eslint-config - Anthony的ESLint配置预设。
christopher-buss/roblox-ts-eslint-config - iSentinel的Roblox-TS ESLint配置预设。
DimensionDev/Maskbook - 通向新的、开放互联网的门户。（[I:b]）
dream-num/univer - Univer是Google Sheets、Slides和Docs的开源替代品。
electric-sql/pglite - 轻量级Postgres打包为WASM，集成到TypeScript库中，适用于浏览器、Node.js、Bun和Deno。
ensdomains/ensdomains-landing - ENS主页V2，ENS协议的主要主页。
hairyf/overlastic - 一个通用的覆盖层工具，支持react、vue、vanilla和svelte。
hipstersmoothie/react-window-splitter - 一个功能齐全的React窗口分割器。
johannschopplich/unlazy - 利用原生浏览器API的通用懒加载库，用于占位图像。
npmgraph/npmgraph - 一个用于探索NPM模块和依赖关系的工具。
react-navigation/react-navigation - React Native应用的路由和导航。
RebeccaStevens/eslint-config-rebeccastevens - RebeccaStevens的ESLint配置预设。
RSSNext/follow - 🧡 下一代信息浏览器。
satya164/PocketGear - 一个简洁干净的Pokémon GO图鉴应用。
SukkaW/eslint-config-sukka - Sukka的ESLint配置。
SukkaW/foxact - 正确实现的React Hooks/Utils。适用于浏览器、SSR和React服务器组件。
TanStack/form - 🤖 强大且类型安全的Web表单状态管理。适用于TS/JS、React Form、Solid Form、Lit Form和Vue Form。
TanStack/query - 🤖 强大的异步状态管理、服务器状态工具和Web数据获取。适用于TS/JS、React Query、Solid Query、Svelte Query和Vue Query。
TanStack/router - 🤖 完全类型安全的React（及其他框架）路由器，具有内置缓存、一流的搜索参数API、客户端缓存集成和同构渲染。
TanStack/store - 🤖 框架无关、类型安全的存储，带有响应式框架适配器。

</details>

数据来自GitHub依赖网络，如有任何不匹配或过时的信息，欢迎提出issue或提交pull request。

在GitHub依赖中查看更多。

安装

# npm
npm install --save-dev @eslint-react/eslint-plugin

设置

平面配置

将插件添加到你的eslint.config.js中：

// @ts-check

import js from "@eslint/js";
import react from "@eslint-react/eslint-plugin";
import * as tsParser from "@typescript-eslint/parser";

export default [
  js.configs.recommended,
  {
    files: ["**/*.{ts,tsx}"],
    ...react.configs.recommended,
    languageOptions: {
      parser: tsParser,
    },
  },
];

传统配置

将插件添加到你的.eslintrc.json中：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@eslint-react/eslint-plugin"],
  "extends": ["eslint:recommended"],
  "overrides": [
    {
      "files": ["**/*.{ts,tsx}"],
      "extends": [
        "plugin:@eslint-react/recommended-legacy"
      ]
    }
  ]
}

完整安装指南 ↗

预设

平面配置

core
启用与渲染器无关的规则。
recommended
启用ESLint React推荐的规则。
此预设包含core预设。
recommended-type-checked
启用ESLint React推荐的规则，并额外启用需要类型信息的规则。
此预设包含recommended预设。
dom
启用特定于React DOM的规则。
disable-dom
禁用特定于React DOM的规则。
disable-type-checked
禁用需要类型信息的规则。
off
禁用此插件中的所有规则，除了调试规则。

传统配置

<details> <summary>点击展开内容</summary> - **core-legacy**\ 启用与渲染器无关的规则。 - **recommended-legacy**\ 启用 ESLint React 推荐的规则。\ _此预设包含 `core-legacy` 预设。_ - **recommended-type-checked-legacy**\ 启用 ESLint React 推荐的规则，并额外包含需要类型信息的规则。\ _此预设包含 `recommended-legacy` 预设。_ - **dom-legacy**\ 启用特定于 React DOM 的规则。 - **disable-dom-legacy**\ 禁用特定于 React DOM 的规则。 - **disable-type-checked-legacy**\ 禁用需要类型信息的规则。 - **off-legacy**\ 禁用此插件中除调试规则外的所有规则。 </details>

完整预设列表↗

规则

规则概览 ↗

常见问题

常见问题解答 ↗

路线图

贡献

在开始处理某个问题之前，最好先检查是否已存在相关issue。同时，建议联系维护者确认这是否合适或是否有人已经在处理。

请务必在提交拉取请求之前阅读贡献指南。

感谢所有为ESLint React做出贡献的人！

贡献统计

<a href="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats?repo_id=680315614" target="_blank" style="display: block" align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=680315614&image_size=auto&color_scheme=dark" width="655" height="auto"> <img alt="Rel1cx/eslint-react 过去28天的性能统计" src="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=680315614&image_size=auto&color_scheme=light" width="655" height="auto"> </picture> </a>

活跃贡献者

<a href="https://next.ossinsight.io/widgets/official/compose-recent-active-contributors?limit=30&repo_id=680315614" target="_blank" style="display: block" align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?limit=30&repo_id=680315614&image_size=auto&color_scheme=dark" width="655" height="auto"> <img alt="Rel1cx/eslint-react 过去28天的活跃贡献者" src="https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?limit=30&repo_id=680315614&image_size=auto&color_scheme=light" width="655" height="auto"> </picture> </a>

所有贡献者

<a href="https://next.ossinsight.io/widgets/official/compose-contributors?repo_id=680315614&limit=50" target="_blank" style="display: block" align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-contributors/thumbnail.png?repo_id=680315614&limit=50&image_size=auto&color_scheme=dark" width="655" height="auto"> <img alt="Rel1cx/eslint-react 的贡献者" src="https://next.ossinsight.io/widgets/official/compose-contributors/thumbnail.png?repo_id=680315614&limit=50&image_size=auto&color_scheme=light" width="655" height="auto"> </picture> </a>