Widen eslint-config-react-app peer dependency versions (#7790)

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

README.md

@@ -16,6 +16,7 @@ npx create-react-app my-app
 cd my-app
 npm start
 ```
+
 If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that npx always uses the latest version.
 
 _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_

docusaurus/docs/integrating-with-an-api-backend.md

@@ -24,7 +24,6 @@ It allows creating hypermedia and GraphQL APIs in minutes.
 It is shipped with an official Progressive Web App generator as well as a dynamic administration interface, both built for Create React App.
 Check out [this tutorial](https://api-platform.com/docs/distribution).
 
-
 ## C# (ASP.NET Core)
 
 ASP.NET Core has a React project template that uses Create React App. Check out [their documentation](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react).

docusaurus/docs/using-https-in-development.md

@@ -32,7 +32,6 @@ HTTPS=true npm start
 
 Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
 
-
 ## Custom SSL certificate
 
 To set a custom certificate, set the `SSL_CRT_FILE` and `SSL_KEY_FILE` environment variables to the path of the certificate and key files in the same way you do for `HTTPS` above. Note that you will also need to set `HTTPS=true`.
@@ -43,7 +42,6 @@ To set a custom certificate, set the `SSL_CRT_FILE` and `SSL_KEY_FILE` environme
 HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start
 ```
 
-
 To avoid having to set the environment variable each time, you can either include in the `npm start` script like so:
 
 ```json
@@ -54,4 +52,3 @@ To avoid having to set the environment variable each time, you can either includ
 
 Or you can create a `.env` file with `HTTPS=true` set.
 [Learn more about environment variables in CRA](https://create-react-app.dev/docs/adding-custom-environment-variables).
-

packages/cra-template/template/src/serviceWorker.js

@@ -101,7 +101,7 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' }
+    headers: { 'Service-Worker': 'script' },
   })
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.

packages/eslint-config-react-app/README.md

@@ -19,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create
 First, install this package, ESLint and the necessary plugins.
 
 ```sh
-npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@2.x @typescript-eslint/parser@2.x babel-eslint@10.x eslint@6.x eslint-plugin-flowtype@3.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@1.x
+npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@2.x @typescript-eslint/parser@2.x babel-eslint@10.x eslint@6.x eslint-plugin-flowtype@4.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@2.x
 ```
 
 Then create a file named `.eslintrc.json` with following contents in the root folder of your project:

packages/eslint-config-react-app/package.json

@@ -19,11 +19,11 @@
     "@typescript-eslint/parser": "2.x",
     "babel-eslint": "10.x",
     "eslint": "6.x",
-    "eslint-plugin-flowtype": "3.x",
+    "eslint-plugin-flowtype": "3.x || 4.x",
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "1.x"
+    "eslint-plugin-react-hooks": "1.x || 2.x"
   },
   "dependencies": {
     "confusing-browser-globals": "^1.0.9"

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ArrayDestructuring.js

@@ -9,7 +9,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 function load() {
-  return [[1, '1'], [2, '2'], [3, '3'], [4, '4']];
+  return [
+    [1, '1'],
+    [2, '2'],
+    [3, '3'],
+    [4, '4'],
+  ];
 }
 
 export default class extends Component {