Skip to content

Commit 2a11a65

Browse files
AndreaPontrandolfoAndreaPontrandolfo
authored
Merge branch 'master' into ensure-matching-remove-event-listener
2 parents 486380c + c56cc56 commit 2a11a65

28 files changed

+2131
-367
lines changed

‎CHANGELOG.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,47 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
55

66
## Unreleased
77

8+
### Added
9+
* support new config system ([#3429][] @jjangga0214)
10+
* [`hook-use-state`]: add `allowDestructuredState` option ([#3449][] @ljharb)
11+
* add [`sort-default-props`] and deprecate [`jsx-sort-default-props`] ([#1861][] @alexzherdev)
12+
13+
[#3449]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3449
14+
[#3424]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3429
15+
[#1861]: https://github.com/jsx-eslint/eslint-plugin-react/pull/1861
16+
17+
### Fixed
18+
* [`no-unknown-property`]: allow `allowFullScreen` on `iframe` ([#3455][] @almeidx)
19+
20+
[7.31.10]: https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.31.9...v7.31.10
21+
[#3455]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3455
22+
23+
## [7.31.9] - 2022.10.09
24+
825
### Fixed
926
* [`no-unknown-property`]: add `dialog` attributes ([#3436][] @ljharb)
1027
* [`no-arrow-function-lifecycle`]: when converting from an arrow, remove the semi and wrapping parens ([#3337][] @ljharb)
11-
28+
* [`jsx-key`]: Ignore elements inside `React.Children.toArray()` ([#1591][] @silvenon)
29+
* [`jsx-no-constructed-context-values`]: fix false positive for usage in non-components ([#3448][] @golopot)
30+
* [`static-property-placement`]: warn on nonstatic expected-statics ([#2581][] @ljharb)
31+
* [`no-unknown-property`]: properly tag-restrict case-insensitive attributes (@ljharb)
32+
* [`no-unknown-property`]: allow `webkitDirectory` on `input`, case-insensitive ([#3454][] @ljharb)
33+
34+
### Changed
35+
* [Docs] [`no-unknown-property`]: fix typo in link ([#3445][] @denkristoffer)
36+
* [Perf] component detection: improve performance by optimizing getId ([#3451][] @golopot)
37+
* [Docs] [`no-unstable-nested-components`]: Warn about memoized, nested components ([#3444][] @eps1lon)
38+
39+
[7.31.9]: https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.31.8...v7.31.9
40+
[#3454]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3454
41+
[#3451]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3451
42+
[#3448]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3448
43+
[#3445]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3445
44+
[#3444]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3444
1245
[#3436]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3436
1346
[#3337]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3337
47+
[#2581]: https://github.com/jsx-eslint/eslint-plugin-react/issues/2581
48+
[#1591]: https://github.com/jsx-eslint/eslint-plugin-react/pull/1591
1449

1550
## [7.31.8] - 2022.09.08
1651

@@ -3998,6 +4033,7 @@ If you're still not using React 15 you can keep the old behavior by setting the
39984033
[`require-render-return`]: docs/rules/require-render-return.md
39994034
[`self-closing-comp`]: docs/rules/self-closing-comp.md
40004035
[`sort-comp`]: docs/rules/sort-comp.md
4036+
[`sort-default-props`]: docs/rules/sort-default-props.md
40014037
[`sort-prop-types`]: docs/rules/sort-prop-types.md
40024038
[`state-in-constructor`]: docs/rules/state-in-constructor.md
40034039
[`static-property-placement`]: docs/rules/static-property-placement.md

‎README.md

Lines changed: 173 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ React specific linting rules for `eslint`
1515
npm install eslint eslint-plugin-react --save-dev
1616
```
1717

18-
It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.
18+
It is also possible to install ESLint globally rather than locally (using `npm install -g eslint`). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.
1919

20-
## Configuration
20+
## Configuration (legacy: `.eslintrc*`)
2121

2222
Use [our preset](#recommended) to get reasonable defaults:
2323

@@ -109,6 +109,174 @@ Enable the rules that you would like to use.
109109
}
110110
```
111111

112+
### Shareable configs
113+
114+
#### Recommended
115+
116+
This plugin exports a `recommended` configuration that enforces React good practices.
117+
118+
To enable this configuration use the `extends` property in your `.eslintrc` config file:
119+
120+
```json
121+
{
122+
"extends": ["eslint:recommended", "plugin:react/recommended"]
123+
}
124+
```
125+
126+
See [`eslint` documentation](https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files) for more information about extending configuration files.
127+
128+
#### All
129+
130+
This plugin also exports an `all` configuration that includes every available rule.
131+
This pairs well with the `eslint:all` rule.
132+
133+
```json
134+
{
135+
"plugins": [
136+
"react"
137+
],
138+
"extends": ["eslint:all", "plugin:react/all"]
139+
}
140+
```
141+
142+
**Note**: These configurations will import `eslint-plugin-react` and enable JSX in [parser options](https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options).
143+
144+
## Configuration (new: `eslint.config.js`)
145+
146+
From [`v8.21.0`](https://github.com/eslint/eslint/releases/tag/v8.21.0), eslint announced a new config system.
147+
In the new system, `.eslintrc*` is no longer used. `eslint.config.js` would be the default config file name.
148+
In eslint `v8`, the legacy system (`.eslintrc*`) would still be supported, while in eslint `v9`, only the new system would be supported.
149+
150+
And from [`v8.23.0`](https://github.com/eslint/eslint/releases/tag/v8.23.0), eslint CLI starts to look up `eslint.config.js`.
151+
**So, if your eslint is `>=8.23.0`, you're 100% ready to use the new config system.**
152+
153+
You might want to check out the official blog posts,
154+
155+
- <https://eslint.org/blog/2022/08/new-config-system-part-1/>
156+
- <https://eslint.org/blog/2022/08/new-config-system-part-2/>
157+
- <https://eslint.org/blog/2022/08/new-config-system-part-3/>
158+
159+
and the [official docs](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new).
160+
161+
### Plugin
162+
163+
The default export of `eslint-plugin-react` is a plugin object.
164+
165+
```js
166+
const react = require('eslint-plugin-react');
167+
const globals = require('globals');
168+
169+
module.exports = [
170+
…
171+
{
172+
files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
173+
plugins: {
174+
react,
175+
},
176+
languageOptions: {
177+
parserOptions: {
178+
ecmaFeatures: {
179+
jsx: true,
180+
},
181+
},
182+
globals: {
183+
...globals.browser,
184+
},
185+
},
186+
rules: {
187+
// ... any rules you want
188+
'react/jsx-uses-react': 'error',
189+
'react/jsx-uses-vars': 'error',
190+
},
191+
// ... others are omitted for brevity
192+
},
193+
…
194+
];
195+
```
196+
197+
### Configuring shared settings
198+
199+
Refer to the [official docs](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuring-shared-settings).
200+
201+
The schema of the `settings.react` object would be identical to that of what's already described above in the legacy config section.
202+
203+
<!-- markdownlint-disable-next-line no-duplicate-heading -->
204+
### Shareable configs
205+
206+
There're also 3 shareable configs.
207+
208+
- `eslint-plugin-react/configs/all`
209+
- `eslint-plugin-react/configs/recommended`
210+
- `eslint-plugin-react/configs/jsx-runtime`
211+
212+
If your eslint.config.js is ESM, include the `.js` extension (e.g. `eslint-plugin-react/recommended.js`). Note that the next semver-major will require omitting the extension for these imports.
213+
214+
**Note**: These configurations will import `eslint-plugin-react` and enable JSX in [`languageOptions.parserOptions`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects).
215+
216+
In the new config system, `plugin:` protocol(e.g. `plugin:react/recommended`) is no longer valid.
217+
As eslint does not automatically import the preset config (shareable config), you explicitly do it by yourself.
218+
219+
```js
220+
const reactRecommended = require('eslint-plugin-react/configs/recommended');
221+
222+
module.exports = [
223+
…
224+
reactRecommended, // This is not a plugin object, but a shareable config object
225+
…
226+
];
227+
```
228+
229+
You can of course add/override some properties.
230+
231+
**Note**: Our shareable configs does not preconfigure `files` or [`languageOptions.globals`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects).
232+
For most of the cases, you probably want to configure some properties by yourself.
233+
234+
```js
235+
const reactRecommended = require('eslint-plugin-react/configs/recommended');
236+
const globals = require('globals');
237+
238+
module.exports = [
239+
…
240+
{
241+
files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
242+
...reactRecommended,
243+
languageOptions: {
244+
...reactRecommended.languageOptions,
245+
globals: {
246+
...globals.serviceworker,
247+
...globals.browser;
248+
},
249+
},
250+
},
251+
…
252+
];
253+
```
254+
255+
The above example is same as the example below, as the new config system is based on chaining.
256+
257+
```js
258+
const reactRecommended = require('eslint-plugin-react/configs/recommended');
259+
const globals = require('globals');
260+
261+
module.exports = [
262+
…
263+
{
264+
files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
265+
...reactRecommended,
266+
},
267+
{
268+
files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
269+
languageOptions: {
270+
globals: {
271+
...globals.serviceworker,
272+
...globals.browser,
273+
},
274+
},
275+
},
276+
…
277+
];
278+
```
279+
112280
## List of supported rules
113281

114282
✔: Enabled in the [`recommended`](#recommended) configuration.\
@@ -172,6 +340,7 @@ Enable the rules that you would like to use.
172340
| ✔ | | | [react/require-render-return](docs/rules/require-render-return.md) | Enforce ES5 or ES6 class for returning value in render function |
173341
| | 🔧 | | [react/self-closing-comp](docs/rules/self-closing-comp.md) | Disallow extra closing tags for components without children |
174342
| | | | [react/sort-comp](docs/rules/sort-comp.md) | Enforce component methods order |
343+
| | | | [react/sort-default-props](docs/rules/sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting |
175344
| | | | [react/sort-prop-types](docs/rules/sort-prop-types.md) | Enforce propTypes declarations alphabetical sorting |
176345
| | | | [react/state-in-constructor](docs/rules/state-in-constructor.md) | Enforce class component state initialization style |
177346
| | | | [react/static-property-placement](docs/rules/static-property-placement.md) | Enforces where React component static properties should be positioned. |
@@ -216,7 +385,7 @@ Enable the rules that you would like to use.
216385
| | | | [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md) | Enforce PascalCase for user-defined JSX components |
217386
| | 🔧 | | [react/jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md) | Disallow multiple spaces between inline JSX props |
218387
| | | | [react/jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md) | Disallow JSX prop spreading |
219-
| | | | [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting |
388+
| | | | [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting. ❌ This rule is deprecated. |
220389
| | 🔧 | | [react/jsx-sort-props](docs/rules/jsx-sort-props.md) | Enforce props alphabetical sorting |
221390
| | 🔧 | | [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md) | Enforce spacing before closing bracket in JSX. ❌ This rule is deprecated. |
222391
| | 🔧 | | [react/jsx-tag-spacing](docs/rules/jsx-tag-spacing.md) | Enforce whitespace in and around the JSX opening and closing brackets |
@@ -225,44 +394,12 @@ Enable the rules that you would like to use.
225394
| | 🔧 | | [react/jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md) | Disallow missing parentheses around multiline JSX |
226395
<!-- AUTO-GENERATED-CONTENT:END -->
227396

228-
### Other useful plugins
397+
## Other useful plugins
229398

230399
- Rules of Hooks: [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks)
231400
- JSX accessibility: [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y)
232401
- React Native: [eslint-plugin-react-native](https://github.com/Intellicode/eslint-plugin-react-native)
233402

234-
## Shareable configurations
235-
236-
### Recommended
237-
238-
This plugin exports a `recommended` configuration that enforces React good practices.
239-
240-
To enable this configuration use the `extends` property in your `.eslintrc` config file:
241-
242-
```json
243-
{
244-
"extends": ["eslint:recommended", "plugin:react/recommended"]
245-
}
246-
```
247-
248-
See [`eslint` documentation](https://eslint.org/docs/user-guide/configuring/configuration-files#extending-configuration-files) for more information about extending configuration files.
249-
250-
### All
251-
252-
This plugin also exports an `all` configuration that includes every available rule.
253-
This pairs well with the `eslint:all` rule.
254-
255-
```json
256-
{
257-
"plugins": [
258-
"react"
259-
],
260-
"extends": ["eslint:all", "plugin:react/all"]
261-
}
262-
```
263-
264-
**Note**: These configurations will import `eslint-plugin-react` and enable JSX in [parser options](https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options).
265-
266403
## License
267404

268405
`eslint-plugin-react` is licensed under the [MIT License](https://opensource.org/licenses/mit-license.php).

0 commit comments

Comments
 (0)