Suitable 🔧

A powerful CLI tool that automatically fixes common ESLint issues in React projects. Say goodbye to unused imports, unused variables, and other linting headaches!

✨ Features

• 🧹 Auto-fix unused imports - Removes all unused import statements
• 🗑️ Remove unused variables - Eliminates unused variables and parameters
• ⚛️ React-optimized - Built specifically for React, Next.js, and TypeScript projects
• 🎯 Smart detection - Automatically detects your project type and applies appropriate rules
• 🔄 Interactive mode - Menu-driven approach for customized fixing
• 🏃‍♂️ Fast & efficient - Processes large codebases quickly
• 📊 Detailed reporting - Shows exactly what was fixed
• 🔧 Configurable - Use your existing ESLint config or our optimized defaults

🚀 Quick Start

Installation

# Install globally
npm install -g suitable

# Or run with npx (no installation needed)
npx suitable

Basic Usage

# Fix issues in current directory
suitable

# Fix issues in specific directory  
suitable ./src

# Interactive mode with menu
suitable --interactive

# Dry run (see what would be fixed without changing files)
suitable --dry-run

# Use custom ESLint config
suitable --config ./my-eslint-config.js

Quick Demo

Test it on any React project:

# Navigate to your React project
cd my-react-app

# See what issues can be fixed (dry run)
npx suitable --dry-run

# Fix all auto-fixable issues  
npx suitable

# Use interactive mode for customization
npx suitable --interactive

📋 Command Line Options

| Option | Description | Default | |--------|-------------|---------| | --interactive, -i | Run in interactive mode with menu | false | | --dry-run | Show what would be fixed without making changes | false | | --config <path> | Path to custom ESLint configuration file | Auto-detect | | --include <patterns> | File patterns to include (comma-separated) | **/*.{js,jsx,ts,tsx} | | --exclude <patterns> | File patterns to exclude (comma-separated) | node_modules/**,build/**,dist/** | | --fix, -f | Automatically fix issues | true |

🎮 Interactive Mode

Launch interactive mode for a guided experience:

suitable --interactive

The interactive mode will:

1. Detect your project type (React, Next.js, TypeScript)
2. Configure ESLint rules based on your project
3. Select file patterns to process
4. Choose fix options (auto-fix, dry-run, focus areas)
5. Show summary and ask for confirmation
6. Execute the fixes with your chosen configuration

🔧 What Gets Fixed

Unused Imports

// Before
import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';
import _ from 'lodash';

function MyComponent() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

// After
import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

Unused Variables

// Before
function processData(items, config, options) {
  const result = [];
  const temp = 'unused';
  
  items.forEach(item => {
    result.push(item.name);
  });
  
  return result;
}

// After
function processData(items) {
  const result = [];
  
  items.forEach(item => {
    result.push(item.name);
  });
  
  return result;
}

Code Formatting

• Removes trailing spaces
• Fixes indentation
• Adds missing semicolons
• Standardizes quotes
• Fixes object/array spacing

React-Specific Issues

• Removes unused React imports (React 17+)
• Fixes React Hooks rules violations
• Optimizes JSX prop usage
• Removes unused component props

🛠️ Configuration

Default Configuration

Suitable comes with sensible defaults optimized for React projects:

{
  // Focus on unused code removal
  'unused-imports/no-unused-imports': 'error',
  'unused-imports/no-unused-vars': 'error',
  
  // React optimizations
  'react/react-in-jsx-scope': 'off', // React 17+
  'react-hooks/rules-of-hooks': 'error',
  'react-hooks/exhaustive-deps': 'warn',
  
  // Auto-fixable formatting
  'no-trailing-spaces': 'error',
  'semi': 'error',
  'quotes': ['error', 'single'],
  // ... and more
}

Custom Configuration

Use your existing ESLint config:

suitable --config ./.eslintrc.js

Or create a project-specific config that extends Suitable's defaults:

// .eslintrc.js
module.exports = {
  extends: ['suitable/react'], // Use Suitable's React preset
  rules: {
    // Your custom rules
    'no-console': 'warn'
  }
};

🏗️ Project Structure Support

Suitable works with various project structures:

your-react-project/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── utils/
│   └── pages/
├── public/
├── package.json
└── .eslintrc.js (created if not exists)

🔍 Examples

Fix a Create React App project

cd my-cra-app
suitable

Fix a Next.js project with TypeScript

cd my-nextjs-app
suitable --interactive  # Will detect Next.js and suggest appropriate config

Fix specific directories only

suitable --include "src/**/*.{ts,tsx}" --exclude "src/**/*.test.ts"

See what would be fixed without making changes

suitable --dry-run

📊 Output Example

🔧 Suitable - React ESLint Auto-fixer
Fixing common linting issues in your React project...

✓ ESLint configuration ready
✓ Processing complete: 47 issues fixed in 23 files

# ✨ Summary

Files processed: 23
Issues fixed: 47
Unused imports removed: 18
Unused variables removed: 12

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

📝 License

MIT License - see LICENSE for details.

🙋‍♀️ Support

• 🐛 Report bugs
• 💡 Request features
• 📚 Documentation

🎯 Roadmap

• [ ] VS Code extension
• [ ] Git hook integration
• [ ] CI/CD pipeline integration
• [ ] More framework support (Vue, Angular)
• [ ] Custom rule templates
• [ ] Performance optimizations for large codebases

Made with ❤️ for the React community