chore(deps): update formatting & linting (#32626)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: LekoArts <lekoarts@gmail.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

deprecated-packages/gatsby-image/README.md

@@ -400,7 +400,7 @@ While you could achieve a similar effect with plain CSS media queries, `gatsby-i
 | `fluid`                | `object` / `array`  | Data returned from the `fluid` query. When prop is an array it has to be combined with `media` keys, allows for art directing `fluid` images. |
 | `fadeIn`               | `bool`              | Defaults to fading in the image on load                                                                                                       |
 | `durationFadeIn`       | `number`            | fading duration is set up to 500ms by default                                                                                                 |
-| `title`                | `string`            | Passed to the `img` element                                                                                                                   |  |
+| `title`                | `string`            | Passed to the `img` element                                                                                                                   |
 | `alt`                  | `string`            | Passed to the `img` element. Defaults to an empty string `alt=""`                                                                             |
 | `crossOrigin`          | `string`            | Passed to the `img` element                                                                                                                   |
 | `className`            | `string` / `object` | Passed to the wrapper element. Object is needed to support Glamor's css prop                                                                  |

docs/docs/conceptual/gatsby-for-ecommerce.md

@@ -44,13 +44,11 @@ E-commerce tends to have a number of specific requirements. When building a Gats
 
 <Announcement style={{ marginBottom: "1.5rem" }}>
 
-
 Check out our [e-commerce demo](https://shopify-demo.gatsbyjs.com/) built with our Shopify Starter, a proof of concept showcasing 10,000 products and 30,000 SKUs (variants).
 Clone our Shopify Starter, host it on Gatsby and connect it to your own Shopify data to develop your own proof of concept in as little as an hour.
 
 </Announcement>
 
-
 - [What is Headless Commerce?](https://www.bigcommerce.com/articles/headless-commerce/#unlocking-flexibility-examples-of-headless-commerce-in-action), an overview from BigCommerce.
 - [Gatsby Shopify Starter](https://shopify-demo.gatsbyjs.com/)
 - Sell Things Fast With Gatsby and Shopify by Trevor Harmon [blog post](https://thetrevorharmon.com/blog/sell-things-fast-with-gatsby-and-shopify), [video](https://www.youtube.com/watch?v=tUtuGAFOjYI&t=16m59s) and [GitHub repo](https://github.com/thetrevorharmon/sell-things-fast/)

docs/docs/conceptual/graphql-concepts.md

@@ -257,7 +257,7 @@ export const markdownFrontmatterFragment = graphql`
 They can then be used in any GraphQL query after that!
 
 ```graphql
-query($path: String!) {
+query ($path: String!) {
   markdownRemark(frontmatter: { path: { eq: $path } }) {
     ...MarkdownFrontmatter
   }

docs/docs/how-to/adding-common-features/adding-search.md

@@ -10,7 +10,7 @@ There are three required components for adding search to your Gatsby website: th
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Search index**  | The search index is a copy of your data stored in a search-friendly format. An index is for optimizing speed and performance when executing a search query. Without an index, every search would need to scan every page in your site—which quickly becomes inefficient. |
 | **Search engine** | The search engine indexes your content, takes a search query, runs it through the index, and returns any matching documents. Search engines can be hosted services (like Algolia) or open-source that you can self-host (like Elastic)                                   |
-| **Search UI**     | A UI component on your site that allows users to write search queries and view the results of each query. Some search providers provide out of the box React components that you can drop into Gatsby sites.                                                             |  |
+| **Search UI**     | A UI component on your site that allows users to write search queries and view the results of each query. Some search providers provide out of the box React components that you can drop into Gatsby sites.                                                             |
 
 ## Adding search to your site
 

docs/docs/how-to/images-and-media/importing-assets-into-files.md

@@ -129,7 +129,7 @@ Hi, this is a great article.
 In an article template component file, you can then query for the attachments:
 
 ```graphql
-query($slug: String!) {
+query ($slug: String!) {
   markdownRemark(fields: { slug: { eq: $slug } }) {
     html
     frontmatter {

docs/docs/reference/config-files/gatsby-config.md

@@ -214,7 +214,7 @@ You may need to install the appropriate file transformer (in this case [YAML](/p
 Gatsby then uses this mapping when creating the GraphQL schema to enable you to query data from both sources:
 
 ```graphql
-query($slug: String!) {
+query ($slug: String!) {
   markdownRemark(fields: { slug: { eq: $slug } }) {
     html
     fields {

docs/docs/sourcing-from-builder-io.md

@@ -48,7 +48,7 @@ For example to get the entries from your models `myHeader`, `myFooter`:
 Or you can query by urlPath for your page models:
 
 ```graphql
-query($path: String!) {
+query ($path: String!) {
   allBuilderModels {
     myPageModel(
       target: { urlPath: $path }

examples/using-remark/src/pages/2018-01-27---custom-components/index.md

@@ -108,7 +108,7 @@ In order to display this component within a Markdown file, you'll need to add a
     })
 
     export const renderAst = (ast: any): JSX.Element => {
-      return (processor.stringify(ast) as unknown) as JSX.Element
+      return processor.stringify(ast) as unknown as JSX.Element
     }
     ```
 

package.json

@@ -36,11 +36,11 @@
     "danger": "^10.6.4",
     "date-fns": "^1.30.1",
     "dictionary-en": "^3.1.0",
-    "eslint": "^7.28.0",
+    "eslint": "^7.32.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-flowtype": "^5.7.2",
+    "eslint-plugin-flowtype": "^5.9.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
@@ -64,7 +64,7 @@
     "npm-packlist": "^2.1.5",
     "npm-run-all": "4.1.5",
     "plop": "^1.9.1",
-    "prettier": "2.1.2",
+    "prettier": "2.3.2",
     "remark": "^13.0.0",
     "remark-cli": "^9.0.0",
     "remark-frontmatter": "^3.0.0",

packages/babel-plugin-remove-graphql-queries/src/index.ts

@@ -138,8 +138,10 @@ function getTagImport(tag: NodePath<Identifier>): NodePath | null {
     path.isVariableDeclarator() &&
     (path.get(`init`) as NodePath).isCallExpression() &&
     (path.get(`init.callee`) as NodePath).isIdentifier({ name: `require` }) &&
-    ((path.get(`init`) as NodePath<CallExpression>).node
-      .arguments[0] as StringLiteral).value === `gatsby`
+    (
+      (path.get(`init`) as NodePath<CallExpression>).node
+        .arguments[0] as StringLiteral
+    ).value === `gatsby`
   ) {
     const id = path.get(`id`) as NodePath
     if (id.isObjectPattern()) {
@@ -294,9 +296,8 @@ export default function ({ types: t }): PluginObj {
                 )
               )
               // Add import
-              const importDefaultSpecifier = t.importDefaultSpecifier(
-                identifier
-              )
+              const importDefaultSpecifier =
+                t.importDefaultSpecifier(identifier)
               const importDeclaration = t.importDeclaration(
                 [importDefaultSpecifier],
                 t.stringLiteral(
@@ -337,9 +338,9 @@ export default function ({ types: t }): PluginObj {
               // cannot remove all 'gatsby' imports.
               if (path2.node.callee.type !== `MemberExpression`) {
                 // Remove imports to useStaticQuery
-                const importPath = (path2.scope.getBinding(
-                  `useStaticQuery`
-                ) as Binding).path
+                const importPath = (
+                  path2.scope.getBinding(`useStaticQuery`) as Binding
+                ).path
                 const parent = importPath.parentPath
                 if (importPath.isImportSpecifier())
                   if (
@@ -356,9 +357,8 @@ export default function ({ types: t }): PluginObj {
               )
 
               // Add import
-              const importDefaultSpecifier = t.importDefaultSpecifier(
-                identifier
-              )
+              const importDefaultSpecifier =
+                t.importDefaultSpecifier(identifier)
               const importDeclaration = t.importDeclaration(
                 [importDefaultSpecifier],
                 t.stringLiteral(

packages/babel-preset-gatsby/src/optimize-hook-destructuring.ts

@@ -6,7 +6,8 @@ import { Program } from "@babel/types"
 const isHook = /^use[A-Z]/
 
 // matches only built-in hooks provided by React et al
-const isBuiltInHook = /^use(Callback|Context|DebugValue|Effect|ImperativeHandle|LayoutEffect|Memo|Reducer|Ref|State)$/
+const isBuiltInHook =
+  /^use(Callback|Context|DebugValue|Effect|ImperativeHandle|LayoutEffect|Memo|Reducer|Ref|State)$/
 
 interface IState {
   opts?: {

packages/gatsby-admin/src/pages/plugins.tsx

@@ -107,9 +107,8 @@ export default function PluginView(
     },
   })
 
-  const { fetching: fetchingNpmData, data: npmData } = useNpmPackageData(
-    pluginName
-  )
+  const { fetching: fetchingNpmData, data: npmData } =
+    useNpmPackageData(pluginName)
 
   const [{ fetching: updatingGatsbyPlugin }, updateGatsbyPlugin] = useMutation(`
     mutation updateGatsbyPlugin(
@@ -147,10 +146,8 @@ export default function PluginView(
     }
   `)
 
-  const [
-    { fetching: installingGatsbyPlugin },
-    installGatsbyPlugin,
-  ] = useMutation(`
+  const [{ fetching: installingGatsbyPlugin }, installGatsbyPlugin] =
+    useMutation(`
     mutation installGatsbyPlugin($name: String!) {
       createNpmPackage(npmPackage: {
         name: $name,

packages/gatsby-cli/src/create-cli.ts

@@ -21,14 +21,14 @@ import { whoami } from "./whoami"
 import { getPackageManager, setPackageManager } from "./util/package-manager"
 import reporter from "./reporter"
 
-const handlerP = (fn: (args: yargs.Arguments) => void) => (
-  args: yargs.Arguments
-): void => {
-  Promise.resolve(fn(args)).then(
-    () => process.exit(0),
-    err => report.panic(err)
-  )
-}
+const handlerP =
+  (fn: (args: yargs.Arguments) => void) =>
+  (args: yargs.Arguments): void => {
+    Promise.resolve(fn(args)).then(
+      () => process.exit(0),
+      err => report.panic(err)
+    )
+  }
 
 function buildLocalCommands(cli: yargs.Argv, isLocalSite: boolean): void {
   const defaultHost = `localhost`

packages/gatsby-cli/src/reporter/__tests__/patch-console.ts

@@ -8,7 +8,7 @@ describe(`patchConsole`, () => {
     info: jest.fn(),
   }
 
-  patchConsole((reporter as unknown) as typeof gatsbyReporter)
+  patchConsole(reporter as unknown as typeof gatsbyReporter)
   ;[`info`, `log`, `warn`].forEach(method => {
     describe(method, () => {
       beforeEach(reporter[method].mockReset)

packages/gatsby-cli/src/reporter/loggers/ink/components/utils.tsx

@@ -1,11 +1,11 @@
 import React, { FunctionComponent } from "react"
 import { Text, TextProps } from "ink"
 
-export const createLabel = (
-  text: string,
-  color: string
-): FunctionComponent<TextProps> => (...props): JSX.Element => (
-  <Text color={color} {...props}>
-    {text}
-  </Text>
-)
+export const createLabel =
+  (text: string, color: string): FunctionComponent<TextProps> =>
+  (...props): JSX.Element =>
+    (
+      <Text color={color} {...props}>
+        {text}
+      </Text>
+    )

packages/gatsby-cli/src/reporter/loggers/ink/context.tsx

@@ -7,20 +7,20 @@ import { IGatsbyState } from "gatsby/src/redux/types"
 // to not use it's own store temporarily.
 // By the time this is actually running, it will become an `IGatsbyState`
 const StoreStateContext = createContext<IGatsbyState>(
-  (getStore().getState() as any) as IGatsbyState
+  getStore().getState() as any as IGatsbyState
 )
 
 export const StoreStateProvider: React.FC = ({
   children,
 }): React.ReactElement => {
   const [state, setState] = useState(
-    (getStore().getState() as any) as IGatsbyState
+    getStore().getState() as any as IGatsbyState
   )
 
   useLayoutEffect(
     () =>
       onLogAction(() => {
-        setState((getStore().getState() as any) as IGatsbyState)
+        setState(getStore().getState() as any as IGatsbyState)
       }),
     []
   )

packages/gatsby-cli/src/reporter/redux/__tests__/integration.ts

@@ -20,11 +20,8 @@ describe(`integration`, () => {
   })
 
   test(`Doesn't dispatch pre-emptive SUCCESS `, async () => {
-    const {
-      createPendingActivity,
-      endActivity,
-      startActivity,
-    } = internalActions
+    const { createPendingActivity, endActivity, startActivity } =
+      internalActions
 
     startActivity({
       id: `activity-1`,

packages/gatsby-cli/src/reporter/redux/actions.ts

@@ -6,16 +6,24 @@ import * as actions from "./internal-actions"
 
 const boundActions = bindActionCreators<typeof actions, any>(
   actions,
-  (dispatch as any) as Dispatch
+  dispatch as any as Dispatch
 )
 
 export const createLog = boundActions.createLog as typeof actions.createLog
-export const createPendingActivity = boundActions.createPendingActivity as typeof actions.createPendingActivity
+export const createPendingActivity =
+  boundActions.createPendingActivity as typeof actions.createPendingActivity
 export const setStatus = boundActions.setStatus as typeof actions.setStatus
-export const startActivity = boundActions.startActivity as typeof actions.startActivity
-export const endActivity = boundActions.endActivity as typeof actions.endActivity
-export const updateActivity = boundActions.updateActivity as typeof actions.updateActivity
-export const setActivityErrored = boundActions.setActivityErrored as typeof actions.setActivityErrored
-export const setActivityStatusText = boundActions.setActivityStatusText as typeof actions.setActivityStatusText
-export const setActivityTotal = boundActions.setActivityTotal as typeof actions.setActivityTotal
-export const activityTick = boundActions.activityTick as typeof actions.activityTick
+export const startActivity =
+  boundActions.startActivity as typeof actions.startActivity
+export const endActivity =
+  boundActions.endActivity as typeof actions.endActivity
+export const updateActivity =
+  boundActions.updateActivity as typeof actions.updateActivity
+export const setActivityErrored =
+  boundActions.setActivityErrored as typeof actions.setActivityErrored
+export const setActivityStatusText =
+  boundActions.setActivityStatusText as typeof actions.setActivityStatusText
+export const setActivityTotal =
+  boundActions.setActivityTotal as typeof actions.setActivityTotal
+export const activityTick =
+  boundActions.activityTick as typeof actions.activityTick

packages/gatsby-cli/src/reporter/redux/diagnostics.ts

@@ -114,7 +114,8 @@ export function createStructuredLoggingDiagnosticsMiddleware(
           // using nextTick here to prevent infinite recursion (report.warn would
           // result in another call of this function and so on)
           process.nextTick(() => {
-            const activitiesDiagnosticsMessage = generateStuckStatusDiagnosticMessage()
+            const activitiesDiagnosticsMessage =
+              generateStuckStatusDiagnosticMessage()
             reporter.warn(
               `This is just diagnostic information (enabled by GATSBY_DIAGNOSTIC_STUCK_STATUS_TIMEOUT):\n\nThere was activity since last diagnostic message. Log action:\n\n${JSON.stringify(
                 action,
@@ -175,7 +176,8 @@ export function createStructuredLoggingDiagnosticsMiddleware(
                 context: {
                   activities: inProgressActivities(),
                   status: store.getState().logs.status,
-                  stuckStatusDiagnosticMessage: generateStuckStatusDiagnosticMessage(),
+                  stuckStatusDiagnosticMessage:
+                    generateStuckStatusDiagnosticMessage(),
                   stuckStatusWatchdogTimeoutDelay,
                 },
               })

packages/gatsby-cli/src/reporter/redux/index.ts

@@ -12,9 +12,8 @@ let store: Store<{ logs: IGatsbyCLIState }> = createStore(
   {}
 )
 
-const diagnosticsMiddleware = createStructuredLoggingDiagnosticsMiddleware(
-  store
-)
+const diagnosticsMiddleware =
+  createStructuredLoggingDiagnosticsMiddleware(store)
 
 export type GatsbyCLIStore = typeof store
 type StoreListener = (store: GatsbyCLIStore) => void