eslint-config-jc 4.1.0 → 4.2.0

package/index.js

@@ -8,5 +8,10 @@ module.exports = {
     "./rules/import.js",
     "./rules/react.js",
     "./rules/jsx.js",
+    // Not included by default:
+    // "./rules/typescript-typecheck.js",
+    // "./rules/node.js",
+    // "./rules/react-class-comps.js",
+    // "./rules/react-prop-types.js",
   ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-jc",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Josh-Cena's personal coding style",
   "main": "index.js",
   "repository": {
@@ -27,8 +27,11 @@
     "./base": "./rules/base.js",
     "./regex": "./rules/regex.js",
     "./import": "./rules/import.js",
+    "./node": "./rules/node.js",
     "./jsx": "./rules/jsx.js",
     "./react": "./rules/react.js",
+    "./react-class-comps": "./rules/react-class-comps.js",
+    "./react-prop-types": "./rules/react-prop-types.js",
     "./typescript": "./rules/typescript.js",
     "./typescript-typecheck": "./rules/typescript-typecheck.js"
   },

package/rules/jsx.js

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ["jsx-a11y"],
+  plugins: ["jsx-a11y", "react"],
   rules: {
     // JSX a11y rules are taken from airbnb, not adjusted yet
     "jsx-a11y/alt-text": [
@@ -13,7 +13,22 @@ module.exports = {
       },
     ],
 
-    "jsx-a11y/anchor-has-content": ["error", { components: [] }],
+    "jsx-a11y/anchor-ambiguous-text": [
+      "warn",
+      {
+        // Default
+        words: ["click here", "here", "link", "a link", "learn more"],
+      },
+    ],
+
+    "jsx-a11y/anchor-has-content": [
+      "error",
+      {
+        aspects: ["noHref", "invalidHref", "preferButton"],
+        components: ["Link"],
+        specialLink: ["to"],
+      },
+    ],
 
     "jsx-a11y/anchor-is-valid": [
       "error",
@@ -34,12 +49,7 @@ module.exports = {
 
     "jsx-a11y/aria-unsupported-elements": "error",
 
-    "jsx-a11y/autocomplete-valid": [
-      "off",
-      {
-        inputComponents: [],
-      },
-    ],
+    "jsx-a11y/autocomplete-valid": ["off", { inputComponents: [] }],
 
     "jsx-a11y/click-events-have-key-events": "error",
 
@@ -73,7 +83,7 @@ module.exports = {
       },
     ],
 
-    "jsx-a11y/heading-has-content": ["error", { components: [""] }],
+    "jsx-a11y/heading-has-content": ["error", { components: [] }],
 
     "jsx-a11y/html-has-lang": "error",
 
@@ -81,7 +91,20 @@ module.exports = {
 
     "jsx-a11y/img-redundant-alt": "error",
 
-    "jsx-a11y/interactive-supports-focus": "error",
+    "jsx-a11y/interactive-supports-focus": [
+      "error",
+      {
+        tabbable: [
+          "button",
+          "checkbox",
+          "link",
+          "searchbox",
+          "spinbutton",
+          "switch",
+          "textbox",
+        ],
+      },
+    ],
 
     "jsx-a11y/label-has-associated-control": [
       "error",
@@ -105,24 +128,38 @@ module.exports = {
       },
     ],
 
-    "jsx-a11y/mouse-events-have-key-events": "error",
+    "jsx-a11y/mouse-events-have-key-events": [
+      "error",
+      {
+        hoverInHandlers: [
+          "onMouseOver",
+          "onMouseEnter",
+          "onPointerOver",
+          "onPointerEnter",
+        ],
+        hoverOutHandlers: [
+          "onMouseOut",
+          "onMouseLeave",
+          "onPointerOut",
+          "onPointerLeave",
+        ],
+      },
+    ],
 
     "jsx-a11y/no-access-key": "error",
 
-    "jsx-a11y/no-autofocus": ["error", { ignoreNonDOM: true }],
+    "jsx-a11y/no-aria-hidden-on-focusable": "error",
+
+    "jsx-a11y/no-autofocus": ["error", { ignoreNonDOM: false }],
 
     "jsx-a11y/no-distracting-elements": [
       "error",
-      {
-        elements: ["marquee", "blink"],
-      },
+      { elements: ["marquee", "blink"] },
     ],
 
     "jsx-a11y/no-interactive-element-to-noninteractive-role": [
       "error",
-      {
-        tr: ["none", "presentation"],
-      },
+      { tr: ["none", "presentation"] },
     ],
 
     "jsx-a11y/no-noninteractive-element-interactions": [
@@ -169,6 +206,7 @@ module.exports = {
     "jsx-a11y/no-noninteractive-tabindex": [
       "error",
       {
+        allowExpressionValues: true,
         roles: ["tabpanel"],
         tags: [],
       },
@@ -176,11 +214,17 @@ module.exports = {
 
     "jsx-a11y/no-onchange": "off",
 
-    "jsx-a11y/no-redundant-roles": "error",
+    "jsx-a11y/no-redundant-roles": [
+      "error",
+      {
+        nav: ["navigation"],
+      },
+    ],
 
     "jsx-a11y/no-static-element-interactions": [
       "error",
       {
+        allowExpressionValues: true,
         handlers: [
           "onClick",
           "onMouseDown",
@@ -192,6 +236,8 @@ module.exports = {
       },
     ],
 
+    "jsx-a11y/prefer-tag-over-role": "error",
+
     "jsx-a11y/role-has-required-aria-props": "error",
 
     "jsx-a11y/role-supports-aria-props": "error",
@@ -200,29 +246,69 @@ module.exports = {
 
     "jsx-a11y/tabindex-no-positive": "error",
 
+    "react/button-has-type": [
+      "error",
+      {
+        button: true,
+        reset: false, // MDN: This behavior tends to annoy users
+        submit: true,
+      },
+    ],
+
+    "react/iframe-missing-sandbox": "error",
+
     "react/jsx-boolean-value": ["error", "never"],
 
-    "react/jsx-curly-brace-presence": "error",
+    "react/jsx-child-element-spacing": "warn",
+
+    // Formatting
+    "react/jsx-closing-bracket-location": "off",
+
+    // Formatting
+    "react/jsx-closing-tag-location": "off",
+
+    "react/jsx-curly-brace-presence": [
+      "error",
+      // Maybe one day we can use propElementValues: "never"...
+      { children: "never", propElementValues: "ignore", props: "never" },
+    ],
+
+    // Formatting
+    "react/jsx-curly-newline": "off",
+
+    // Formatting
+    "react/jsx-curly-spacing": "off",
 
-    // Js, jsx, tsx are all acceptable
+    // Formatting
+    "react/jsx-equals-spacing": "off",
+
+    // .js, .jsx, .tsx are all acceptable
     "react/jsx-filename-extension": "off",
 
-    "react/jsx-fragments": "error",
+    // Formatting
+    "react/jsx-first-prop-new-line": "off",
 
+    // Too stylistic
     "react/jsx-handler-names": "off",
 
-    // Airbnb says there can be false positives
-    "react/jsx-key": "error",
+    // Formatting
+    "react/jsx-indent": "off",
+
+    // Formatting
+    "react/jsx-indent-props": "off",
 
+    // Too stylistic
     "react/jsx-max-depth": "off",
 
-    "react/jsx-no-bind": ["warn", { ignoreDOMComponents: true }],
+    // Formatting
+    "react/jsx-max-props-per-line": "off",
 
-    "react/jsx-no-comment-textnodes": "error",
+    // Formatting
+    "react/jsx-newline": "off",
 
-    "react/jsx-no-constructed-context-values": "error",
+    "react/jsx-no-comment-textnodes": "error",
 
-    "react/jsx-no-duplicate-props": "error",
+    "react/jsx-no-duplicate-props": ["error", { ignoreCase: false }],
 
     // We'll use strict-boolean-expressions instead
     "react/jsx-no-leaked-render": "off",
@@ -231,23 +317,69 @@ module.exports = {
 
     "react/jsx-no-script-url": "error",
 
-    "react/jsx-no-target-blank": "error",
+    "react/jsx-no-target-blank": [
+      "error",
+      {
+        allowReferrer: false,
+        enforceDynamicLinks: "always",
+        forms: true,
+        links: true,
+        warnOnSpreadAttributes: true,
+      },
+    ],
 
     // Also checked by TypeScript
-    "react/jsx-no-undef": "error",
+    "react/jsx-no-undef": ["error", { allowGlobals: true }],
 
     "react/jsx-no-useless-fragment": ["error", { allowExpressions: true }],
 
-    "react/jsx-pascal-case": ["error", { allowAllCaps: true }],
+    // Formatting
+    "react/jsx-one-expression-per-line": "off",
 
-    "react/jsx-props-no-spreading": "off",
+    "react/jsx-pascal-case": [
+      "error",
+      {
+        allowAllCaps: true,
+        allowLeadingUnderscore: false,
+        allowNamespace: true,
+      },
+    ],
 
-    "react/jsx-sort-default-props": "off",
+    // Formatting
+    "react/jsx-props-no-multi-spaces": "off",
 
-    "react/jsx-sort-props": "off",
+    // We like spreading
+    "react/jsx-props-no-spreading": "off",
 
-    "react/jsx-uses-react": "warn",
+    "react/jsx-sort-props": 0,
+
+    // Formatting
+    "react/jsx-tag-spacing": "off",
 
     "react/jsx-uses-vars": "warn",
+
+    // Formatting
+    "react/jsx-wrap-multilines": "off",
+
+    // Too stylistic
+    "react/no-adjacent-inline-elements": "off",
+
+    "react/no-children-prop": ["error", { allowFunctions: false }],
+
+    "react/no-invalid-html-attribute": "error",
+
+    // The original text allows for things like spellchecking and searching
+    "react/no-unescaped-entities": "off",
+
+    "react/no-unknown-property": [
+      "error",
+      {
+        // TODO: not released: requireDataLowercase: true,
+      },
+    ],
+
+    "react/self-closing-comp": ["error", { component: true, html: true }],
+
+    "react/void-dom-elements-no-children": "error",
   },
 };

package/rules/node.js

@@ -0,0 +1,84 @@
+module.exports = {
+  plugins: ["n"],
+  rules: {
+    // Callback-related
+    "n/callback-return": "off",
+
+    "n/exports-style": ["error", "module.exports", { allowBatchAssign: false }],
+
+    // Checked by TypeScript
+    "n/file-extension-in-import": "off",
+
+    // On-demand loading is useful
+    "n/global-require": "off",
+
+    // Callback-related
+    "n/handle-callback-err": "off",
+
+    // Callback-related
+    "n/no-callback-literal": "off",
+
+    "n/no-deprecated-api": "error",
+
+    "n/no-exports-assign": "error",
+
+    // Shadowed by import/no-extraneous-dependencies
+    "n/no-extraneous-import": "off",
+
+    // Shadowed by import/no-extraneous-dependencies
+    "n/no-extraneous-require": "off",
+
+    // Checked by TypeScript
+    "n/no-missing-import": "off",
+
+    // Checked by TypeScript
+    "n/no-missing-require": "off",
+
+    // Not helpful
+    "n/no-mixed-requires": "off",
+
+    "n/no-new-require": "error",
+
+    "n/no-path-concat": "warn",
+
+    "n/no-process-env": "off",
+
+    // Useful in theory, but too noisy
+    "n/no-process-exit": "off",
+
+    "n/no-restricted-import": "off",
+
+    "n/no-restricted-require": "off",
+
+    "n/no-sync": ["warn", { allowAtRootLevel: false }],
+
+    "n/no-unpublished-bin": "error",
+
+    "n/no-unpublished-import": "off",
+
+    "n/no-unpublished-require": "off",
+
+    "n/prefer-global/buffer": ["error", "always"],
+
+    "n/prefer-global/console": ["error", "always"],
+
+    "n/prefer-global/process": ["error", "always"],
+
+    "n/prefer-global/text-decoder": ["error", "always"],
+
+    "n/prefer-global/text-encoder": ["error", "always"],
+
+    "n/prefer-global/url": ["error", "always"],
+
+    "n/prefer-global/url-search-params": ["error", "always"],
+
+    "n/prefer-promises/dns": "error",
+
+    "n/prefer-promises/fs": "error",
+
+    "n/process-exit-as-throw": "warn",
+
+    // Errors on TypeScript bin
+    "n/shebang": "off",
+  },
+};

package/rules/react-class-comps.js

@@ -0,0 +1,41 @@
+module.exports = {
+  rules: {
+    "react/no-access-state-in-setstate": "error",
+
+    "react/no-arrow-function-lifecycle": "error",
+
+    "react/no-did-mount-set-state": "error",
+
+    "react/no-did-update-set-state": "error",
+
+    "react/no-direct-mutation-state": "error",
+
+    "react/no-redundant-should-component-update": "error",
+
+    // ???
+    "react/no-set-state": "off",
+
+    "react/no-unsafe": "error",
+
+    "react/no-unused-class-component-methods": "error",
+
+    "react/no-unused-state": "error",
+
+    "react/no-will-update-set-state": "error",
+
+    "react/prefer-es6-class": "error",
+
+    "react/prefer-stateless-function": "error",
+
+    // We mostly use function components, and this optimization is not critical
+    "react/require-optimization": "off",
+
+    "react/require-render-return": "error",
+
+    "react/sort-comp": 0,
+
+    "react/state-in-constructor": ["error", "never"],
+
+    "react/static-property-placement": ["error", "static public field"],
+  },
+};

package/rules/react-prop-types.js

@@ -0,0 +1,21 @@
+module.exports = {
+  rules: {
+    "react/default-props-match-prop-types": "off",
+
+    "react/forbid-foreign-prop-types": "off",
+
+    "react/forbid-prop-types": "off",
+
+    "react/no-unused-prop-types": "off",
+
+    "react/prefer-exact-props": "off",
+
+    "react/prop-types": "off",
+
+    "react/require-default-props": "off",
+
+    "react/sort-default-props": "off",
+
+    "react/sort-prop-types": "off",
+  },
+};

package/rules/react.js

@@ -12,29 +12,17 @@ module.exports = {
 
     "react/boolean-prop-naming": "off",
 
-    "react/button-has-type": [
-      "error",
-      {
-        button: true,
-        reset: false, // MDN: This behavior tends to annoy users
-        submit: true,
-      },
-    ],
-
-    // Checked by TypeScript
-    "react/default-props-match-prop-types": "off",
-
     // Sometimes we do need `props` as a whole, e.g. for spreading
     "react/destructuring-assignment": "off",
 
     // Isn't useful
-    "react/display-name": ["off", { ignoreTranspilerName: false }],
+    "react/display-name": "off",
+
+    "react/forbid-component-props": 0,
 
-    // Checked by TypeScript
-    "react/forbid-foreign-prop-types": "error",
+    "react/forbid-dom-props": 0,
 
-    // Checked by TypeScript
-    "react/forbid-prop-types": "off",
+    "react/forbid-elements": 0,
 
     // Note that it false-positives for `const Foo: Comp = () => <></>`
     "react/function-component-definition": [
@@ -45,23 +33,40 @@ module.exports = {
       },
     ],
 
-    // TODO unreleased feature
-    // 'react/hook-use-state': 'warn',
+    "react/hook-use-state": ["error", { allowDestructuredState: true }],
 
-    // 'react/iframe-missing-sandbox': 'error',
+    "react/jsx-fragments": ["error", "syntax"],
 
-    // We don't use class components much.
-    "react/no-access-state-in-setstate": "error",
+    // There can be false positives, such as an array that's not used as a
+    // single child
+    "react/jsx-key": [
+      "error",
+      {
+        checkFragmentShorthand: true,
+        // https://github.com/jsx-eslint/eslint-plugin-react/issues/2830
+        checkKeyMustBeforeSpread: true,
+        warnOnDuplicates: true,
+      },
+    ],
 
-    // Enforced by Prettier
-    "react/no-adjacent-inline-elements": "off",
+    "react/jsx-no-bind": [
+      "warn",
+      {
+        allowArrowFunctions: false,
+        allowBind: false,
+        allowFunctions: false,
+        ignoreDOMComponents: true,
+        ignoreRefs: true,
+      },
+    ],
 
-    // In some cases this is fine (e.g. static websites)
-    "react/no-array-index-key": "error",
+    "react/jsx-no-constructed-context-values": "error",
 
-    "react/no-arrow-function-lifecycle": "error",
+    // We usually use automatic runtime
+    "react/jsx-uses-react": 0,
 
-    "react/no-children-prop": "error",
+    // In some cases this is fine (e.g. static websites)
+    "react/no-array-index-key": "warn",
 
     "react/no-danger": "warn",
 
@@ -69,16 +74,10 @@ module.exports = {
 
     "react/no-deprecated": "error",
 
-    "react/no-did-mount-set-state": "error",
-
-    "react/no-did-update-set-state": "error",
-
-    "react/no-direct-mutation-state": "error",
-
+    // Deprecated API
     "react/no-find-dom-node": "error",
 
-    "react/no-invalid-html-attribute": "error",
-
+    // Deprecated API
     "react/no-is-mounted": "error",
 
     // It's useful for encapsulation.
@@ -86,77 +85,35 @@ module.exports = {
 
     "react/no-namespace": "error",
 
-    "react/no-redundant-should-component-update": "error",
+    "react/no-object-type-as-default-prop": "warn",
 
+    // ReactDOM.render itself is deprecated
     "react/no-render-return-value": "error",
 
-    "react/no-set-state": "off",
-
-    "react/no-string-refs": "error",
+    "react/no-string-refs": ["error", { noTemplateLiterals: true }],
 
     "react/no-this-in-sfc": "error",
 
     "react/no-typos": "error",
 
-    // The original text allows for things like spellchecking and searching
-    "react/no-unescaped-entities": "off",
-
-    "react/no-unknown-property": "error",
-
-    "react/no-unsafe": "error",
-
-    "react/no-unstable-nested-components": ["error", { allowAsProps: true }],
-
-    "react/no-unused-class-component-methods": "error",
-
-    // Checked by TypeScript
-    "react/no-unused-prop-types": "off",
-
-    "react/no-unused-state": "error",
-
-    "react/no-will-update-set-state": "error",
-
-    "react/prefer-es6-class": "error",
-
-    // Checked by TypeScript
-    "react/prefer-exact-props": "off",
+    "react/no-unstable-nested-components": ["warn", { allowAsProps: true }],
 
     "react/prefer-read-only-props": "warn",
 
-    "react/prefer-stateless-function": "error",
-
-    // Checked by TypeScript
-    "react/prop-types": "off",
-
     // Checked by TypeScript; we may also use JSX runtime
     "react/react-in-jsx-scope": "off",
 
-    // Checked by TypeScript
-    "react/require-default-props": "off",
-
-    // We mostly use function components, and this optimization is not critical
-    "react/require-optimization": "off",
-
-    "react/require-render-return": "error",
-
-    "react/self-closing-comp": "error",
-
-    "react/sort-comp": "off",
-
-    "react/sort-prop-types": "off",
-
     "react/state-in-constructor": "error",
 
     "react/static-property-placement": "off",
 
+    // Also checked by TypeScript
     "react/style-prop-object": "error",
-
-    "react/void-dom-elements-no-children": "error",
   },
   settings: {
     react: {
       pragma: "React",
-      version: "17",
+      version: "18",
     },
   },
 };

package/rules/regex.js

@@ -1,9 +1,7 @@
 module.exports = {
   plugins: ["regexp"],
   rules: {
-    // This rule is unactionable because /T{4}/ cannot be changed to /T{0,4}/
-    // even when T matches the empty string.
-    "regexp/confusing-quantifier": "off",
+    "regexp/confusing-quantifier": "error",
 
     "regexp/control-character-escape": "error",