@viclafouch/eslint-config-viclafouch

ESLint and Prettier configuration for modern TypeScript projects.

Installation

npm i -D @viclafouch/eslint-config-viclafouch eslint prettier typescript

Quick Init (recommended)

npx @viclafouch/eslint-config-viclafouch

This will prompt you to select your stack and create the eslint.config.js file automatically.

Available templates:

1. TypeScript + React
2. TypeScript + Next.js
3. TypeScript + React Native
4. Pure TypeScript

Manual Setup (React Web)

// eslint.config.js
import {
  hooksConfig,
  importsConfig,
  jsxA11yConfig,
  prettierConfig,
  reactConfig,
  testingLibraryConfig,
  typescriptConfig
} from '@viclafouch/eslint-config-viclafouch'

/**
 * @type {import("eslint").Linter.Config}
 */
export default [
  {
    ignores: [
      '**/node_modules/**',
      '**/.output/**',
      '**/.tanstack/**'
    ]
  },
  ...typescriptConfig,
  ...reactConfig,
  ...hooksConfig,
  ...jsxA11yConfig,
  {
    files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
    ...testingLibraryConfig[0]
  },
  ...importsConfig,
  ...prettierConfig
]

Stack Examples

React + Vite

// eslint.config.js
import {
  hooksConfig,
  importsConfig,
  jsxA11yConfig,
  prettierConfig,
  reactConfig,
  testingLibraryConfig,
  typescriptConfig
} from '@viclafouch/eslint-config-viclafouch'

/**
 * @type {import("eslint").Linter.Config}
 */
export default [
  { ignores: ['**/node_modules/**', '**/dist/**'] },
  ...typescriptConfig,
  ...reactConfig,
  ...hooksConfig,
  ...jsxA11yConfig,
  {
    files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
    ...testingLibraryConfig[0]
  },
  ...importsConfig,
  ...prettierConfig
]

Pure TypeScript (Node.js, lib)

// eslint.config.js
import {
  importsConfig,
  prettierConfig,
  typescriptConfig
} from '@viclafouch/eslint-config-viclafouch'

/**
 * @type {import("eslint").Linter.Config}
 */
export default [
  { ignores: ['**/node_modules/**', '**/dist/**'] },
  ...typescriptConfig,
  ...importsConfig,
  ...prettierConfig
]

Next.js

// eslint.config.js
import {
  importsConfig,
  nextConfig,
  prettierConfig,
  typescriptConfig
} from '@viclafouch/eslint-config-viclafouch'

/**
 * @type {import("eslint").Linter.Config}
 */
export default [
  { ignores: ['**/node_modules/**', '**/.next/**'] },
  ...typescriptConfig,
  ...nextConfig,
  ...importsConfig,
  ...prettierConfig
]

React Native (Expo)

// eslint.config.js
import {
  hooksConfig,
  importsConfig,
  prettierConfig,
  reactConfig,
  reactNativeConfig,
  typescriptConfig
} from '@viclafouch/eslint-config-viclafouch'

/**
 * @type {import("eslint").Linter.Config}
 */
export default [
  { ignores: ['**/node_modules/**', '**/.expo/**', '**/ios/**', '**/android/**'] },
  ...typescriptConfig,
  ...reactConfig,
  ...hooksConfig,
  ...reactNativeConfig,
  ...importsConfig,
  ...prettierConfig
]

Available Configurations

| Config | Description | |--------|-------------| | typescriptConfig | Required base. TypeScript, ES6+, best practices, unicorn, promise | | reactConfig | React rules | | testingLibraryConfig | Testing Library rules (scope to your test files) | | hooksConfig | React Hooks | | jsxA11yConfig | Web accessibility (jsx-a11y) - for web projects | | reactNativeConfig | React Native specific rules | | nextConfig | Next.js (includes React + Hooks + jsx-a11y) | | playwrightConfig | Playwright e2e testing rules | | importsConfig | Automatic import sorting | | prettierConfig | Prettier with prettier-plugin-curly (always last) |

TypeScript

Extend tsconfig.json

{
  "extends": "@viclafouch/eslint-config-viclafouch/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Better Typing with reset.d.ts

Improves native types (.filter(Boolean), JSON.parse, Array.includes(), etc.):

import '@viclafouch/eslint-config-viclafouch/reset.d'

Scripts

{
  "type": "module",
  "scripts": {
    "lint": "tsc --noEmit && eslint .",
    "lint:fix": "npm run lint -- --fix"
  }
}

VS Code

1. Install the ESLint extension
2. Create a .vscode folder at your root project, and create a settings.json file:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Playwright E2E Testing

Add playwrightConfig scoped to your e2e test files:

// eslint.config.js
import {
  importsConfig,
  playwrightConfig,
  prettierConfig,
  reactConfig,
  typescriptConfig
} from '@viclafouch/eslint-config-viclafouch'

export default [
  { ignores: ['**/node_modules/**'] },
  ...typescriptConfig,
  ...reactConfig,
  ...importsConfig,
  {
    files: ['**/e2e/**/*.spec.ts'],
    ...playwrightConfig[0]
  },
  ...prettierConfig
]

Configuration Order

1. ignores (always first)
2. typescriptConfig (base)
3. reactConfig / nextConfig / hooksConfig
4. jsxA11yConfig (web) or reactNativeConfig (mobile)
5. testingLibraryConfig / playwrightConfig (scoped to test files)
6. importsConfig
7. prettierConfig (always last)