chore: update eslint to fix linting issues (#29988)

* chore: update eslint to fix linting issues

* cleanup

* remove /

* Update packages/gatsby/src/commands/serve.ts

Co-authored-by: Matt Kane <[email protected]>

* update config

* update circle to keep babel-preset-gatsby-package so we can use it in
our babel config

* fix unit tests

* fix snapshot

* fix thigns

* update gatsby-node

Co-authored-by: Matt Kane <[email protected]>

Author: wardpeet

.babelrc.js

@@ -1,13 +1,13 @@
-let ignore = [`**/dist`]
+const ignore = [`**/dist`]
 
 // Jest needs to compile this code, but generally we don't want this copied
 // to output folders
-if (process.env.NODE_ENV !== `test`) {
-  ignore.push(`**/__tests__`)
-}
+// if (process.env.NODE_ENV !== `test`) {
+//   ignore.push(`**/__tests__`)
+// }
 
 module.exports = {
   sourceMaps: true,
-  presets: ["babel-preset-gatsby-package"],
+  presets: [`babel-preset-gatsby-package`],
   ignore,
 }

.circleci/config.yml

@@ -200,7 +200,7 @@ jobs:
       - run:
           name: "remove workspaces from package.json"
           command: |
-            sed -i ':a;N;$!ba;s/,\n\s*"workspaces":\s\[[^]]*]//g' package.json
+            sed -i ':a;N;$!ba;s/,\n\s*"workspaces":\s\[[^]]*]/,"workspaces":\["packages\/babel-preset-gatsby"\]/g' package.json
       - <<: *install_node_modules
       - run: yarn lint:code
       - run: yarn lint:docs

.eslintignore

@@ -26,6 +26,7 @@ packages/gatsby/cache-dir/commonjs/**/*
 packages/gatsby-admin/public
 packages/gatsby/gatsby-admin-public
 packages/gatsby-codemods/transforms
+packages/gatsby-source-graphql/batching
 
 packages/gatsby-source-wordpress/test-site/**
 !packages/gatsby-source-wordpress/test-site/__tests__

.eslintrc.js

@@ -1,23 +1,22 @@
-const TSEslint = require("@typescript-eslint/eslint-plugin")
-
 module.exports = {
-  parser: "babel-eslint",
+  parser: `@babel/eslint-parser`,
   extends: [
-    "google",
-    "eslint:recommended",
-    "plugin:flowtype/recommended",
-    "plugin:react/recommended",
-    "prettier",
-    "prettier/flowtype",
-    "prettier/react",
+    `google`,
+    `eslint:recommended`,
+    `plugin:flowtype/recommended`,
+    `plugin:react/recommended`,
+    `prettier`,
   ],
-  plugins: ["flowtype", "prettier", "react", "filenames"],
+  plugins: [`flowtype`, `prettier`, `react`, `filenames`, `@babel`],
   parserOptions: {
     ecmaVersion: 2016,
-    sourceType: "module",
+    sourceType: `module`,
     ecmaFeatures: {
       jsx: true,
     },
+    babelOptions: {
+      configFile: `./.babelrc.js`,
+    },
   },
   env: {
     browser: true,
@@ -39,43 +38,63 @@ module.exports = {
     __ASSET_PREFIX__: true,
   },
   rules: {
-    "arrow-body-style": [
-      "error",
-      "as-needed",
-      { requireReturnForObjectLiteral: true },
-    ],
-    "no-unused-expressions": [
-      "error",
+    "@babel/no-unused-expressions": [
+      `error`,
       {
         allowTaggedTemplates: true,
       },
     ],
+    "no-unused-expressions": `off`,
+    "@babel/no-invalid-this": `error`,
+    "no-invalid-this": `off`,
+    "arrow-body-style": [
+      `error`,
+      `as-needed`,
+      { requireReturnForObjectLiteral: true },
+    ],
+    "new-cap": `off`,
     "no-unused-vars": [
-      "warn",
+      `warn`,
       {
-        varsIgnorePattern: "^_",
-        argsIgnorePattern: "^_",
+        varsIgnorePattern: `^_`,
+        argsIgnorePattern: `^_`,
         ignoreRestSiblings: true,
       },
     ],
-    "consistent-return": ["error"],
-    "filenames/match-regex": ["error", "^[a-z-\\d\\.]+$", true],
-    "no-console": "off",
-    "no-inner-declarations": "off",
-    "prettier/prettier": "error",
-    quotes: ["error", "backtick"],
-    "react/display-name": "off",
-    "react/jsx-key": "warn",
-    "react/no-unescaped-entities": "off",
-    "react/prop-types": "off",
-    "require-jsdoc": "off",
-    "valid-jsdoc": "off",
+    "consistent-return": [`error`],
+    "filenames/match-regex": [`error`, `^[a-z-\\d\\.]+$`, true],
+    "no-console": `off`,
+    "no-inner-declarations": `off`,
+    "prettier/prettier": `error`,
+    quotes: [`error`, `backtick`],
+    "react/display-name": `off`,
+    "react/jsx-key": `warn`,
+    "react/no-unescaped-entities": `off`,
+    "react/prop-types": `off`,
+    "require-jsdoc": `off`,
+    "valid-jsdoc": `off`,
+    "prefer-promise-reject-errors": `warn`,
+    "no-prototype-builtins": `warn`,
+    "guard-for-in": `warn`,
+    "spaced-comment": [
+      `error`,
+      `always`,
+      { markers: [`/`], exceptions: [`*`, `+`] },
+    ],
+    camelcase: [
+      `error`,
+      {
+        properties: `never`,
+        ignoreDestructuring: true,
+        allow: [`^unstable_`],
+      },
+    ],
   },
   overrides: [
     {
       files: [
-        "packages/**/gatsby-browser.js",
-        "packages/gatsby/cache-dir/**/*",
+        `packages/**/gatsby-browser.js`,
+        `packages/gatsby/cache-dir/**/*`,
       ],
       env: {
         browser: true,
@@ -86,115 +105,115 @@ module.exports = {
       },
     },
     {
-      files: ["**/cypress/integration/**/*", "**/cypress/support/**/*"],
+      files: [`**/cypress/integration/**/*`, `**/cypress/support/**/*`],
       globals: {
         cy: false,
         Cypress: false,
       },
     },
     {
-      files: ["*.ts", "*.tsx"],
-      parser: "@typescript-eslint/parser",
-      plugins: ["@typescript-eslint/eslint-plugin"],
+      files: [`*.ts`, `*.tsx`],
+      parser: `@typescript-eslint/parser`,
+      plugins: [`@typescript-eslint/eslint-plugin`],
+      extends: [`plugin:@typescript-eslint/recommended`],
       rules: {
-        ...TSEslint.configs.recommended.rules,
         // We should absolutely avoid using ts-ignore, but it's not always possible.
         // particular when a dependencies types are incorrect.
         "@typescript-eslint/ban-ts-comment": [
-          "warn",
-          { "ts-ignore": "allow-with-description" }
+          `warn`,
+          { "ts-ignore": `allow-with-description` },
         ],
         // This rule is great. It helps us not throw on types for areas that are
         // easily inferrable. However we have a desire to have all function inputs
         // and outputs declaratively typed. So this let's us ignore the parameters
         // inferrable lint.
         "@typescript-eslint/no-inferrable-types": [
-          "error",
+          `error`,
           { ignoreParameters: true },
         ],
         "@typescript-eslint/ban-types": [
-          "error",
+          `error`,
           {
             extendDefaults: true,
             types: {
               "{}": {
-                fixWith: "Record<string, unknown>",
+                fixWith: `Record<string, unknown>`,
               },
               object: {
-                fixWith: "Record<string, unknown>",
+                fixWith: `Record<string, unknown>`,
               },
             },
           },
         ],
-        "camelcase": "off",
+        camelcase: `off`,
         // TODO: These rules allow a lot of stuff and don't really enforce. If we want to apply our styleguide, we'd need to fix a lot of stuff
         "@typescript-eslint/naming-convention": [
-          "error",
+          `error`,
           {
-            selector: "default",
-            format: ["camelCase"],
+            selector: `default`,
+            format: [`camelCase`],
           },
           {
-            selector: "variable",
-            format: ["camelCase", "UPPER_CASE", "PascalCase"],
-            leadingUnderscore: "allowSingleOrDouble",
-            trailingUnderscore: "allowSingleOrDouble",
+            selector: `variable`,
+            format: [`camelCase`, `UPPER_CASE`, `PascalCase`],
+            leadingUnderscore: `allowSingleOrDouble`,
+            trailingUnderscore: `allowSingleOrDouble`,
           },
           {
-            selector: "function",
-            format: ["camelCase", "PascalCase"],
-            leadingUnderscore: "allow",
+            selector: `function`,
+            format: [`camelCase`, `PascalCase`],
+            leadingUnderscore: `allow`,
           },
           {
-            selector: "parameter",
-            format: ["camelCase", "PascalCase", "snake_case"],
-            leadingUnderscore: "allowSingleOrDouble",
+            selector: `parameter`,
+            format: [`camelCase`, `PascalCase`, `snake_case`],
+            leadingUnderscore: `allowSingleOrDouble`,
           },
           {
-            selector: "enumMember",
-            format: ["camelCase", "UPPER_CASE", "PascalCase"]
+            selector: `enumMember`,
+            format: [`camelCase`, `UPPER_CASE`, `PascalCase`],
           },
           {
-            selector: "typeLike",
-            format: ["PascalCase"],
+            selector: `typeLike`,
+            format: [`PascalCase`],
           },
           {
-            selector: "typeAlias",
-            format: ["camelCase", "PascalCase"]
+            selector: `typeAlias`,
+            format: [`camelCase`, `PascalCase`],
           },
           {
-            selector: "property",
-            format: ["PascalCase", "UPPER_CASE", "camelCase", "snake_case"],
-            leadingUnderscore: "allowSingleOrDouble",
+            selector: `property`,
+            format: [`PascalCase`, `UPPER_CASE`, `camelCase`, `snake_case`],
+            leadingUnderscore: `allowSingleOrDouble`,
           },
           {
-            selector: "objectLiteralProperty",
-            format: ["PascalCase", "UPPER_CASE", "camelCase", "snake_case"],
-            leadingUnderscore: "allowSingleOrDouble",
-            trailingUnderscore: "allowSingleOrDouble",
+            selector: `objectLiteralProperty`,
+            format: [`PascalCase`, `UPPER_CASE`, `camelCase`, `snake_case`],
+            leadingUnderscore: `allowSingleOrDouble`,
+            trailingUnderscore: `allowSingleOrDouble`,
           },
           {
-            selector: "enum",
-            format: ["PascalCase", "UPPER_CASE"]
+            selector: `enum`,
+            format: [`PascalCase`, `UPPER_CASE`],
           },
           {
-            selector: "method",
-            format: ["PascalCase", "camelCase"],
-            leadingUnderscore: "allowSingleOrDouble",
+            selector: `method`,
+            format: [`PascalCase`, `camelCase`],
+            leadingUnderscore: `allowSingleOrDouble`,
           },
           {
-            selector: "interface",
-            format: ["PascalCase"],
-            prefix: ["I"],
+            selector: `interface`,
+            format: [`PascalCase`],
+            prefix: [`I`],
           },
         ],
         // This rule tries to prevent using `require()`. However in node code,
         // there are times where this makes sense. And it specifically is causing
         // problems in our tests where we often want this functionality for module
         // mocking. At this point it's easier to have it off and just encourage
         // using top-level imports via code reviews.
-        "@typescript-eslint/no-var-requires": "off",
-        "@typescript-eslint/no-extra-semi": "off",
+        "@typescript-eslint/no-var-requires": `off`,
+        "@typescript-eslint/no-extra-semi": `off`,
         // This rule ensures that typescript types do not have semicolons
         // at the end of their lines, since our prettier setup is to have no semicolons
         // e.g.,
@@ -203,50 +222,50 @@ module.exports = {
         // +  baz: string
         // }
         "@typescript-eslint/member-delimiter-style": [
-          "error",
+          `error`,
           {
             multiline: {
-              delimiter: "none",
+              delimiter: `none`,
             },
           },
         ],
-        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-empty-function": `off`,
         // This ensures that we always type the return type of functions
         // a high level focus of our TS setup is typing fn inputs and outputs.
-        "@typescript-eslint/explicit-function-return-type": "error",
+        "@typescript-eslint/explicit-function-return-type": `error`,
         // This forces us to use interfaces over types aliases for object definitions.
         // Type is still useful for opaque types
         // e.g.,
         // type UUID = string
         "@typescript-eslint/consistent-type-definitions": [
-          "error",
-          "interface",
+          `error`,
+          `interface`,
         ],
         "@typescript-eslint/no-use-before-define": [
-          "error",
+          `error`,
           { functions: false },
         ],
         // Allows us to write unions like `type Foo = "baz" | "bar"`
         // otherwise eslint will want to switch the strings to backticks,
         // which then crashes the ts compiler
-        quotes: "off",
+        quotes: `off`,
         "@typescript-eslint/quotes": [
           2,
-          "backtick",
+          `backtick`,
           {
             avoidEscape: true,
           },
         ],
         // bump to @typescript-eslint/parser started showing Flow related errors in ts(x) files
         // so disabling them in .ts(x) files
-        "flowtype/no-types-missing-file-annotation": "off",
-        "@typescript-eslint/array-type": ["error", { default: "generic" }],
+        "flowtype/no-types-missing-file-annotation": `off`,
+        "@typescript-eslint/array-type": [`error`, { default: `generic` }],
       },
     },
   ],
   settings: {
     react: {
-      version: "16.9.0",
+      version: `16.9.0`,
     },
   },
 }

deprecated-packages/gatsby-plugin-guess-js/src/gatsby-ssr.js

@@ -41,7 +41,7 @@ exports.onRenderBody = (
       matchedPages.forEach(p => {
         if (p && p.componentChunkName) {
           const fetchKey = `assetsByChunkName[${p.componentChunkName}]`
-          let chunks = _.get(stats, fetchKey)
+          const chunks = _.get(stats, fetchKey)
           componentUrls = [...componentUrls, ...chunks]
         }
       })