managarten/apps-archived/memoro/apps/mobile/ESLINT_SETUP.md

ESLint Setup for Unused Code Detection

✅ Successfully Configured

ESLint has been added to your project with specialized rules for detecting and auto-fixing unused imports and variables.

📦 Installed Packages

"devDependencies": {
  "eslint": "latest",
  "@typescript-eslint/parser": "latest",
  "@typescript-eslint/eslint-plugin": "latest",
  "eslint-plugin-unused-imports": "latest",
  "eslint-plugin-react": "latest",
  "eslint-plugin-react-hooks": "latest",
  "eslint-config-expo": "latest"
}

🎯 Key Features

1. Automatic Unused Import Removal

• Detects and removes unused imports automatically with --fix flag
• Already cleaned up imports in 50+ files on first run

2. Unused Variable Detection

• Warns about unused variables and function parameters
• Ignores variables/parameters prefixed with underscore (e.g., _unused)
• Respects destructuring patterns and rest operators

3. React-Specific Rules

• Ensures React hooks are called correctly
• Validates JSX variable usage
• Checks for exhaustive dependencies in hooks

📝 Available NPM Scripts

# Check for linting issues
npm run lint

# Auto-fix all fixable issues (including unused imports)
npm run lint:fix

# Specifically check for unused code
npm run lint:unused

# Format and fix everything
npm run format

🔧 Configuration

The ESLint configuration (eslint.config.js) includes:

• TypeScript support with proper type checking
• React/React Native optimizations
• Unused imports auto-removal
• Unused variables detection with smart patterns
• Proper ignores for build directories and generated files

📊 Initial Cleanup Results

On the first run, ESLint automatically:

• ✅ Removed unused imports from 50+ files
• ✅ Fixed import duplications in several files
• ✅ Cleaned up commented-out imports
• ✅ Identified variables that can be removed

Files with Most Cleanup:

1. app/(protected)/(memo)/[id].tsx - 32 lines simplified
2. app/(protected)/(tabs)/index.tsx - 15 lines cleaned
3. app/(protected)/(tabs)/memos.tsx - 15 lines cleaned

🚀 Usage Examples

Check specific file for unused code:

npx eslint app/_layout.tsx

Auto-fix a specific directory:

npx eslint features/ --fix

Check entire project (quiet mode, only errors):

npx eslint . --quiet

⚠️ Common Warnings to Expect

1. _unused parameters: Intentionally unused (follows convention)
2. Hook dependencies: May need manual review
3. Console statements: Warnings for non-error/warn/debug console use
4. Type imports: Some type-only imports are necessary for TypeScript

🎯 Best Practices

1. Run before commits: npm run lint:fix before committing
2. Regular cleanup: Run monthly to prevent accumulation
3. CI Integration: Consider adding to CI/CD pipeline
4. Pre-commit hook: Can be added with husky for automatic checking

📈 Impact

• Reduced bundle size: Removing unused imports helps tree-shaking
• Cleaner codebase: Less cognitive overhead from unused code
• Better maintainability: Easier to understand actual dependencies
• Faster builds: Less code to process and compile

---

Note: The configuration is conservative by default. Adjust rules in eslint.config.js as needed for your team's preferences.