@miguel/eslint-config

ESLint configuration package with best practices for React and TypeScript projects. This package enforces consistent code style, naming conventions, and modern JavaScript/TypeScript patterns.

Features

✅ TypeScript Support - Full TypeScript linting with strict rules
✅ React & JSX - Modern React patterns and hooks support
✅ Next.js Ready - Optimized for Next.js applications
✅ Import Organization - Automatic import sorting and CSS import ordering
✅ Naming Conventions - Enforced naming patterns (Interfaces: I, Types: T, Enums: E)
✅ Props Sorting - Alphabetical JSX props ordering
✅ Accessibility - Built-in a11y rules
✅ Performance - React performance best practices
✅ Prettier Integration - Works seamlessly with Prettier

Installation

npm install --save-dev @miguel/eslint-config

Peer Dependencies

Install the required peer dependencies:

npm install --save-dev eslint@^8.0.0 typescript@^5.0.0

Usage

Base Configuration (JavaScript/TypeScript)

For basic JavaScript/TypeScript projects:

// eslint.config.js or .eslintrc.js
module.exports = {
  extends: ['@miguel/eslint-config']
};

React Configuration

For React projects:

// eslint.config.js or .eslintrc.js
module.exports = {
  extends: ['@miguel/eslint-config/react']
};

TypeScript Configuration

For pure TypeScript projects:

// eslint.config.js or .eslintrc.js
module.exports = {
  extends: ['@miguel/eslint-config/typescript']
};

Next.js Configuration (Recommended)

For Next.js projects (includes React + TypeScript):

// eslint.config.js or .eslintrc.js
module.exports = {
  extends: ['@miguel/eslint-config/next']
};

Naming Conventions

This configuration enforces the following naming patterns:

TypeScript Naming

• Interfaces: Must start with I (e.g., IUser, IApiResponse)
• Type Aliases: Must start with T (e.g., TStatus, TUserRole)
• Enums: Must start with E (e.g., EUserStatus, EApiEndpoint)
• Classes: PascalCase (e.g., UserService, ApiClient)
• Variables: camelCase, PascalCase, or UPPER_CASE
• Functions: camelCase or PascalCase
• Custom Hooks: Must start with use (e.g., useAuth, useLocalStorage)

Examples

// ✅ Correct
interface IUser {
  id: number;
  name: string;
}

type TUserRole = 'admin' | 'user' | 'guest';

enum EUserStatus {
  ACTIVE = 'active',
  INACTIVE = 'inactive'
}

const useUserData = () => { /* ... */ };

// ❌ Incorrect
interface User { /* ... */ }           // Missing 'I' prefix
type UserRole = 'admin' | 'user';      // Missing 'T' prefix
enum UserStatus { /* ... */ }          // Missing 'E' prefix
const getUserData = () => { /* ... */ }; // Custom hook without 'use' prefix

Import Ordering

Imports are automatically organized in the following order:

1. Built-in modules (Node.js modules)
2. External libraries (npm packages)
   • React (always first)
   • Next.js modules (for Next.js config)
   • Other external libraries (alphabetically)
3. Internal modules (your app modules with @/ or ~/ aliases)
4. Parent imports (../)
5. Sibling imports (./)
6. CSS/Style imports (always last)

Example

// ✅ Correct import order
import React from 'react';

import { NextPage } from 'next';
import axios from 'axios';
import lodash from 'lodash';

import { apiClient } from '@/lib/api';
import { config } from '~/config';

import { validateUser } from '../utils/validation';

import { Button } from './button';
import { Modal } from './modal';

import './styles.css';

JSX Props Sorting

JSX props are automatically sorted alphabetically:

// ✅ Correct (alphabetical order)
<Button
  className="primary"
  disabled={false}
  id="submit-btn"
  onClick={handleClick}
  type="submit"
/>

// ❌ Incorrect (random order)
<Button
  onClick={handleClick}
  id="submit-btn"
  className="primary"
  type="submit"
  disabled={false}
/>

Package Scripts

Add these scripts to your package.json:

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "type-check": "tsc --noEmit"
  }
}

VSCode Integration

For the best experience, install the ESLint extension and add to your VSCode settings:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Configuration Details

Available Configurations

• @miguel/eslint-config - Base configuration
• @miguel/eslint-config/react - React-specific rules
• @miguel/eslint-config/typescript - TypeScript-specific rules
• @miguel/eslint-config/next - Next.js optimized (recommended)

Key Rules Enforced

• Alphabetical import sorting with CSS imports last
• Alphabetical JSX props sorting
• TypeScript naming conventions (I/T/E prefixes)
• React Hooks rules and best practices
• Accessibility (a11y) requirements
• Performance optimizations
• Modern ES2022+ features
• Prettier integration

Troubleshooting

Common Issues

1. Peer dependency warnings: Install the required peer dependencies listed above
2. TypeScript project errors: Ensure you have a tsconfig.json in your project root
3. Import resolver issues: Make sure your import aliases are configured in tsconfig.json

Custom Overrides

You can override specific rules in your project:

module.exports = {
  extends: ['@miguel/eslint-config/next'],
  rules: {
    // Override specific rules for your project
    '@typescript-eslint/no-explicit-any': 'warn',
    'react/jsx-sort-props': 'off'
  }
};

License

MIT

Contributing

Issues and pull requests are welcome! Please ensure your code follows the established patterns and includes appropriate tests.

miguel-eslint