chore: migrate ESLint setup to flat configuration

.eleventy.js

@@ -20,9 +20,7 @@ const markdownItAnchor = require("markdown-it-anchor");
 const Image = require("@11ty/eleventy-img");
 const path = require("path");
 const yaml = require("js-yaml");
-const {
-    DateTime
-} = require("luxon");
+const { DateTime } = require("luxon");
 
 //-----------------------------------------------------------------------------
 // Eleventy Config
@@ -50,9 +48,11 @@ module.exports = eleventyConfig => {
         throwOnUndefined: true
     });
 
-    /** ***************************************************************************************
+    /**
+     * ***************************************************************************************
      *  Filters
-     * ***************************************************************************************/
+     * **************************************************************************************
+     */
     eleventyConfig.addFilter("limitTo", (arr, limit) => arr.slice(0, limit));
 
     eleventyConfig.addFilter("jsonify", variable => JSON.stringify(variable));
@@ -133,9 +133,11 @@ module.exports = eleventyConfig => {
 
     eleventyConfig.addFilter("concat", (value1, value2) => value1.concat(value2));
 
-    /** ***************************************************************************************
+    /**
+     * ***************************************************************************************
      *  Plugins
-     * ***************************************************************************************/
+     * **************************************************************************************
+     */
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
     eleventyConfig.addPlugin(readingTime);
     eleventyConfig.addPlugin(syntaxHighlight, {
@@ -163,9 +165,11 @@ module.exports = eleventyConfig => {
     eleventyConfig.addWatchTarget("./src/assets/");
     eleventyConfig.addWatchTarget("./src/content/pages/");
 
-    /** ***************************************************************************************
+    /**
+     * ***************************************************************************************
      *  File PassThroughs
-     * ***************************************************************************************/
+     * **************************************************************************************
+     */
 
     eleventyConfig.addPassthroughCopy({
         "./src/static": "/"
@@ -202,9 +206,11 @@ module.exports = eleventyConfig => {
     });
 
 
-    /** ***************************************************************************************
+    /**
+     * ***************************************************************************************
      *  Collections
-     * ***************************************************************************************/
+     * **************************************************************************************
+     */
 
     eleventyConfig.addCollection(
         "blogposts",
@@ -236,7 +242,7 @@ module.exports = eleventyConfig => {
             formats: ["webp", "jpeg"],
             urlPath: "/assets/images/",
             outputDir: "./_site/assets/images/",
-            filenameFormat: (id, source, width, format) => {
+            filenameFormat(id, source, width, format) {
                 const extension = path.extname(source);
                 const name = path.basename(source, extension);
 
@@ -257,7 +263,7 @@ module.exports = eleventyConfig => {
         const fullSrc = getSRC();
 
         // generate images
-        Image(fullSrc, options); // eslint-disable-line new-cap
+        Image(fullSrc, options); // eslint-disable-line new-cap -- Third-party code
 
         const imageAttributes = {
             alt,

.stylelintrc.js

@@ -1,26 +1,28 @@
+"use strict";
+
 module.exports = {
-  extends: ["stylelint-config-standard-scss"],
-  rules: {
-    "alpha-value-notation": "number",
-    "at-rule-empty-line-before": null,
-    "color-function-notation": "legacy",
-    "color-hex-case": null,
-    "custom-property-empty-line-before": null,
-    "custom-property-pattern": null,
-    "declaration-block-no-duplicate-properties": [true, {
-      "ignore": ["consecutive-duplicates-with-different-values"]
-    }],
-    "declaration-block-no-redundant-longhand-properties": null,
-    "declaration-block-no-shorthand-property-overrides": null,
-    "hue-degree-notation": "number",
-    indentation: 4,
-    "max-line-length": null,
-    "no-descending-specificity": null,
-    "number-leading-zero": null,
-    "number-no-trailing-zeros": null,
-    "property-no-unknown": null,
-    "property-no-vendor-prefix": null,
-    "selector-class-pattern": null,
-    "value-keyword-case": null,
-  },
+    extends: ["stylelint-config-standard-scss"],
+    rules: {
+        "alpha-value-notation": "number",
+        "at-rule-empty-line-before": null,
+        "color-function-notation": "legacy",
+        "color-hex-case": null,
+        "custom-property-empty-line-before": null,
+        "custom-property-pattern": null,
+        "declaration-block-no-duplicate-properties": [true, {
+            ignore: ["consecutive-duplicates-with-different-values"]
+        }],
+        "declaration-block-no-redundant-longhand-properties": null,
+        "declaration-block-no-shorthand-property-overrides": null,
+        "hue-degree-notation": "number",
+        indentation: 4,
+        "max-line-length": null,
+        "no-descending-specificity": null,
+        "number-leading-zero": null,
+        "number-no-trailing-zeros": null,
+        "property-no-unknown": null,
+        "property-no-vendor-prefix": null,
+        "selector-class-pattern": null,
+        "value-keyword-case": null
+    }
 };

eslint.config.js

@@ -0,0 +1,100 @@
+"use strict";
+
+const eslintConfigESLintCJS = require("eslint-config-eslint/cjs");
+const globals = require("globals");
+const reactPlugin = require("eslint-plugin-react");
+const reactRecommended = require("eslint-plugin-react/configs/recommended");
+const jsxA11yPlugin = require("eslint-plugin-jsx-a11y");
+const reactHooksPlugin = require("eslint-plugin-react-hooks");
+
+module.exports = [
+    {
+        ignores: [
+            "_site/**",
+            "src/assets/js/**",
+            "src/_data/**",
+            "src/_11ty/**"
+        ]
+    },
+    ...eslintConfigESLintCJS,
+    {
+        files: ["**/*.js"],
+        rules: {
+
+            // Disable rules that the codebase doesn't currently follow.
+            "jsdoc/require-jsdoc": "off",
+            "jsdoc/require-returns": "off",
+            "jsdoc/require-param-description": "off",
+            "jsdoc/require-param-type": "off",
+            "jsdoc/no-bad-blocks": ["error", {
+                ignore: ["__PURE__"]
+            }],
+            "n/no-extraneous-require": ["error", {
+                allowModules: ["luxon"]
+            }]
+        }
+    },
+    {
+        files: ["tools/**/*.js"],
+        rules: {
+            "no-console": "off",
+            "n/no-process-exit": "off"
+        }
+    },
+    {
+        files: ["src/playground/**/*.{js,jsx}"],
+        plugins: {
+            react: reactPlugin,
+            "jsx-a11y": jsxA11yPlugin,
+            "react-hooks": reactHooksPlugin
+        },
+        settings: {
+            react: {
+                version: "16.8.6"
+            }
+        },
+        languageOptions: {
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true
+                }
+            },
+            sourceType: "module",
+            globals: {
+                ...globals.browser,
+                ...globals.es2021
+            }
+        },
+        rules: {
+            ...reactRecommended.rules,
+            ...jsxA11yPlugin.configs.recommended.rules,
+            "react/jsx-no-useless-fragment": "error",
+            "react/jsx-no-target-blank": "error",
+
+            // Disable rules that the codebase doesn't currently follow.
+            // It might be a good idea to enable these in the future.
+            "jsx-a11y/no-onchange": "off",
+            "react/prop-types": "off",
+            "jsdoc/require-jsdoc": "off",
+            "react-hooks/rules-of-hooks": "error",
+            "react-hooks/exhaustive-deps": "warn",
+
+            // Disable eslint-plugin-node rules from eslint-config-eslint
+            "no-process-exit": "off",
+            "func-style": "off",
+            "n/no-deprecated-api": "off",
+            "n/no-extraneous-require": "off",
+            "n/no-missing-require": "off",
+            "n/no-unpublished-bin": "off",
+            "n/no-unpublished-require": "off",
+            "n/no-unsupported-features/es-builtins": "off",
+            "n/no-unsupported-features/es-syntax": "off",
+            "n/no-unsupported-features/node-builtins": "off",
+            "n/process-exit-as-throw": "off",
+            "n/shebang": "off",
+            "n/no-extraneous-import": "off",
+            "n/no-missing-import": "off",
+            "n/no-unpublished-import": "off"
+        }
+    }
+];