Migrate ESLint to use flat config (Fixes mozilla#13770) (mozilla#14338)

.pre-commit-config.yaml

@@ -89,7 +89,7 @@ repos:
           - "[email protected]"
           - "[email protected]"
   - repo: https://github.com/eslint/eslint
-    rev: v8.56.0
+    rev: v8.57.0
     hooks:
       - id: eslint
         additional_dependencies:

Dockerfile

@@ -41,7 +41,7 @@ COPY package.json package-lock.json ./
 RUN npm ci --verbose
 
 # copy supporting files and media
-COPY .eslintrc.js .eslintignore .stylelintrc .prettierrc.json .prettierignore webpack.config.js webpack.static.config.js ./
+COPY eslint.config.js .stylelintrc .prettierrc.json .prettierignore webpack.config.js webpack.static.config.js ./
 COPY ./media ./media
 COPY ./tests/unit ./tests/unit
 COPY ./glean ./glean

docs/coding.rst

@@ -174,10 +174,10 @@ you want to write modern syntax but still support older browsers.
     concious of performance.
 
 For pages that are served to Firefox browsers only, such as ``/whatsnew``, it is
-also possible to write native ES2015+ syntax and serve that directly in production.
+also possible to write native modern JS syntax and serve that directly in production.
 Here there is no need to include the ``.es6.js`` file extension. Instead, you can
-simply use ``.js`` instead. The rules that which files you can do this in are defined
-in our `ESLint config <https://github.com/mozilla/bedrock/blob/main/.eslintrc.js>`_.
+simply use ``.js``. The rules that define which files can do this can be
+found in our `ESLint config <https://github.com/mozilla/bedrock/blob/main/eslint.config.js>`_.
 
 Writing URL Patterns
 --------------------

eslint.config.js

@@ -0,0 +1,168 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+'use strict';
+
+const js = require('@eslint/js');
+const globals = require('globals');
+const eslintConfigPrettier = require('eslint-config-prettier');
+
+const baseRules = {
+    // Require strict mode directive in top level functions
+    // https://eslint.org/docs/rules/strict
+    strict: ['error', 'function'],
+
+    // Use type-safe equality operators
+    // https://eslint.org/docs/rules/eqeqeq
+    eqeqeq: ['error', 'always'],
+
+    // Treat var statements as if they were block scoped
+    // https://eslint.org/docs/rules/block-scoped-var
+    'block-scoped-var': 'error',
+
+    // Disallow Use of alert, confirm, prompt
+    // https://eslint.org/docs/rules/no-alert
+    'no-alert': 'error',
+
+    // Disallow eval()
+    // https://eslint.org/docs/rules/no-eval
+    'no-eval': 'error',
+
+    // Disallow empty functions
+    // https://eslint.org/docs/rules/no-empty-function
+    'no-empty-function': 'error',
+
+    // Require radix parameter
+    // https://eslint.org/docs/rules/radix
+    radix: 'error',
+
+    // Disallow the use of `console`
+    // https://eslint.org/docs/rules/no-console
+    'no-console': 'error'
+};
+
+const extendedRules = {
+    // Require `let` or `const` instead of `var`
+    // https://eslint.org/docs/rules/no-var
+    'no-var': 'error',
+
+    // Require `const` declarations for variables that are never reassigned after declared
+    // https://eslint.org/docs/rules/prefer-const
+    'prefer-const': 'error'
+};
+
+const nodeRules = {
+    // Require strict mode directive in global scope
+    // https://eslint.org/docs/rules/strict
+    strict: ['error', 'global']
+};
+
+const customGlobals = {
+    Mozilla: true,
+    site: true
+};
+
+const testingGlobals = {
+    sinon: true
+};
+
+module.exports = [
+    js.configs.recommended,
+    eslintConfigPrettier,
+    {
+        ignores: [
+            'media/js/libs/**/*.js',
+            'media/js/ie/libs/**/*.js',
+            'tests/unit/dist/**/*.js',
+            'contentful_migrations/**/*.cjs',
+            'docs/_build/**/*.js'
+        ]
+    },
+    {
+        files: ['media/js/**/*.js'],
+        languageOptions: {
+            sourceType: 'script',
+            globals: {
+                ...customGlobals,
+                ...globals.browser,
+                ...globals.commonjs
+            }
+        },
+        rules: baseRules
+    },
+    {
+        files: ['media/js/**/*.es6.js'],
+        languageOptions: {
+            ecmaVersion: 2017,
+            sourceType: 'module',
+            globals: {
+                ...customGlobals,
+                ...globals.browser,
+                ...globals.commonjs
+            }
+        },
+        rules: {
+            ...baseRules,
+            ...extendedRules
+        }
+    },
+    {
+        // JS files where we support native modern JS.
+        files: [
+            'media/js/firefox/welcome/**/*.js',
+            'media/js/firefox/whatsnew/**/*.js',
+            'media/js/firefox/firstrun/**/*.js'
+        ],
+        languageOptions: {
+            ecmaVersion: 'latest',
+            globals: customGlobals
+        },
+        rules: {
+            ...baseRules,
+            ...extendedRules
+        }
+    },
+    {
+        // JS Jasmine test files.
+        files: ['tests/unit/**/*.js'],
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            globals: {
+                ...customGlobals,
+                ...testingGlobals,
+                ...globals.browser,
+                ...globals.jasmine
+            }
+        },
+        rules: {
+            ...baseRules,
+            ...extendedRules
+        }
+    },
+    {
+        // JS build files for local dev.
+        files: [
+            'eslint.config.js',
+            'webpack.config.js',
+            'webpack.static.config.js',
+            'webpack.test.config.js'
+        ],
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'script',
+            globals: {
+                ...globals.node,
+                ...globals.commonjs
+            }
+        },
+        rules: {
+            ...baseRules,
+            ...extendedRules,
+            ...nodeRules
+        }
+    }
+];

media/js/firefox/welcome/welcome14.js

@@ -12,8 +12,8 @@
     copyButton.addEventListener('click', copyCouponCode);
 
     async function copyCouponCode() {
-        let couponCode = copyButton.dataset.code;
-        let successMsg = copyButton.dataset.success;
+        const couponCode = copyButton.dataset.code;
+        const successMsg = copyButton.dataset.success;
 
         try {
             await navigator.clipboard.writeText(couponCode);

media/js/firefox/welcome/welcome16.js

@@ -12,8 +12,8 @@
     copyButton.addEventListener('click', copyCouponCode);
 
     async function copyCouponCode() {
-        let couponCode = copyButton.dataset.code;
-        let successMsg = copyButton.dataset.success;
+        const couponCode = copyButton.dataset.code;
+        const successMsg = copyButton.dataset.success;
 
         try {
             await navigator.clipboard.writeText(couponCode);