Jan Hesters

npx create-react-router@latest my-react-router-app

npm install --save-dev eslint

Next.js

npx create-next-app@latest

Add lint fix script to your package.json.

"lint:fix": "next lint --fix",

Add prettier to your project.

npm install --save-dev --save-exact prettier

"format": "prettier --write .",

Configure Prettier to use the prettier.config.ts file.

prettier.config.ts

export default {
  arrowParens: 'avoid',
  bracketSameLine: false,
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  jsxSingleQuote: false,
  plugins: ['prettier-plugin-tailwindcss'],
  printWidth: 80,
  proseWrap: 'always',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
};

Make Eslint & Prettier get along.

npm install --save-dev eslint-plugin-prettier eslint-config-prettier eslint-plugin-unicorn eslint-plugin-simple-import-sort

import { dirname } from "node:path";
import { fileURLToPath } from "node:url";
import { FlatCompat } from "@eslint/eslintrc";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import eslintPluginUnicorn from "eslint-plugin-unicorn";
import simpleImportSort from "eslint-plugin-simple-import-sort";
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
 
const compat = new FlatCompat({
  baseDirectory: __dirname,
});
 
/** @type {import('eslint').Linter.Config[]} */
const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  eslintPluginUnicorn.configs["flat/recommended"],
  {
    plugins: {
      "simple-import-sort": simpleImportSort,
    },
    rules: {
      "unicorn/better-regex": "warn",
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error",
    },
  },
  eslintPluginPrettierRecommended,
];
 
export default eslintConfig;

Install Vitest.

npm install @vitest/eslint-plugin --save-dev

import { dirname } from "node:path";
import { fileURLToPath } from "node:url";
 
import { FlatCompat } from "@eslint/eslintrc";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import eslintPluginUnicorn from "eslint-plugin-unicorn";
import vitest from "@vitest/eslint-plugin";
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
 
const compat = new FlatCompat({
  baseDirectory: __dirname,
});
 
/** @type {import('eslint').Linter.Config[]} */
const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  eslintPluginUnicorn.configs["flat/recommended"],
  {
    files: ["**/*.test.{ts,tsx}"],
    ...vitest.configs.recommended,
  },
  {
    plugins: {
      "simple-import-sort": simpleImportSort,
    },
    rules: {
      "unicorn/better-regex": "warn",
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error",
    },
  },
  eslintPluginPrettierRecommended,
];
 
export default eslintConfig;

npm install --save-dev eslint-plugin-testing-library
 
 
```bash
npm install -D eslint-plugin-playwright

import path from "node:path";
import { fileURLToPath } from "node:url";
 
import { FlatCompat } from "@eslint/eslintrc";
import vitest from "@vitest/eslint-plugin";
import playwright from "eslint-plugin-playwright";
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import testingLibrary from "eslint-plugin-testing-library";
import eslintPluginUnicorn from "eslint-plugin-unicorn";
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
 
const compat = new FlatCompat({
  baseDirectory: __dirname,
});
 
/** @type {import('eslint').Linter.Config[]} */
const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  eslintPluginUnicorn.configs["flat/recommended"],
  {
    ...playwright.configs["flat/recommended"],
    files: ["**/*.spec.ts"],
    rules: {
      ...playwright.configs["flat/recommended"].rules,
    },
  },
  {
    files: ["**/*.test.{ts,tsx}"],
    ...vitest.configs.recommended,
  },
  {
    files: ["**/*.test.tsx"],
    ...testingLibrary.configs["flat/dom"],
  },
  {
    files: ["**/*.test.tsx"],
    ...testingLibrary.configs["flat/react"],
  },
  {
    plugins: {
      "simple-import-sort": simpleImportSort,
    },
    rules: {
      "unicorn/better-regex": "warn",
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error",
    },
  },
  eslintPluginPrettierRecommended,
];
 
export default eslintConfig;