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.

apps/site/pages/en/learn/diagnostics/memory/using-gc-traces.md

@@ -248,8 +248,8 @@ Let's modify our script a bit:
 
 ```mjs
 // script-fix.mjs
-import os from 'node:os';
 import fs from 'node:fs/promises';
+import os from 'node:os';
 
 let len = 1_000_000;
 const fileName = `entries-${Date.now()}`;
@@ -366,13 +366,13 @@ You can get GC statistics as [PerformanceEntry][] from the callback in
 
 For example:
 
-```ts
-PerformanceEntry {
-  name: 'gc',
-  entryType: 'gc',
-  startTime: 2820.567669,
-  duration: 1.315709,
-  kind: 1
+```json
+{
+  "name": "gc",
+  "entryType": "gc",
+  "startTime": 2820.567669,
+  "duration": 1.315709,
+  "kind": 1
 }
 ```
 

apps/site/pages/en/learn/getting-started/fetch.md

@@ -133,9 +133,10 @@ try {
 [Streams](https://nodejs.org/docs/v22.14.0/api/stream.html#stream) is a feature in Node.js that allows you to read and write chunks of data.
 
 ```js
-import { stream } from 'undici';
 import { Writable } from 'stream';
 
+import { stream } from 'undici';
+
 async function fetchGitHubRepos() {
   const url = 'https://api.github.com/users/nodejs/repos';
 

apps/site/pages/en/learn/getting-started/security-best-practices.md

@@ -130,7 +130,7 @@ There are some mechanisms to control this behavior by defining a blocklist with
   `.npmignore`.
   Throughout these files, you can specify which files/folders should not be published.
   The [files property][] in `package.json` allows the inverse operation
-  -- allowed list.
+  \-- allowed list.
 - In case of an exposure, make sure to [unpublish the package][].
 
 ### HTTP Request Smuggling (CWE-444)
@@ -180,6 +180,7 @@ of requests.
 
 - The crypto API exposes a function `timingSafeEqual` to compare actual and
   expected sensitive values using a constant-time algorithm.
+
 - For password comparison, you can use the [scrypt][] available also on the
   native crypto module.
 
@@ -275,7 +276,6 @@ Monkey patching refers to the modification of properties in runtime aiming to
 change the existing behavior. Example:
 
 ```js
-// eslint-disable-next-line no-extend-native
 Array.prototype.push = function (item) {
   // overriding the global [].push
 };
@@ -290,7 +290,6 @@ Therefore, the following snippet **will not** override the default behavior of
 `Array.prototype.push`
 
 ```js
-// eslint-disable-next-line no-extend-native
 Array.prototype.push = function (item) {
   // overriding the global [].push
 };

apps/site/pages/en/learn/manipulating-files/nodejs-file-stats.md

@@ -92,7 +92,7 @@ fs.stat('/Users/joe/test.txt', (err, stats) => {
   stats.isFile(); // true
   stats.isDirectory(); // false
   stats.isSymbolicLink(); // false
-  stats.size; // 1024000 //= 1MB
+  console.log(stats.size); // 1024000 //= 1MB
 });
 ```
 
@@ -123,7 +123,7 @@ try {
   stats.isFile(); // true
   stats.isDirectory(); // false
   stats.isSymbolicLink(); // false
-  stats.size; // 1024000 //= 1MB
+  console.log(stats.size); // 1024000 //= 1MB
 } catch (err) {
   console.log(err);
 }

apps/site/pages/en/learn/manipulating-files/reading-files-with-nodejs.md

@@ -91,8 +91,8 @@ In this case, a better option is to read the file content using streams.
 
 ```mjs
 import fs from 'fs';
-import path from 'path';
 import { pipeline } from 'node:stream/promises';
+import path from 'path';
 
 const fileUrl = 'https://www.gutenberg.org/files/2701/2701-0.txt';
 const outputFilePath = path.join(process.cwd(), 'moby.md');