docs: switch util.inherits to class extends (#5677)

Co-authored-by: Mark Wiemer <7833360+mark-wiemer@users.noreply.github.com>
Co-authored-by: Mark Wiemer <markwiemer@outlook.com>

Author: JoshuaKGoldberg

docs/src/content/docs/explainers/third-party-reporters.mdx

@@ -3,55 +3,62 @@ description: Create custom reporters.
 title: Third party reporters
 ---
 
-Mocha 1.3.0 allows you to define custom third-party reporters within your own test suite, or by using npm modules. For example if "lcov-reporter" was published to npm, you would simply add it to your package.json in `devDependencies` and use `--reporter lcov-reporter`.
+Mocha allows you to define custom third-party reporters within your own test suite, or by using npm modules. For example if "lcov-reporter" was published to npm, you would simply add it to your package.json in `devDependencies` and use `--reporter lcov-reporter`.
 
-Here is a minimalistic sample reporter, which you can use by executing: `mocha --reporter my-reporter.js`
+:::note[New in v12.0.0]
+In Mocha 12, the extension logic is switched to modern `class`es instead of `util.inherits`.
+If you're on Mocha 11 or older, use `mocha.util.inherits`. See [v11.mochajs.org](https://v11.mochajs.org/explainers/third-party-reporters/) for details.
+:::
+
+Here is a minimalistic sample reporter for Mocha 12, which you can use by executing: `mocha --reporter my-reporter.js`
 
 ```js
 // my-reporter.js
 import mocha from "mocha";
 
-export default function MyReporter(runner) {
-  mocha.reporters.Base.call(this, runner);
-  let passes = 0;
-  let failures = 0;
+// You can extend other reporters by changing the class you extend:
+// export default class MyReporter extends mocha.reporters.Spec {
+export default class MyReporter extends mocha.reporters.Base {
+  constructor(runner) {
+    super(runner);
 
-  runner.on("pass", function (test) {
-    passes++;
-    console.log("pass: %s", test.fullTitle());
-  });
+    let passes = 0;
+    let failures = 0;
 
-  runner.on("fail", function (test, err) {
-    failures++;
-    console.log("fail: %s -- error: %s", test.fullTitle(), err.message);
-  });
+    runner.on("pass", function (test) {
+      passes++;
+      console.log("pass: %s", test.fullTitle());
+    });
 
-  runner.on("end", function () {
-    console.log("end: %d/%d", passes, passes + failures);
-  });
-}
+    runner.on("fail", function (test, err) {
+      failures++;
+      console.log("fail: %s -- error: %s", test.fullTitle(), err.message);
+    });
 
-// To have this reporter "extend" a built-in reporter uncomment the following line:
-// mocha.utils.inherits(MyReporter, mocha.reporters.Spec);
+    runner.on("end", function () {
+      console.log("end: %d/%d", passes, passes + failures);
+    });
+  }
+}
 ```
 
-For details look at the implementations in [lib/reporters/\*](https://github.com/mochajs/mocha/tree/main/lib/reporters).
+For details, look at the implementations in [lib/reporters/\*](https://github.com/mochajs/mocha/tree/main/lib/reporters).
 
-Another sample implementation can be found at [mocha-examples: third-party-reporter (GitHub)](https://github.com/mochajs/mocha-examples/tree/main/packages/third-party-reporter).
+[mocha-examples: third-party-reporter (GitHub)](https://github.com/mochajs/mocha-examples/tree/main/packages/third-party-reporter) is another sample implementation.
 
 Mocha provides the following events:
 
-- **start**: Execution started
-- **waiting**: Execution of root `Suite` delayed
-- **ready**: Execution of root `Suite` started
-- **end**: Execution complete
-- **suite**: Test suite execution started
-- **suite end**: All tests (and sub-suites) have finished
-- **test**: Test execution started
-- **test end**: Test completed
-- **hook**: Hook execution started
-- **hook end**: Hook complete
-- **pass**: Test passed
-- **fail**: Test failed
-- **pending**: Test pending
-- **retry**: Test failed and retries
+- `start`: Execution started
+- `waiting`: Execution of root `Suite` delayed
+- `ready`: Execution of root `Suite` started
+- `end`: Execution complete
+- `suite`: Test suite execution started
+- `suite end`: All tests (and sub-suites) have finished
+- `test`: Test execution started
+- `test end`: Test completed
+- `hook`: Hook execution started
+- `hook end`: Hook complete
+- `pass`: Test passed
+- `fail`: Test failed
+- `pending`: Test pending
+- `retry`: Test failed and retries