Configure ESLint and Prettier on React Router v7.3 + Vite 5 - Mar 2025

eslint-prettier-commands.txt

// Eslint and stuff

pnpm add -D eslint @eslint/js typescript-eslint typescript eslint-config-prettier globals

// Prettier

pnpm add -D prettier

// Combined

pnpm add -D eslint prettier @eslint/js typescript-eslint typescript eslint-config-prettier globals

eslint.config.js

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import globals from 'globals';
import eslintConfigPrettier from 'eslint-config-prettier';

const weAreHighlyProficientInTypeScript = true;
const weLikeCodeStylingConsistencyEvenIfSomeRulesAreOpinionated = true;

export default tseslint.config(
  {
    ignores: ['node_modules', 'dist', 'build', 'coverage', '.react-router'],
  },
  {
    languageOptions: {
      globals: {
        ...globals.node,
      },
      parserOptions: {
        projectService: {
          allowDefaultProject: ['*.mjs', '*.js'],
        },
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  eslint.configs.recommended,
  ...(weAreHighlyProficientInTypeScript
    ? [tseslint.configs.strict]
    : [tseslint.configs.recommended]),
  ...(weLikeCodeStylingConsistencyEvenIfSomeRulesAreOpinionated
    ? [tseslint.configs.stylistic]
    : []),
  {
    rules: {
      'no-empty-pattern': 'off',
    },
  },
  {
    files: ['**/*.test.ts'],
    rules: {},
  },
  eslintConfigPrettier
);

package.json

{
  "name": "explore-mv",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc",
    "lint": "eslint .",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@react-router/node": "^7.3.0",
    "@react-router/serve": "^7.3.0",
    "isbot": "^5.1.17",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.3.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.22.0",
    "@react-router/dev": "^7.3.0",
    "@tailwindcss/vite": "^4.0.0",
    "@types/node": "^20",
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    "eslint": "^9.22.0",
    "eslint-config-prettier": "^10.1.1",
    "globals": "^16.0.0",
    "prettier": "^3.5.3",
    "react-router-devtools": "^1.1.0",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.8.2",
    "typescript-eslint": "^8.26.0",
    "vite": "^5.4.11",
    "vite-tsconfig-paths": "^5.1.4"
  },
  "packageManager": "[email protected]"
}

prettier.config.js

/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
const config = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  printWidth: 100,
  useTabs: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  bracketSpacing: true,
};

export default config;