chore(lint): lint all files (#12288)

This change consolidates all lint rules and paths to the root of the
repo, and runs them as part of the `lint` workflow.

.eslintignore

@@ -1,6 +1,4 @@
 node_modules/
-build
-my-app*
-packages/react-scripts/template
-packages/react-scripts/fixtures
-fixtures/
+build/
+test/fixtures/webpack-message-formatting/src/AppBabel.js
+packages/react-error-overlay/lib/

.eslintrc.json

@@ -14,5 +14,39 @@
     "no-console": "off",
     "strict": ["error", "global"],
     "curly": "warn"
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "docusaurus/website/src/**/*.js",
+        "packages/cra-template/**/*.js",
+        "packages/react-error-overlay/**/*.js",
+        "packages/react-scripts/fixtures/kitchensink/template/{src,integration}/**/*.js",
+        "test/fixtures/*/src/*.js"
+      ],
+      "excludedFiles": ["packages/react-error-overlay/*.js"],
+      "extends": ["react-app", "react-app/jest"]
+    },
+    {
+      "files": [
+        "test/fixtures/webpack-message-formatting/src/{AppLintError,AppLintWarning,AppUnknownFile}.js"
+      ],
+      "rules": {
+        "no-unused-vars": "off",
+        "no-undef": "off"
+      }
+    },
+    {
+      "files": ["test/fixtures/webpack-message-formatting/src/Export5.js"],
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    },
+    {
+      "files": ["test/fixtures/issue-5176-flow-class-properties/src/App.js"],
+      "rules": {
+        "no-dupe-class-members": "off"
+      }
+    }
+  ]
 }

.github/workflows/build.yml

@@ -1,6 +1,6 @@
 name: Build
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   build:

.github/workflows/lint.yml

@@ -1,6 +1,6 @@
 name: Lint
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   lint:
@@ -15,5 +15,11 @@ jobs:
         run: npm i -g npm@8
       - name: Install
         run: npm ci --prefer-offline
+      - name: Build
+        run: npm run build
       - name: Alex
         run: npm run alex
+      - name: Prettier
+        run: npm run prettier -- --list-different
+      - name: Eslint
+        run: npm run eslint -- --max-warnings 0

.gitignore

@@ -1,7 +1,7 @@
 .idea/
 .vscode/
 node_modules/
-build
+build/
 .DS_Store
 *.tgz
 my-app*

.prettierignore

@@ -0,0 +1,9 @@
+build/
+package-lock.json
+test/fixtures/webpack-message-formatting/src/AppBabel.js
+test/fixtures/webpack-message-formatting/src/AppCss.css
+packages/react-error-overlay/fixtures/bundle*
+packages/react-error-overlay/fixtures/inline*
+packages/react-error-overlay/fixtures/junk*
+packages/react-error-overlay/lib/
+packages/react-error-overlay/coverage/

docusaurus/docs/adding-typescript.md

@@ -14,7 +14,9 @@ To start a new Create React App project with [TypeScript](https://www.typescript
 ```sh
 npx create-react-app my-app --template typescript
 ```
+
 or
+
 ```sh
 yarn create react-app my-app --template typescript
 ```
@@ -28,7 +30,9 @@ To add [TypeScript](https://www.typescriptlang.org/) to an existing Create React
 ```sh
 npm install --save typescript @types/node @types/react @types/react-dom @types/jest
 ```
+
 or
+
 ```sh
 yarn add typescript @types/node @types/react @types/react-dom @types/jest
 ```

docusaurus/docs/advanced-configuration.md

@@ -15,7 +15,7 @@ You can adjust various development and production settings by setting environmen
 | PORT                      |   ✅ Used   | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | HTTPS                     |   ✅ Used   | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | WDS_SOCKET_HOST           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details.                                                                                                                                                                                                              |
-| WDS_SOCKET_PATH           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/ws` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details.                                                                                                                                                                                                                              |
+| WDS_SOCKET_PATH           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/ws` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details.                                                                                                                                                                                                                                       |
 | WDS_SOCKET_PORT           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details.                                                                                                                                                                                                                          |
 | PUBLIC_URL                |   ✅ Used   |  ✅ Used   | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.                                                                                                                                                                                                                                     |
 | BUILD_PATH                | 🚫 Ignored  |  ✅ Used   | By default, Create React App will output compiled assets to a `/build` directory adjacent to your `/src`. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project.                                                                                                                                                                                                                                                                                                                                                                                          |
@@ -24,7 +24,7 @@ You can adjust various development and production settings by setting environmen
 | CHOKIDAR_USEPOLLING       |   ✅ Used   | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | GENERATE_SOURCEMAP        | 🚫 Ignored  |  ✅ Used   | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | INLINE_RUNTIME_CHUNK      | 🚫 Ignored  |  ✅ Used   | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| IMAGE_INLINE_SIZE_LIMIT   |   ✅ Used   |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to `0` will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| IMAGE_INLINE_SIZE_LIMIT   |   ✅ Used   |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to `0` will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | FAST_REFRESH              |   ✅ Used   | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | TSC_COMPILE_ON_ERROR      |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | ESLINT_NO_DEV_ERRORS      |   ✅ Used   | 🚫 Ignored | When set to `true`, ESLint errors are converted to warnings during development. As a result, ESLint output will no longer appear in the error overlay.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |

docusaurus/docs/loading-graphql-files.md

@@ -57,7 +57,7 @@ You can also use the `gql` template tag the same way you would use the non-macro
 
 ```js
 import { gql } from 'graphql.macro';
- 
+
 const query = gql`
   query User {
     user(id: 5) {

docusaurus/docs/proxying-api-requests-in-development.md

@@ -87,7 +87,7 @@ Next, create `src/setupProxy.js` and place the following contents in it:
 ```js
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
-module.exports = function(app) {
+module.exports = function (app) {
   // ...
 };
 ```
@@ -97,7 +97,7 @@ You can now register proxies as you wish! Here's an example using the above `htt
 ```js
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
-module.exports = function(app) {
+module.exports = function (app) {
   app.use(
     '/api',
     createProxyMiddleware({

docusaurus/website/docusaurus.config.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+'use strict';
 
 const siteConfig = {
   title: 'Create React App',

docusaurus/website/src/css/custom.css

@@ -32,31 +32,30 @@
   max-width: 100%;
 }
 
-
 /* Announcement banner */
 
 :root {
   --docusaurus-announcement-bar-height: auto !important;
 }
 
-div[class^="announcementBar"][role="banner"] {
+div[class^='announcementBar'][role='banner'] {
   border-bottom-color: var(--deepdark);
 }
 
-div[class^="announcementBarContent"] {
+div[class^='announcementBarContent'] {
   line-height: 40px;
   font-size: 20px;
   font-weight: bold;
   padding: 8px 30px;
 }
 
-div[class^="announcementBarContent"] a {
+div[class^='announcementBarContent'] a {
   text-decoration: underline;
   display: inline-block;
   color: var(--ifm-color-primary) !important;
 }
 
-div[class^="announcementBarContent"] a:hover {
+div[class^='announcementBarContent'] a:hover {
   color: var(--brand) !important;
 }
 

docusaurus/website/src/pages/index.js

@@ -68,10 +68,7 @@ function Home() {
           <div className="container">
             <div className="row">
               {features.map(({ title, content }, idx) => (
-                <div
-                  key={idx}
-                  className={clsx('col col--4', styles.feature)}
-                >
+                <div key={idx} className={clsx('col col--4', styles.feature)}>
                   <h2>{title}</h2>
                   <p>{content}</p>
                 </div>

package.json

@@ -18,7 +18,9 @@
     "alex": "alex .",
     "test:integration": "jest test/integration",
     "test": "cd packages/react-scripts && node bin/react-scripts.js test",
-    "format": "prettier --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'"
+    "eslint": "eslint .",
+    "prettier": "prettier .",
+    "format": "npm run prettier -- --write"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.15.1",

packages/babel-plugin-named-asset-import/index.test.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const pluginTester = require('babel-plugin-tester/pure');
 const namedAssetImport = require('./index');
 
@@ -39,8 +41,7 @@ pluginTester.default({
         'import { ReactComponent as logo } from "@svgr/webpack?-svgo!logo.svg";',
     },
     svgMultipleImport: {
-      code:
-        'import logo, { logoUrl , ReactComponent as Logo } from "logo.svg";',
+      code: 'import logo, { logoUrl , ReactComponent as Logo } from "logo.svg";',
       output:
         'import logo from "logo.svg";\n' +
         'import { logoUrl } from "logo.svg";\n' +

packages/react-dev-utils/ModuleScopePlugin.js

@@ -15,7 +15,9 @@ class ModuleScopePlugin {
   constructor(appSrc, allowedFiles = []) {
     this.appSrcs = Array.isArray(appSrc) ? appSrc : [appSrc];
     this.allowedFiles = new Set(allowedFiles);
-    this.allowedPaths = [...allowedFiles].map(path.dirname).filter(p => path.relative(p, process.cwd()) !== '');
+    this.allowedPaths = [...allowedFiles]
+      .map(path.dirname)
+      .filter(p => path.relative(p, process.cwd()) !== '');
   }
 
   apply(resolver) {
@@ -54,9 +56,11 @@ class ModuleScopePlugin {
         if (this.allowedFiles.has(requestFullPath)) {
           return callback();
         }
-        if (this.allowedPaths.some((allowedFile) => {
-          return requestFullPath.startsWith(allowedFile);
-        })) {
+        if (
+          this.allowedPaths.some(allowedFile => {
+            return requestFullPath.startsWith(allowedFile);
+          })
+        ) {
           return callback();
         }
         // Find path from src to the requested file

packages/react-dev-utils/evalSourceMapMiddleware.js

@@ -15,7 +15,7 @@ function base64SourceMap(source) {
 
 function getSourceById(server, id) {
   const module = Array.from(server._stats.compilation.modules).find(
-    (m) => server._stats.compilation.chunkGraph.getModuleId(m) == id,
+    m => server._stats.compilation.chunkGraph.getModuleId(m) == id
   );
   return module.originalSource();
 }

packages/react-dev-utils/getProcessForPort.js

@@ -26,7 +26,11 @@ function isProcessAReactApp(processCommand) {
 }
 
 function getProcessIdOnPort(port) {
-  return execFileSync('lsof', ['-i:' + port, '-P', '-t', '-sTCP:LISTEN'], execOptions)
+  return execFileSync(
+    'lsof',
+    ['-i:' + port, '-P', '-t', '-sTCP:LISTEN'],
+    execOptions
+  )
     .split('\n')[0]
     .trim();
 }