Merge pull request #91 from chrisweb/preview

Preview to main

Author: chrisweb

.vscode/settings.json

@@ -5,9 +5,6 @@
         "source.fixAll.eslint": "never"
     },
     "eslint.debug": true,
-    "eslint.options": {
-        "flags": ["unstable_ts_config"]
-    },
     "eslint.validate": [
         "markdown",
         "mdx",

app/web_development/tutorials/next-js-static-first-mdx-starterkit/code-highlighting-plugin/page.mdx

@@ -3,7 +3,7 @@ title: Code highlighting plugin - Next.js 15 Tutorial - Next.js 15 Tutorial
 description: Code highlighting plugin - Next.js 15 static first MDX starterkit | Web development tutorials | www.chris.lu
 keywords: ['highlighting', 'rehype', 'plugin', 'pretty', 'code', 'shiki']
 published: 2024-12-31T23:00:00.000Z
-modified: 2024-12-31T23:00:00.000Z
+modified: 2025-01-17T23:00:00.000Z
 permalink: https://chris.lu/web_development/tutorials/next-js-static-first-mdx-starterkit/code-highlighting-plugin
 section: Web development
 ---
@@ -51,13 +51,14 @@ export const metadata = {
 
 For me, the best about **rehype pretty code** is that it uses [shiki](https://shiki.matsu.io/) under the hood, **shiki** is fantastic at highlighting code, but it also comes with an impressive feature, which is that you can use your favorite VSCode theme to make your code blocks look the same as your code in VSCode
 
-## No next.config.ts
-
-If you use Typescript for your Next.js 15 config file and import this plugin, then you will get a node.js error telling you that it can NOT import the "vscode-textmate" package (which is a shiki dependency, shiki is used by this plugin).
-
-As described on a previous page, the reason for this is that next.config.ts files have [NO support for ESM only packages](/web_development/tutorials/next-js-static-first-mdx-starterkit/next-config#nextconfigts-does-not-support-esm-only-packages) (yet)
-
-As of now the only workaround for this problem (besides not using this plugin, as there are many alternatives like [rehype-starry-night](https://github.com/rehypejs/rehype-starry-night) and [rehype-highlight)](https://github.com/rehypejs/rehype-highlight)), is to go back to using a **next.config.mjs** file. You could rename your current next.config.ts to _next.config.ts (with an underscore) to have a backup and then make a copy that you name it next.config.mjs. Then you need to edit the next.config.mjs to comment out type imports and comment out code that creates or uses types. After that all you can do is keep using a Javascript file until the Typescript configuration files get support for ESM only packages
+> [!WARN]  
+> If you use an older version of vscode-textmate and import the rehype-pretty-code plugin in your next.config.ts, then you will get a node.js error telling you that it can NOT import the "vscode-textmate" package (which is a shiki dependency, and shiki is a rehype-pretty-code dependency):
+>  
+> ```shell
+> Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in @shikijs/vscode-textmate/package.json
+> ```
+>  
+> The fix is to update vscode-textmate (the fork by shikijs) to at least version 9.3.1, as this is the first version containing the [vscode-textmate package.json fix (PR #2)](https://github.com/shikijs/vscode-textmate/pull/2), the easiest way is to just update shiki to the latest version using this command: `npm i shiki@latest`
 
 ## Adding a new playground page
 

app/web_development/tutorials/next-js-static-first-mdx-starterkit/linting-in-vscode-using-extensions/page.mdx

@@ -3,7 +3,7 @@ title: Linting in VSCode using ESLint and MDX extensions - Next.js 15 Tutorial
 description: Linting in VSCode using ESLint and MDX extensions - Next.js 15 static first MDX starterkit | Web development tutorials | www.chris.lu
 keywords: ['CI/CD', 'Vercel', 'build', 'Production', 'preview']
 published: 2024-12-31T23:00:00.000Z
-modified: 2024-12-31T23:00:00.000Z
+modified: 2025-01-15T23:00:00.000Z
 permalink: https://chris.lu/web_development/tutorials/next-js-static-first-mdx-starterkit/linting-in-vscode-using-extensions
 section: Web development
 ---
@@ -69,21 +69,6 @@ Open the extensions view, then search for an extension named **ESLint** (publish
 
 After installing the ESLint extension, you need to edit the settings of that extension to add things like the **.mdx** extension to the list of file extensions that it will use
 
-> [!WARN]  
-> As of now (nov. 2024) if you use typescript for you eslint.config file (so .ts and not .mjs), then the extension will return the following error:
->  
-> > Error: Could not find config file.
->  
-> To have the ESLint extension support typescript configuration files, you need to add the same flag we previously added to our linting command in the package.json (in the [Linting setup using ESLint](/web_development/tutorials/next-js-static-first-mdx-starterkit/linting-setup-using-eslint) page)
->  
-> The ESLint extension which flag it should add to the ESLint command, we need to edit the extension settings, an easy way to do this is to edit the settings file (in the .vscode folder):
->  
-> ```json title=".vscode/settings.json"
-> "eslint.options": {
->     "flags": ["unstable_ts_config"]
-> }
-> ```
-
 You have several options when editing VSCode settings (spoiler alert: I will use option 2)
 
 Option 1: Open the extensions view (extensions list), if you don't know (yet) how to do this, then I recommend checking out my ["VSCode extensions view" chapter](/web_development/posts/vscode#vscode-extensions-view) in the VSCode post
@@ -99,13 +84,10 @@ Option 2: If you have already set custom settings for your VSCode workspace, the
 
 Now open the `.vscode/settings.json` file and add the following settings for our ESLint extension:
 
-```json title="/.vscode/settings.json" showLineNumbers {3-14} /,/1#special
+```json title="/.vscode/settings.json" showLineNumbers {3-11} /,/1#special
 {
     "typescript.tsdk": "node_modules\\typescript\\lib",
     "eslint.debug": true,
-    "eslint.options": {
-        "flags": ["unstable_ts_config"]
-    },
     "eslint.validate": [
         "markdown",
         "mdx",
@@ -119,7 +101,22 @@ Now open the `.vscode/settings.json` file and add the following settings for our
 
 Add a comma at the end of the `typescript.tsdk` line that is already in the settings.json file, then add our ESLint extension settings below
 
-If you are using typescript ESLint config file (eslint.config.ts) then it is very important that you also add the flags options to unable the (currently still experimental) typescript support for ESLint configuration files
+> [!NOTE]  
+> **A special note if you are using ESLint < v9.18.0:**
+> 
+> If you use typescript for you eslint.config file (so a .ts extension and not .mjs), then the ESLint extension will return the following error:
+>  
+> > Error: Could not find config file.
+>  
+> To have the ESLint extension support typescript configuration files, you need to add the same flag you use in your package.json linting script (for more about linting commands in the package.json file, check out the [Linting setup using ESLint](/web_development/tutorials/next-js-static-first-mdx-starterkit/linting-setup-using-eslint) page)
+>  
+> To tell the ESLint extension which flag it should add to the ESLint command, we need to edit the extension settings, an easy way to do this is to edit the settings file (which is in the .vscode folder, if you don't already have such a file, just create one manually):
+>  
+> ```json title=".vscode/settings.json"
+> "eslint.options": {
+>     "flags": ["unstable_ts_config"]
+> }
+> ```
 
 > [!MORE]  
 > [VSCode "ESLint" extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)  

app/web_development/tutorials/next-js-static-first-mdx-starterkit/linting-setup-using-eslint/page.mdx

@@ -3,7 +3,7 @@ title: Linting setup using ESLint 9 flat config - Next.js 15 Tutorial
 description: Linting setup using ESLint - Next.js 15 static first MDX starterkit | Web development tutorials | www.chris.lu
 keywords: ['Linting', 'ESLint', 'flat config', 'nextjs', 'mdx', 'plugin', 'parser']
 published: 2024-12-31T23:00:00.000Z
-modified: 2024-12-31T23:00:00.000Z
+modified: 2025-01-15T23:00:00.000Z
 permalink: https://chris.lu/web_development/tutorials/next-js-static-first-mdx-starterkit/linting-setup-using-eslint
 section: Web development
 ---
@@ -199,6 +199,17 @@ As we converted our **next.config** file to a (`next.config.ts`) typescript file
 
 First we rename our ESlint configuration file to `eslint.config.ts` (you can also use `eslint.config.mts` or `eslint.config.cts` if you prefer), in this tutorial I will use **eslint.config.ts** (to match how we named the **next.config.ts** file)
 
+> [!NOTE]  
+> **A special note if you are using ESLint < v9.18.0:**
+> 
+> Being able to use [typescript for ESLint Flat Config files](https://eslint.org/docs/latest/use/configure/configuration-files#typescript-configuration-files) is a feature that got added in [ESLint v9.9.0](https://eslint.org/blog/2024/08/eslint-v9.9.0-released/#experimental-typescript-configuration-files), and at first it was marked as experimental, meaning the ESLint cli command needed an extra flag (until ESLint version 9.18.0 which removed the need for the flag)
+>  
+> If you use typescript for your eslint.config file (so a .ts extension and not .mjs), without the flag will result in the following error:
+>  
+> > Error: Could not find config file.
+>  
+> To have the ESLint CLI support typescript configuration files, you need to add the `--flag unstable_ts_config` to your commands
+
 Next we need to install additional [@types/eslint__eslintrc](https://www.npmjs.com/package/@types/eslint__eslintrc) types for the [@eslint/eslintrc](https://www.npmjs.com/package/@eslint/eslintrc) package:
 
 ```shell
@@ -254,11 +265,10 @@ If you have converted your ESLint configuration to an `eslint.config.ts` file an
 As we can't use next lint we need to create our own linting command:
 
 * as we can NOT use **next lint**, we will use the **eslint cli** instead
-* we will also enable the [(experimental) typescript support](https://eslint.org/docs/latest/use/configure/configuration-files#typescript-configuration-files) for ESLint Flat Config files by adding an extra flag to our command (typescript support for configuration files is a feature that got added in [ESLint v9.9.0](https://eslint.org/blog/2024/08/eslint-v9.9.0-released/#experimental-typescript-configuration-files))
 * finally we will enable caching (as would next lint do) and we set the cache folder path to the same folder that Next.js uses
 
 ```shell
-npx eslint --flag unstable_ts_config --cache --cache-location .next/cache/eslint/
+npx eslint --cache --cache-location .next/cache/eslint/
 ```
 
 Now that we have created a new command we can update our package.json (in the root of the project) to update our linting script(s):
@@ -269,7 +279,7 @@ Now that we have created a new command we can update our package.json (in the ro
     "dev-turbo": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint --flag unstable_ts_config --cache --cache-location .next/cache/eslint/"
+    "lint": "eslint --cache --cache-location .next/cache/eslint/"
 },
 ```
 
@@ -281,7 +291,7 @@ There is one more problem left, the **next build** script uses **next lint** by
     "dev-turbo": "next dev --turbopack",
     "build": "npm run lint && next build",
     "start": "next start",
-    "lint": "eslint --flag unstable_ts_config --cache --cache-location .next/cache/eslint/"
+    "lint": "eslint --cache --cache-location .next/cache/eslint/"
 },
 ```
 
@@ -311,9 +321,9 @@ We update our `package.json` file (in the root) and add the following scripts:
     "build": "npm run lint && next build",
     "start": "next start",
     "next-lint": "next lint",
-    "lint": "eslint --flag unstable_ts_config --cache --cache-location .next/cache/eslint/",
-    "lint-nocache": "eslint --flag unstable_ts_config",
-    "lint-fix": "eslint --flag unstable_ts_config --fix"
+    "lint": "eslint --cache --cache-location .next/cache/eslint/",
+    "lint-nocache": "eslint",
+    "lint-fix": "eslint --fix"
 },
 ```
 
@@ -371,12 +381,12 @@ If you want you can add those commands to your package json scripts:
     "build": "npm run lint && next build",
     "start": "next start",
     "next-lint": "next lint",
-    "lint": "eslint --flag unstable_ts_config --cache --cache-location .next/cache/eslint/",
-    "lint-nocache": "eslint --flag unstable_ts_config",
-    "lint-fix": "eslint --flag unstable_ts_config --fix",
-    "lint-debug-config": "eslint --flag unstable_ts_config --debug eslint.config.ts",
-    "lint-print-config": "eslint --flag unstable_ts_config --print-config eslint.config.ts",
-    "lint-inspect-config": "eslint --flag unstable_ts_config --inspect-config eslint.config.ts"
+    "lint": "eslint --cache --cache-location .next/cache/eslint/",
+    "lint-nocache": "eslint",
+    "lint-fix": "eslint --fix",
+    "lint-debug-config": "eslint --debug eslint.config.ts",
+    "lint-print-config": "eslint --print-config eslint.config.ts",
+    "lint-inspect-config": "eslint --inspect-config eslint.config.ts"
 },
 ```
 

app/web_development/tutorials/next-js-static-first-mdx-starterkit/optimizing-using-next-image/page.mdx

@@ -474,13 +474,10 @@ We know by now that MDX is markdown + JSX, but VSCode (as of now, sees things a
 
 I recommend you open the `.vscode/settings.json` VSCode workspace settings file (that we already used in one of the first steps of this tutorial to tell VSCode to use the typescript version that is in our workspace) and add the following entry to it:
 
-```json title=".vscode/settings.json" showLineNumbers /,/9#special {15-17}
+```json title=".vscode/settings.json" showLineNumbers /,/9#special {12-14}
 {
     "typescript.tsdk": "node_modules\\typescript\\lib",
     "eslint.debug": true,
-    "eslint.options": {
-        "flags": ["unstable_ts_config"]
-    },
     "eslint.validate": [
         "markdown",
         "mdx",