chore: Upgrade to ESLint 9 and use Prettier separately (#1400)

Fixes #1349

Author: amannn

CONTRIBUTORS.md

@@ -39,33 +39,24 @@ Now, you're all set and you can work on individual packages.
 ### Tests
 
 There are currently two test setups:
+
 1. Packages use [Vitest](https://vitest.dev/)
 2. Examples use [Playwright](https://playwright.dev/)
 
 In either case, you can focus individual tests during development via `it.only`.
 
-### Code formatting (ESLint & Prettier)
-
-This project uses ESLint both for detecting issues in code, as well as for formatting.
+### Linting & formatting
 
-Prettier is integrated via an autofixable ESLint rule, therefore it's recommended to autofix all ESLint issues on save in your editor:
-
-```js
-// settings.json (VSCode)
-{
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-    "editor.formatOnSave": true
-  }
-}
-```
+This project uses ESLint for detecting issues in code, as well as Prettier for formatting.
 
-For ESLint to work correctly, you should open individual packages you work on as the workspace root (e.g. `./packages/next-intl`).
+It's recommended to use [an editor integration](https://github.com/molindo/eslint-config-molindo?tab=readme-ov-file#editor-integration) for both, so that autofixable issues are automatically resolved. For editor plugins to work correctly, you should open individual packages you work on as the workspace root (e.g. `next-intl/packages/next-intl` instead of `next-intl`).
 
-Alternatively, you can run ESLint via the command line:
+Alternatively, you can run ESLint and Prettier via the command line:
 
 ```sh
+cd packages/next-intl
 pnpm eslint src --fix
+pnpm prettier src --write
 ```
 
 ### Pull requests
@@ -93,7 +84,7 @@ Due to this, it's important to clean up commit messages of merged PRs since the
 
 Note that the exclamation mark syntax (`!`) for indicating breaking changes is currently [not supported by Lerna](https://github.com/lerna/lerna/issues/2668#issuecomment-1467902595). Instead, a block like `BREAKING CHANGE: Dropped support for Node.js 12` should be added to the body of the commit message.
 
-Other prefixes that are allowed and will *not* create a release are the following:
+Other prefixes that are allowed and will _not_ create a release are the following:
 
 1. `docs`: Documentation-only changes
 2. `test`: Missing tests were added or existing ones corrected

docs/.eslintrc.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import {DocSearch} from '@docsearch/react';
 import Router from 'next/router';
 import {TITLE_TEMPLATE_SUFFIX} from 'theme.config';

docs/components/AlgoliaSearch.tsx

@@ -25,9 +25,6 @@ export default function CopyToClipboard({
 
   const handleClick = useCallback(async () => {
     setCopied(true);
-    if (!navigator?.clipboard) {
-      console.error('Access to clipboard rejected!');
-    }
     try {
       await navigator.clipboard.writeText(getValue());
     } catch {

docs/components/CopyToClipboard.tsx

@@ -1,6 +1,6 @@
-import useLocationHash from 'hooks/useLocationHash';
 import {useMDXComponents} from 'nextra/mdx';
 import {ComponentProps, useEffect, useReducer} from 'react';
+import useLocationHash from 'hooks/useLocationHash';
 
 type Props = ComponentProps<'details'>;
 

docs/components/Details.tsx

@@ -1,6 +1,6 @@
 import {clsx} from 'clsx';
-import useLocationHash from 'hooks/useLocationHash';
 import Image from 'next/image';
+import useLocationHash from 'hooks/useLocationHash';
 
 type Props = {
   demoLink?: string;

docs/components/Example.tsx

@@ -1,5 +1,5 @@
-import config from 'config';
 import {useRouter} from 'next/router';
+import config from 'config';
 import FooterLink from './FooterLink';
 import FooterSeparator from './FooterSeparator';
 

docs/components/Footer.tsx

@@ -0,0 +1,3 @@
+import {getPresets} from 'eslint-config-molindo';
+
+export default await getPresets('typescript', 'react', 'tailwind');

docs/eslint.config.mjs

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "lint": "eslint pages components",
+    "lint": "eslint pages components && tsc && prettier pages components --check",
     "test": "echo 'No tests yet'",
     "build": "next build",
     "sitemap": "next-sitemap",
@@ -32,11 +32,11 @@
     "@types/node": "^20.14.5",
     "@types/react": "^18.3.3",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.56.0",
-    "eslint-config-molindo": "^7.0.0",
-    "eslint-config-next": "^14.2.4",
+    "eslint": "^9.11.1",
+    "eslint-config-molindo": "^8.0.0",
     "next-sitemap": "^4.2.3",
+    "prettier": "^3.3.3",
     "typescript": "^5.5.3"
   },
-  "prettier": "../.prettierrc.json"
+  "prettier": "eslint-config-molindo/.prettierrc.json"
 }

docs/package.json

@@ -1,8 +1,8 @@
 import {SpeedInsights} from '@vercel/speed-insights/next';
-import Analytics from 'components/Analytics';
 import {AppProps} from 'next/app';
 import {Inter} from 'next/font/google';
 import {ReactNode} from 'react';
+import Analytics from 'components/Analytics';
 import 'nextra-theme-docs/style.css';
 import '../styles.css';
 

docs/pages/_app.tsx

@@ -1,4 +1,4 @@
-import {Html, Head, Main, NextScript} from 'next/document';
+import {Head, Html, Main, NextScript} from 'next/document';
 import {SkipNavLink} from 'nextra-theme-docs';
 import React from 'react';
 

docs/pages/_document.tsx

@@ -56,7 +56,10 @@ Typically, you'll want to call this factory function in a central place in your
 These changes bring the existing APIs in line with the new [`createLocalizedPathnamesNavigation` API](/docs/routing/navigation) that allows you to localize pathnames:
 
 ```tsx filename="navigation.ts"
-import {createLocalizedPathnamesNavigation, Pathnames} from 'next-intl/navigation';
+import {
+  createLocalizedPathnamesNavigation,
+  Pathnames
+} from 'next-intl/navigation';
 
 export const locales = ['en', 'de'] as const;
 

docs/pages/blog/next-intl-3-0.mdx

@@ -100,7 +100,7 @@ export default getRequestConfig(async ({locale}) => {
 
   return {
     formats
-  }
+  };
 });
 ```
 

docs/pages/docs/workflows/typescript.mdx

@@ -2,11 +2,7 @@
   "extends": "eslint-config-molindo/tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
@@ -25,13 +21,6 @@
     ],
     "strict": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

docs/tsconfig.json

@@ -0,0 +1,3 @@
+import {getPresets} from 'eslint-config-molindo';
+
+export default await getPresets('typescript', 'react');

examples/example-app-router-migration/.eslintrc.js

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "lint": "eslint src && tsc",
+    "lint": "eslint src && tsc && prettier src --check",
     "test": "echo 'No tests yet'",
     "build": "next build",
     "start": "next start"
@@ -18,9 +18,10 @@
     "@types/lodash": "^4.17.5",
     "@types/node": "^20.14.5",
     "@types/react": "^18.3.3",
-    "eslint": "^8.56.0",
-    "eslint-config-molindo": "^7.0.0",
-    "eslint-config-next": "^14.2.4",
+    "eslint": "^9.11.1",
+    "eslint-config-molindo": "^8.0.0",
+    "prettier": "^3.3.3",
     "typescript": "^5.5.3"
-  }
+  },
+  "prettier": "eslint-config-molindo/.prettierrc.json"
 }

examples/example-app-router-migration/eslint.config.mjs

@@ -9,7 +9,7 @@ type Props = AppProps & {
 function App({Component, pageProps, router}: Props) {
   return (
     <NextIntlClientProvider
-      locale={(router.query?.locale as string) ?? 'en'}
+      locale={(router.query.locale as string) || 'en'}
       messages={pageProps.messages}
       timeZone="Europe/Vienna"
     >

examples/example-app-router-migration/package.json

@@ -2,11 +2,7 @@
   "extends": "eslint-config-molindo/tsconfig.json",
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "noEmit": true,
@@ -23,19 +19,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
     "strictNullChecks": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

examples/example-app-router-migration/src/pages/_app.tsx

@@ -3,10 +3,12 @@
 An example of how to achieve locale prefixes on public routes while reading the locale from user settings on pages for logged-in users.
 
 **Relevant docs:**
+
 1. [Setting up `next-intl` with i18n routing](https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing)
 2. [Setting up `next-intl` without i18n routing](https://next-intl-docs.vercel.app/docs/getting-started/app-router/without-i18n-routing)
 
 **Relevant parts in app code:**
+
 1. `src/middleware.ts`: Add a hint if it's a non-public route that we can read in `i18n.ts`.
 2. `src/i18n.ts`: Uses the locale from the pathname segment for public routes or returns a locale from the user profile for internal app routes.
 3. `src/navigation.public.ts`: Navigation APIs that automatically consider the `[locale]` segment for public routes. For internal app routes, the navigation APIs from Next.js should be used directly (see `PublicNavigation.tsx` vs `AppNavigation.tsx`).

examples/example-app-router-migration/tsconfig.json

@@ -0,0 +1,3 @@
+import {getPresets} from 'eslint-config-molindo';
+
+export default await getPresets('typescript', 'react', 'tailwind');

examples/example-app-router-mixed-routing/.eslintrc.js

@@ -25,4 +25,4 @@
   "Profile": {
     "title": "Profil"
   }
-}
+}

examples/example-app-router-mixed-routing/README.md

@@ -25,4 +25,4 @@
   "Profile": {
     "title": "Profile"
   }
-}
+}

examples/example-app-router-mixed-routing/eslint.config.mjs

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "lint": "eslint src && tsc",
+    "lint": "eslint src && tsc && prettier src --check",
     "test": "playwright test",
     "build": "next build",
     "start": "next start"
@@ -20,10 +20,11 @@
     "@types/node": "^20.14.5",
     "@types/react": "^18.3.3",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.56.0",
-    "eslint-config-molindo": "^7.0.0",
-    "eslint-config-next": "^14.2.4",
+    "eslint": "^9.11.1",
+    "eslint-config-molindo": "^8.0.0",
     "postcss": "^8.4.38",
+    "prettier": "^3.3.3",
     "typescript": "^5.5.3"
-  }
+  },
+  "prettier": "eslint-config-molindo/.prettierrc.json"
 }

examples/example-app-router-mixed-routing/messages/de.json

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    autoprefixer: {}
+  }
+};

examples/example-app-router-mixed-routing/messages/en.json

@@ -2,9 +2,9 @@ import {Metadata} from 'next';
 import {NextIntlClientProvider} from 'next-intl';
 import {getMessages} from 'next-intl/server';
 import {ReactNode} from 'react';
+import Document from '@/components/Document';
 import PublicNavigation from './PublicNavigation';
 import PublicNavigationLocaleSwitcher from './PublicNavigationLocaleSwitcher';
-import Document from '@/components/Document';
 
 type Props = {
   children: ReactNode;

examples/example-app-router-mixed-routing/package.json

@@ -2,8 +2,8 @@
 
 import {useRouter} from 'next/navigation';
 import {useLocale} from 'next-intl';
-import updateLocale from './updateLocale';
 import {Locale} from '@/config';
+import updateLocale from './updateLocale';
 
 export default function AppNavigationLocaleSwitcher() {
   const router = useRouter();

examples/example-app-router-mixed-routing/postcss.config.js

@@ -2,10 +2,10 @@ import {Metadata} from 'next';
 import {NextIntlClientProvider} from 'next-intl';
 import {getLocale, getMessages} from 'next-intl/server';
 import {ReactNode} from 'react';
+import Document from '@/components/Document';
 import AppNavigation from './AppNavigation';
 import AppNavigationLocaleSwitcher from './AppNavigationLocaleSwitcher';
 import Logout from './Logout';
-import Document from '@/components/Document';
 
 type Props = {
   children: ReactNode;