|
2 | 2 |
|
3 | 3 | <h1 align="center" alt="title">ESLint React</h1>
|
4 | 4 |
|
5 |
| -[](https://npmjs.com/package/@eslint-react/eslint-plugin) |
6 |
| -[](https://bundlephobia.com/package/@eslint-react/eslint-plugin) |
7 |
| -[](https://npmjs.com/package/@eslint-react/eslint-plugin) |
8 |
| - |
9 |
| -More than 50 ESLint rules to catch common mistakes and improve your React code. Rewritten from the scratch (mostly). |
10 |
| - |
11 |
| -## Highlights |
12 |
| - |
13 |
| -- Well designed rule behaviors and sensible defaults. |
14 |
| -- Maximum flexibility through minimum configuration options. |
15 |
| -- No auto-fix, Formatting independent, treat your codebase like it's read-only. |
16 |
| - |
17 |
| -## Supported React versions |
18 |
| - |
19 |
| -- 18.2.0 or later |
20 |
| - |
21 |
| -## Supported engines |
22 |
| - |
23 |
| -### Node.js |
24 |
| - |
25 |
| -- 18.18.0 or later |
26 |
| - |
27 |
| -### Bun |
28 |
| - |
29 |
| -- 1.0.15 or later |
30 |
| - |
31 |
| -### Install |
32 |
| - |
33 |
| -```sh |
34 |
| -# npm |
35 |
| -npm install --save-dev @eslint-react/eslint-plugin |
36 |
| -``` |
37 |
| - |
38 |
| -### Setup |
39 |
| - |
40 |
| -Add `@eslint-react` to the plugins section of your `.eslintrc.js` configuration file. |
41 |
| - |
42 |
| -```js |
43 |
| -module.exports = { |
44 |
| - // ... |
45 |
| - parser: "@typescript-eslint/parser", |
46 |
| - extends: ["plugin:@eslint-react/recommended-legacy"], |
47 |
| - plugins: ["@eslint-react"], |
48 |
| - // ... |
49 |
| -}; |
50 |
| -``` |
51 |
| - |
52 |
| -### Linting with type information |
53 |
| - |
54 |
| -> [!NOTE]\ |
55 |
| -> Rules that require type information are not enabled by default. |
56 |
| -> |
57 |
| -> To enable them, you need to set the `project` option in `parserOptions` to the path of your `tsconfig.json` file. |
58 |
| -> |
59 |
| -> Then replace `plugin:@eslint-react/recommended-legacy` with `plugin:@eslint-react/recommended-type-checked-legacy`. |
60 |
| -
|
61 |
| -```js |
62 |
| -module.exports = { |
63 |
| - // ... |
64 |
| - parser: "@typescript-eslint/parser", |
65 |
| - parserOptions: { |
66 |
| - project: "./tsconfig.json", // <-- Point to your project's "tsconfig.json" or create a new one. |
67 |
| - }, |
68 |
| - extends: ["plugin:@eslint-react/recommended-type-checked-legacy"], |
69 |
| - plugins: ["@eslint-react"], |
70 |
| - // ... |
71 |
| -}; |
72 |
| -``` |
73 |
| - |
74 |
| -[Full Installation Guide ↗](https://eslint-react.xyz/docs/installation) |
75 |
| - |
76 |
| -## Presets |
77 |
| - |
78 |
| -### LegacyConfig presets |
79 |
| - |
80 |
| -> [!IMPORTANT]\ |
81 |
| -> These presets are for ESLint `LegacyConfig` (`.eslintrc.*`) only |
82 |
| -
|
83 |
| -- **recommended-legacy** (`plugin:@eslint-react/recommended-legacy`)\ |
84 |
| - Enforce recommended rules designed to catch common mistakes and prevent potential bugs. |
85 |
| -- **recommended-type-checked-legacy** (`plugin:@eslint-react/recommended-type-checked-legacy`)\ |
86 |
| - Same as recommended-legacy but with additional rules that require type information. |
87 |
| -- **debug-legacy** (`plugin:@eslint-react/debug-legacy`)\ |
88 |
| - Enable a series of rules that are useful for debugging purposes only.\ |
89 |
| - (Not recommended unless you know what you are doing) |
90 |
| -- **all-legacy** (`plugin:@eslint-react/all-legacy`)\ |
91 |
| - Enable all rules in this plugin except for debug rules. |
92 |
| -- **off-legacy** (`plugin:@eslint-react/off-legacy`)\ |
93 |
| - Disable all rules in this plugin except for debug rules. |
94 |
| - |
95 |
| -### FlatConfig presets |
96 |
| - |
97 |
| -> [!IMPORTANT]\ |
98 |
| -> These presets are for ESLint `FlatConfig` (`eslint.config.js`) only |
99 |
| -
|
100 |
| -- **recommended**\ |
101 |
| - Enforce recommended rules designed to catch common mistakes and prevent potential bugs. |
102 |
| -- **recommended-type-checked**\ |
103 |
| - Same as recommended but with additional rules that require type information. |
104 |
| -- **debug**\ |
105 |
| - Enable a series of rules that are useful for debugging purposes only.\ |
106 |
| - (Not recommended unless you know what you are doing) |
107 |
| -- **all**\ |
108 |
| - Enable all rules in this plugin except for debug rules. |
109 |
| -- **off**\ |
110 |
| - Disable all rules in this plugin except for debug rules. |
111 |
| - |
112 |
| -[Full Presets List↗](https://eslint-react.xyz/presets/overview) |
113 |
| - |
114 |
| -## Rules |
115 |
| - |
116 |
| -[Rules Overview ↗](https://eslint-react.xyz/rules/overview) |
117 |
| - |
118 |
| -## Philosophy |
119 |
| - |
120 |
| -- **Do what a linter should do** |
121 |
| -- **Focus on code rather than style** |
122 |
| -- **Rules are better than options** |
123 |
| - |
124 |
| -## Rule introduction or modification principles |
125 |
| - |
126 |
| -1. **No Auto-fix**. Auto-fix is a great feature, but it's not always safe and reliable. We prefer to not to do auto-fix at all than to implement it in a way that can cause more problems than it solves. |
127 |
| -2. **Formatting independent**. Rules should check for correctness, not style. We recommend using style focused tools for formatting (e.g. [dprint](https://dprint.dev/)). |
128 |
| -3. **Sensible defaults**. Rules should be easy to setup and use with minimal configuration and sensible defaults. |
129 |
| -4. **Rules over options [[1]](https://eslint-react.xyz/docs/rules-over-options)**. Each rule should have a single purpose. Make multiple rules work together to achieve more complex behaviors instead of adding options to a single rule. |
130 |
| - |
131 |
| -## License |
132 |
| - |
133 |
| -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
134 |
| - |
135 |
| -## Inspiration |
136 |
| - |
137 |
| -- [eslint-plugin-perfectionist](https://github.com/azat-io/eslint-plugin-perfectionist) |
138 |
| -- [eslint-plugin-solid](https://github.com/solidjs-community/eslint-plugin-solid) |
139 |
| -- [eslint-plugin-functional](https://github.com/eslint-functional/eslint-plugin-functional) |
140 |
| -- [eslint-plugin-filenames-simple](https://github.com/epaew/eslint-plugin-filenames-simple) |
141 |
| -- [@tanstack/eslint-plugin-query](https://github.com/TanStack/query/tree/main/packages/eslint-plugin-query) |
142 |
| -- [rome/tools](https://github.com/rome/tools) |
143 |
| -- [rust-clippy](https://github.com/rust-lang/rust-clippy) |
144 |
| - |
145 |
| -## Prior art |
146 |
| - |
147 |
| -- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) |
148 |
| -- [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks) |
| 5 | +The main ESLint plugin of ESLint React. Contains all the rules and presets of ESLint React. |
0 commit comments