npm package: @miguel-rp/eslint-config
Description: ESLint configuration with best practices for React and TypeScript projects
Author: Miguel
Latest version: 1.0.5

# @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

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

### Peer Dependencies

Install the required peer dependencies:

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

## Usage

### Base Configuration (JavaScript/TypeScript)

For basic JavaScript/TypeScript projects:

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

### React Configuration

For React projects:

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

### TypeScript Configuration

For pure TypeScript projects:

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

### Next.js Configuration (Recommended)

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

```js
// 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

```typescript
// ✅ 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

```typescript
// ✅ 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:

```jsx
// ✅ 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`:

```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:

```json
{
  "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:

```js
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