feat(lint): use ESLint for linting snippets (#7720)

Author: avivkeller

apps/site/eslint.config.js

@@ -20,6 +20,7 @@ const compatConfig = compat.config({
 
 export default tseslint.config(
   ...baseConfig,
+  { ignores: ['pages/en/blog/**/*.{md,mdx}/**'] },
   {
     extends: [
       react.configs.flat['jsx-runtime'],
@@ -40,6 +41,7 @@ export default tseslint.config(
   {
     files: ['**/*.{md,mdx}'],
     extends: [mdx.flat],
+    processor: mdx.createRemarkProcessor({ lintCodeBlocks: true }),
     rules: {
       'no-irregular-whitespace': 'off',
       '@next/next/no-img-element': 'off',
@@ -77,5 +79,6 @@ export default tseslint.config(
         },
       ],
     },
-  }
+  },
+  mdx.flatCodeBlocks
 );

apps/site/next.mdx.plugins.mjs

@@ -10,8 +10,6 @@ import rehypeShikiji from './next.mdx.shiki.mjs';
 
 /**
  * Provides all our Rehype Plugins that are used within MDX
- *
- * @type {Array<import('unified').Plugin>}
  */
 export const REHYPE_PLUGINS = [
   // Generates `id` attributes for headings (H1, ...)
@@ -25,8 +23,6 @@ export const REHYPE_PLUGINS = [
 
 /**
  * Provides all our Remark Plugins that are used within MDX
- *
- * @type {Array<import('unified').Plugin>}
  */
 export const REMARK_PLUGINS = [
   // Support GFM syntax to be used within Markdown

apps/site/package.json

@@ -6,12 +6,11 @@
     "check-types": "tsc --noEmit",
     "deploy": "cross-env NEXT_PUBLIC_STATIC_EXPORT=true NODE_NO_WARNINGS=1 next build",
     "dev": "cross-env NODE_NO_WARNINGS=1 next dev",
-    "lint": "turbo run lint:md lint:snippets lint:js lint:css",
+    "lint": "turbo run lint:md lint:js lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
     "lint:fix": "turbo run lint:md lint:js lint:css --no-cache -- --fix",
     "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\"",
     "lint:md": "eslint \"**/*.md?(x)\" --cache --cache-strategy=content --cache-location=.eslintmdcache",
-    "lint:snippets": "node ./scripts/lint-snippets/index.mjs",
     "scripts:release-post": "cross-env NODE_NO_WARNINGS=1 node scripts/release-post/index.mjs",
     "serve": "pnpm dev",
     "start": "cross-env NODE_NO_WARNINGS=1 next start",
@@ -97,7 +96,6 @@
     "remark-lint-no-unused-definitions": "^4.0.2",
     "remark-lint-prohibited-strings": "^4.0.0",
     "remark-lint-unordered-list-marker-style": "^4.0.1",
-    "remark-parse": "11.0.0",
     "remark-preset-lint-node": "5.1.2",
     "stylelint": "16.19.1",
     "stylelint-config-standard": "38.0.0",
@@ -106,7 +104,6 @@
     "tsx": "^4.19.3",
     "typescript": "~5.8.2",
     "typescript-eslint": "~8.31.1",
-    "unified": "^11.0.5",
     "user-agent-data-types": "0.4.2"
   },
   "imports": {

apps/site/pages/en/index.mdx

@@ -96,13 +96,12 @@ layout: home
 
     ```js displayName="Streams Pipeline"
     // streams.mjs
-    import { pipeline } from 'node:stream/promises';
     import { createReadStream, createWriteStream } from 'node:fs';
+    import { pipeline } from 'node:stream/promises';
     import { createGzip } from 'node:zlib';
 
     // ensure you have a `package.json` file for this test!
-    await pipeline
-    (
+    await pipeline(
       createReadStream('package.json'),
       createGzip(),
       createWriteStream('package.json.gz')

apps/site/pages/en/learn/asynchronous-work/asynchronous-flow-control.md

@@ -114,7 +114,6 @@ function getSong() {
   let _song = '';
   let i = 100;
   for (i; i > 0; i -= 1) {
-    /* eslint-disable no-loop-func */
     setTimeout(function () {
       _song += `${i} beers on the wall, you take one down and pass it around, ${
         i - 1
@@ -123,7 +122,6 @@ function getSong() {
         _song += "Hey let's get some more beer";
       }
     }, 0);
-    /* eslint-enable no-loop-func */
   }
 
   return _song;

apps/site/pages/en/learn/asynchronous-work/discover-promises-in-nodejs.md

@@ -31,7 +31,7 @@ The return value of the executor function is ignored: only `resolve` or `reject`
 
 ```js
 const myPromise = new Promise((resolve, reject) => {
-  let success = true;
+  const success = true;
 
   if (success) {
     resolve('Operation was successful!');
@@ -56,7 +56,7 @@ Once a Promise is created, you can handle the outcome by using the `.then()`, `.
 
 ```js
 const myPromise = new Promise((resolve, reject) => {
-  let success = true;
+  const success = true;
 
   if (success) {
     resolve('Operation was successful!');

apps/site/pages/en/learn/asynchronous-work/dont-block-the-event-loop.md

@@ -126,7 +126,7 @@ Example 2: An `O(n)` callback. This callback will run quickly for small `n` and
 
 ```js
 app.get('/countToN', (req, res) => {
-  let n = req.query.n;
+  const n = req.query.n;
 
   // n iterations before giving someone else a turn
   for (let i = 0; i < n; i++) {
@@ -141,7 +141,7 @@ Example 3: An `O(n^2)` callback. This callback will still run quickly for small
 
 ```js
 app.get('/countToN2', (req, res) => {
-  let n = req.query.n;
+  const n = req.query.n;
 
   // n^2 iterations before giving someone else a turn
   for (let i = 0; i < n; i++) {
@@ -193,7 +193,7 @@ Here is an example vulnerable regexp exposing its server to REDOS:
 
 ```js
 app.get('/redos-me', (req, res) => {
-  let filePath = req.query.filePath;
+  const filePath = req.query.filePath;
 
   // REDOS
   if (filePath.match(/(\/.+)+$/)) {
@@ -272,28 +272,30 @@ Example: JSON blocking. We create an object `obj` of size 2^21 and `JSON.stringi
 
 ```js
 let obj = { a: 1 };
-let niter = 20;
+const iterations = 20;
 
-let before, str, pos, res, took;
-
-for (let i = 0; i < niter; i++) {
-  obj = { obj1: obj, obj2: obj }; // Doubles in size each iter
+// Expand the object exponentially by nesting it
+for (let i = 0; i < iterations; i++) {
+  obj = { obj1: obj, obj2: obj };
 }
 
-before = process.hrtime();
-str = JSON.stringify(obj);
-took = process.hrtime(before);
-console.log('JSON.stringify took ' + took);
-
-before = process.hrtime();
-pos = str.indexOf('nomatch');
-took = process.hrtime(before);
-console.log('Pure indexof took ' + took);
-
-before = process.hrtime();
-res = JSON.parse(str);
-took = process.hrtime(before);
-console.log('JSON.parse took ' + took);
+// Measure time to stringify the object
+let start = process.hrtime();
+const jsonString = JSON.stringify(obj);
+let duration = process.hrtime(start);
+console.log('JSON.stringify took', duration);
+
+// Measure time to search a string within the JSON
+start = process.hrtime();
+const index = jsonString.indexOf('nomatch'); // Always -1
+duration = process.hrtime(start);
+console.log('String.indexOf took', duration);
+
+// Measure time to parse the JSON back to an object
+start = process.hrtime();
+const parsed = JSON.parse(jsonString);
+duration = process.hrtime(start);
+console.log('JSON.parse took', duration);
 ```
 
 There are npm modules that offer asynchronous JSON APIs. See for example:
@@ -317,7 +319,7 @@ Example 1: Un-partitioned average, costs `O(n)`
 
 ```js
 for (let i = 0; i < n; i++) sum += i;
-let avg = sum / n;
+const avg = sum / n;
 console.log('avg: ' + avg);
 ```
 
@@ -341,7 +343,7 @@ function asyncAvg(n, avgCB) {
 
   // Start the helper, with CB to call avgCB.
   help(1, function (sum) {
-    let avg = sum / n;
+    const avg = sum / n;
     avgCB(avg);
   });
 }

apps/site/pages/en/learn/asynchronous-work/event-loop-timers-and-nexttick.md

@@ -338,7 +338,7 @@ This philosophy can lead to some potentially problematic situations.
 Take this snippet for example:
 
 ```js
-let bar;
+let bar = null;
 
 // this has an asynchronous signature, but calls callback synchronously
 function someAsyncApiCall(callback) {
@@ -370,7 +370,7 @@ useful for the user to be alerted to an error before the event loop is
 allowed to continue. Here is the previous example using `process.nextTick()`:
 
 ```js
-let bar;
+let bar = null;
 
 function someAsyncApiCall(callback) {
   process.nextTick(callback);

apps/site/pages/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks.md

@@ -79,7 +79,11 @@ XHR requests also accept a callback, in this example by assigning a function to
 const xhr = new XMLHttpRequest();
 xhr.onreadystatechange = () => {
   if (xhr.readyState === 4) {
-    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error');
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error('error');
+    }
   }
 };
 xhr.open('GET', 'https://yoursite.com');

apps/site/pages/en/learn/command-line/how-to-read-environment-variables-from-nodejs.md

@@ -21,8 +21,8 @@ That will pass the user `USER_ID` as **239482** and the `USER_KEY` as **foobar**
 Here is an example that accesses the `USER_ID` and `USER_KEY` environment variables, which we set in above code.
 
 ```js
-process.env.USER_ID; // "239482"
-process.env.USER_KEY; // "foobar"
+console.log(process.env.USER_ID); // "239482"
+console.log(process.env.USER_KEY); // "foobar"
 ```
 
 In the same way you can access any custom environment variable you set.
@@ -39,7 +39,7 @@ PORT=3000
 In your js file
 
 ```js
-process.env.PORT; // "3000"
+console.log(process.env.PORT); // "3000"
 ```
 
 Run `app.js` file with environment variables set in `.env` file.