ESLint Configuration

@hyperse/eslint-config-hyperse

A comprehensive ESLint and Prettier configuration for TypeScript projects, with support for monorepos and ESM. Optimized for Next.js and React applications.

eslint-pluginprettiermonorepoeslint-plugin-jsoneslint-prettiereslint-plugin-reacteslint-plugin-mdxhyperseeslint-plugin-v9eslint-plugin-tailwindcss

Quick start

git clone https://github.com/hyperse-io/eslint-config-hyperse.git

@hyperse/eslint-config-hyperse

🛠 A comprehensive ESLint and Prettier configuration for TypeScript projects, with support for monorepos and ESM. Optimized for Next.js and React applications. ⚡️

Features

🎯 TypeScript & JavaScript Linting: Latest standards-based linting for both TypeScript and JavaScript
🔧 Multiple Config Presets: Ready-to-use configurations for react, hooks, next, and more
📝 Shared TypeScript Config: Pre-configured tsconfig.json for consistent TypeScript settings
💅 Prettier Integration: Automatic code formatting with sensible defaults
♿️ Accessibility: Built-in rules for JSX accessibility
📦 Monorepo Support: Optimized for monorepo setups
🔄 Module Support: Full compatibility with both ESM and CommonJS
🎨 Tailwind CSS: Built-in support for Tailwind CSS class sorting
🔍 SonarJS: Optional integration for code quality rules

Installation & Configuration

Basic Setup

Initialize your project (if needed):
```
npm init
```

Install the ESLint config:

npm i -D @hyperse/eslint-config-hyperse

Create ESLint configuration:
- Create eslint.config.js (or eslint.config.mjs for CommonJS) in your project root
- Add the base configuration:

TypeScript Configuration

Base Configuration (`tsconfig.json`)

Build Configuration (`tsconfig.build.json`)

Available Scripts

Add to your package.json:

Or for JavaScript-only projects:

Framework-Specific Configurations

Next.js

React.js (without Next.js)

SonarJS Integration

VS Code Integration

Install the ESLint extension
Configure VS Code settings (.vscode/settings.json):

Additional Configuration

Prettier Configuration

Use definePrettierConfig() so Prettier CLI matches ESLint prettier/prettier (base options and prettier-plugin-tailwindcss, with the plugin always last when you add more plugins). The name mirrors this package’s defineConfig helper for ESLint.

Create prettier.config.mjs:

Optional slim import (no ESLint stack): @hyperse/eslint-config-hyperse/definePrettierConfig (the legacy path @hyperse/eslint-config-hyperse/getPrettierConfig still resolves to the same module).

The previous name getPrettierConfig remains exported but is deprecated; prefer definePrettierConfig.

Tailwind CSS Integration

Configure Tailwind via definePrettierConfig (paths are resolved relative to this config file):

Important Notes

TypeScript settings:
- isolatedModules: true (default)
- verbatimModuleSyntax: true (default)
JSON/JSONC files: VS Code formatting is disabled by default
React ESLint rules: See source code

Performance Considerations

The following ESLint rules may impact performance during linting/formatting:

prettier/prettier: Can be slow on large files due to full reformatting
@typescript-eslint/no-deprecated: Requires type information which increases checking time
sonarjs/arguments-order: Complex analysis of function argument usage patterns

Consider selectively disabling these rules for specific files if performance becomes an issue.

import { base, defineConfig } from '@hyperse/eslint-config-hyperse';

export default defineConfig([
  ...base,
  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
]);

"$schema": "https://json.schemastore.org/tsconfig",

"extends": "@hyperse/eslint-config-hyperse/tsconfig.base.json",

"compilerOptions": {

"types": ["vitest/globals"],

"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]

"extends": "./tsconfig.json",

"compilerOptions": {

"incremental": false,

"exclude": ["**/*.stories.tsx", "**/*.stories.mdx", ".storybook/**", "dist"]

"lint": "tsc --noEmit && eslint .",

"lint:fix": "npm run lint -- --fix"

import { defineConfig, nextjs } from '@hyperse/eslint-config-hyperse';

export default defineConfig([

'@typescript-eslint/no-explicit-any': 'off',

import { defineConfig, reactjs } from '@hyperse/eslint-config-hyperse';

export default defineConfig([

'@typescript-eslint/no-explicit-any': 'off',

import { defineConfig, sonarjs } from '@hyperse/eslint-config-hyperse';

export default defineConfig([

'sonarjs/fixme-tag': 'warn',

'sonarjs/todo-tag': 'warn',

"editor.formatOnSave": true,

"editor.defaultFormatter": "dbaeumer.vscode-eslint",

"editor.codeActionsOnSave": {

"source.fixAll": "explicit",

"source.organizeImports": "never"

"[jsonc]": { "editor.formatOnSave": false },

"[json]": { "editor.formatOnSave": false },

"eslint.workingDirectories": [

"files.associations": {

"*.css": "tailwindcss"

"editor.quickSuggestions": {

"tailwindCSS.classFunctions": ["tw", "clsx", "twMerge", "extendVariants"],

"tailwindCSS.classAttributes": ["className", "classNames"],

"tailwindCSS.experimental.configFile": {

"apps/web/src/app/globals.css": "apps/web/src/**",

"apps/docs/src/app/globals.css": "apps/docs/src/**"

import { definePrettierConfig } from '@hyperse/eslint-config-hyperse';

* @see https://prettier.io/docs/configuration

* @see https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation

export default definePrettierConfig({

// ...your overrides (e.g. Tailwind v4)

import { definePrettierConfig } from '@hyperse/eslint-config-hyperse';

export default definePrettierConfig({

tailwindStylesheet: './src/app/globals.css',

tailwindFunctions: ['tw', 'clsx', 'twMerge', 'extendVariants'],

tailwindAttributes: ['className', 'classNames'],