chore: lint code blocks in docs with ESLint (#42113)

docs/tutorial/asar-archives.md

@@ -42,6 +42,7 @@ Read a file in the ASAR archive:
 
 ```js
 const fs = require('node:fs')
+
 fs.readFileSync('/path/to/example.asar/file.txt')
 ```
 
@@ -49,6 +50,7 @@ List all files under the root of the archive:
 
 ```js
 const fs = require('node:fs')
+
 fs.readdirSync('/path/to/example.asar')
 ```
 
@@ -62,6 +64,7 @@ You can also display a web page in an ASAR archive with `BrowserWindow`:
 
 ```js
 const { BrowserWindow } = require('electron')
+
 const win = new BrowserWindow()
 
 win.loadURL('file:///path/to/example.asar/static/index.html')
@@ -91,6 +94,7 @@ content of an ASAR archive as a file. For this purpose you can use the built-in
 
 ```js
 const originalFs = require('original-fs')
+
 originalFs.readFileSync('/path/to/example.asar')
 ```
 
@@ -99,6 +103,7 @@ the `fs` module:
 
 ```js
 const fs = require('node:fs')
+
 process.noAsar = true
 fs.readFileSync('/path/to/example.asar')
 ```

docs/tutorial/automated-testing.md

@@ -95,6 +95,7 @@ or to retrieve other Electron process information:
 ```js @ts-nocheck
 import fs from 'node:fs'
 import path from 'node:path'
+
 import { browser, expect } from '@wdio/globals'
 
 const packageJson = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), { encoding: 'utf-8' }))
@@ -165,6 +166,7 @@ ChromeDriver and where to find the binary of your Electron app:
 
 ```js title='test.js' @ts-expect-error=[1]
 const webdriver = require('selenium-webdriver')
+
 const driver = new webdriver.Builder()
   // The "9515" is the port opened by ChromeDriver.
   .usingServer('http://localhost:9515')
@@ -317,9 +319,10 @@ To create a custom driver, we'll use Node.js' [`child_process`](https://nodejs.o
 The test suite will spawn the Electron process, then establish a simple messaging protocol:
 
 ```js title='testDriver.js' @ts-nocheck
-const childProcess = require('node:child_process')
 const electronPath = require('electron')
 
+const childProcess = require('node:child_process')
+
 // spawn the process
 const env = { /* ... */ }
 const stdio = ['inherit', 'inherit', 'inherit', 'ipc']
@@ -436,8 +439,10 @@ framework of your choosing. The following example uses
 or Mocha would work as well:
 
 ```js title='test.js' @ts-nocheck
-const test = require('ava')
 const electronPath = require('electron')
+
+const test = require('ava')
+
 const { TestDriver } = require('./testDriver')
 
 const app = new TestDriver({

docs/tutorial/custom-title-bar.md

@@ -76,6 +76,7 @@ use the native UI to control the window.
 
 ```js
 const { BrowserWindow } = require('electron')
+
 const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover' })
 ```
 
@@ -89,6 +90,7 @@ by a fixed amount.
 
 ```js title='main.js'
 const { BrowserWindow } = require('electron')
+
 const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })
 ```
 
@@ -98,6 +100,7 @@ constructor.
 
 ```js title='main.js'
 const { BrowserWindow } = require('electron')
+
 const win = new BrowserWindow({
   titleBarStyle: 'hidden',
   trafficLightPosition: { x: 10, y: 10 }
@@ -112,6 +115,7 @@ on the value of its boolean parameter.
 
 ```js title='main.js'
 const { BrowserWindow } = require('electron')
+
 const win = new BrowserWindow()
 // hides the traffic lights
 win.setWindowButtonVisibility(false)
@@ -149,6 +153,7 @@ default to the standard system height:
 
 ```js title='main.js'
 const { BrowserWindow } = require('electron')
+
 const win = new BrowserWindow({
   titleBarStyle: 'hidden',
   titleBarOverlay: {

docs/tutorial/custom-window-interactions.md

@@ -62,6 +62,7 @@ API:
 
 ```js title='main.js'
 const { BrowserWindow } = require('electron')
+
 const win = new BrowserWindow()
 win.setIgnoreMouseEvents(true)
 ```
@@ -75,6 +76,7 @@ allowing events such as `mouseleave` to be emitted:
 
 ```js title='main.js'
 const { BrowserWindow, ipcMain } = require('electron')
+
 const path = require('node:path')
 
 const win = new BrowserWindow({

docs/tutorial/dark-mode.md

@@ -135,6 +135,7 @@ Finally, the `main.js` file represents the main process and contains the actual
 
 ```js
 const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
+
 const path = require('node:path')
 
 const createWindow = () => {

docs/tutorial/devtools-extension.md

@@ -35,15 +35,16 @@ Using the [React Developer Tools][react-devtools] as an example:
 
    ```js
    const { app, session } = require('electron')
-   const path = require('node:path')
+   
    const os = require('node:os')
-
+   const path = require('node:path')
+   
    // on macOS
    const reactDevToolsPath = path.join(
      os.homedir(),
      '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
    )
-
+   
    app.whenReady().then(async () => {
      await session.defaultSession.loadExtension(reactDevToolsPath)
    })

docs/tutorial/esm.md

@@ -85,6 +85,8 @@ The `@babel/plugin-transform-modules-commonjs` plugin will transform
 ESM imports down to `require` calls. The exact syntax will depend on the
 [`importInterop` setting](https://babeljs.io/docs/babel-plugin-transform-modules-commonjs#importinterop).
 
+<!-- eslint-skip -->
+
 ```js @nolint @ts-nocheck title='@babel/plugin-transform-modules-commonjs'
 import foo from "foo";
 import { bar } from "bar";

docs/tutorial/in-app-purchases.md

@@ -37,6 +37,7 @@ Here is an example that shows how to use In-App Purchases in Electron. You'll ha
 ```js
 // Main process
 const { inAppPurchase } = require('electron')
+
 const PRODUCT_IDS = ['id1', 'id2']
 
 // Listen for transactions as soon as possible.

docs/tutorial/ipc.md

@@ -52,6 +52,7 @@ In the main process, set an IPC listener on the `set-title` channel with the `ip
 
 ```js {6-10,22} title='main.js (Main Process)'
 const { app, BrowserWindow, ipcMain } = require('electron')
+
 const path = require('node:path')
 
 // ...
@@ -183,6 +184,7 @@ provided to the renderer process. Please refer to
 
 ```js {6-13,25} title='main.js (Main Process)'
 const { app, BrowserWindow, dialog, ipcMain } = require('electron')
+
 const path = require('node:path')
 
 // ...
@@ -334,6 +336,7 @@ response.
 
 ```js title='main.js (Main Process)'
 const { ipcMain } = require('electron')
+
 ipcMain.on('synchronous-message', (event, arg) => {
   console.log(arg) // prints "ping" in the Node console
   event.returnValue = 'pong'
@@ -378,6 +381,7 @@ target renderer.
 
 ```js {11-26} title='main.js (Main Process)'
 const { app, BrowserWindow, Menu, ipcMain } = require('electron')
+
 const path = require('node:path')
 
 function createWindow () {
@@ -412,6 +416,8 @@ function createWindow () {
 For the purposes of the tutorial, it's important to note that the `click` handler
 sends a message (either `1` or `-1`) to the renderer process through the `update-counter` channel.
 
+<!-- eslint-skip -->
+
 ```js @ts-type={mainWindow:Electron.BrowserWindow}
 click: () => mainWindow.webContents.send('update-counter', -1)
 ```

docs/tutorial/launch-app-from-url-in-another-app.md

@@ -27,6 +27,7 @@ control our application lifecycle and create a native browser window.
 
 ```js
 const { app, BrowserWindow, shell } = require('electron')
+
 const path = require('node:path')
 ```
 

docs/tutorial/message-ports.md

@@ -303,6 +303,7 @@ without having to step through the isolated world.
 
 ```js title='main.js (Main Process)'
 const { BrowserWindow, app, MessageChannelMain } = require('electron')
+
 const path = require('node:path')
 
 app.whenReady().then(async () => {

docs/tutorial/native-code-and-electron-objc-macos.md

@@ -1075,7 +1075,7 @@ NODE_API_MODULE(objc_addon, Init)
 You're so close! We now have working Objective-C and thread-safe ways to expose methods and events to JavaScript. In this final step, let's create a JavaScript wrapper in `js/index.js` to provide a more friendly API:
 
 ```js title='js/index.js' @ts-expect-error=[10]
-const EventEmitter = require('events')
+const EventEmitter = require('node:events')
 
 class ObjcMacosAddon extends EventEmitter {
   constructor () {

docs/tutorial/native-code-and-electron.md

@@ -269,8 +269,10 @@ Let's break down this code:
 
 Now, let's create a JavaScript wrapper to make the addon easier to use. Create `js/index.js`:
 
+<!-- eslint-disable import/newline-after-import,import/order -->
+
 ```js title='js/index.js' @ts-expect-error=[5]
-const EventEmitter = require('events')
+const EventEmitter = require('node:events')
 
 // Load the native addon using the 'bindings' module
 // This will look for the compiled .node file in various places
@@ -362,6 +364,7 @@ To use this addon in an Electron application, you would:
 ```js @ts-expect-error=[2]
 // In your main process
 const myAddon = require('my-native-addon')
+
 console.log(myAddon.helloWorld('Electron'))
 ```
 

docs/tutorial/navigation-history.md

@@ -74,7 +74,6 @@ if (navigationHistory.canGoToOffset(2)) {
 A common flow is that you want to restore the history of a webContents - for instance to implement an "undo close tab" feature. To do so, you can call `navigationHistory.restore({ index, entries })`. This will restore the webContent's navigation history and the webContents location in said history, meaning that `goBack()` and `goForward()` navigate you through the stack as expected.
 
 ```js @ts-type={navigationHistory:Electron.NavigationHistory}
-
 const firstWindow = new BrowserWindow()
 
 // Later, you want a second window to have the same history and navigation position

docs/tutorial/performance.md

@@ -175,6 +175,7 @@ you might write code that eagerly loads dependencies:
 
 ```js title='parser.js' @ts-expect-error=[2]
 const fs = require('node:fs')
+
 const fooParser = require('foo-parser')
 
 class Parser {

docs/tutorial/process-model.md

@@ -242,8 +242,8 @@ These aliases have no impact on runtime, but can be used for typechecking
 and autocomplete.
 
 ```js title="Usage example"
-const { app } = require('electron/main')
 const { shell } = require('electron/common')
+const { app } = require('electron/main')
 ```
 
 [window-mdn]: https://developer.mozilla.org/en-US/docs/Web/API/Window

docs/tutorial/security.md

@@ -281,7 +281,8 @@ security-conscious developers might want to assume the very opposite.
 
 ```js title='main.js (Main Process)'
 const { session } = require('electron')
-const { URL } = require('url')
+
+const { URL } = require('node:url')
 
 session
   .fromPartition('some-partition')
@@ -611,9 +612,10 @@ sometimes be fooled - a `startsWith('https://example.com')` test would let
 `https://example.com.attacker.com` through.
 
 ```js title='main.js (Main Process)'
-const { URL } = require('url')
 const { app } = require('electron')
 
+const { URL } = require('node:url')
+
 app.on('web-contents-created', (event, contents) => {
   contents.on('will-navigate', (event, navigationUrl) => {
     const parsedUrl = new URL(navigationUrl)
@@ -690,12 +692,14 @@ leveraged to execute arbitrary commands.
 ```js title='main.js (Main Process)' @ts-type={USER_CONTROLLED_DATA_HERE:string}
 //  Bad
 const { shell } = require('electron')
+
 shell.openExternal(USER_CONTROLLED_DATA_HERE)
 ```
 
 ```js title='main.js (Main Process)'
 //  Good
 const { shell } = require('electron')
+
 shell.openExternal('https://example.com/index.html')
 ```
 

docs/tutorial/tutorial-3-preload.md

@@ -83,6 +83,7 @@ To attach this script to your renderer process, pass its path to the
 
 ```js {2,8-10} title="main.js"
 const { app, BrowserWindow } = require('electron')
+
 const path = require('node:path')
 
 const createWindow = () => {
@@ -204,6 +205,7 @@ you send out the `invoke` call from the renderer.
 
 ```js {1,15} title="main.js"
 const { app, BrowserWindow, ipcMain } = require('electron/main')
+
 const path = require('node:path')
 
 const createWindow = () => {

docs/tutorial/windows-taskbar.md

@@ -126,6 +126,7 @@ following lines:
 
 ```js
 const { BrowserWindow, nativeImage } = require('electron')
+
 const path = require('node:path')
 
 const win = new BrowserWindow()