Cleanup Patterns

Comprehensive patterns and strategies for cleaning up TypeScript/JavaScript codebases. This skill provides guidance on identifying unused code, assets, and dependencies to reduce technical debt and improve maintainability.

Quick Reference

Cleanup Commands

Detection Tools

Import Cleanup

Common Import Issues

1. Unused imports – Imported but never referenced
2. Duplicate imports – Same module imported multiple times
3. Circular imports – Module A imports B, B imports A
4. Side-effect only imports – Execute code but export nothing

Detection Strategy

# TypeScript compiler check
npx tsc --noEmit --noUnusedLocals

# ESLint with unused-imports plugin
npx eslint . --rule 'no-unused-vars: error'

# Circular dependency detection
npx madge --circular --extensions ts,tsx src/

Quick Fixes

// Before: Multiple unused imports
import { useState, useEffect, useCallback, useMemo } from 'react';
import lodash from 'lodash';

// After: Only used imports remain
import { useState, useCallback } from 'react';

See references/import-patterns.md for detailed patterns.

Dead Code Detection

Categories

1. Unreachable code – Code after return/throw statements
2. Unused functions – Defined but never called
3. Unused variables – Declared but never read
4. Unused exports – Exported but never imported elsewhere
5. Unused class members – Methods/properties never accessed

Detection Strategy

# TypeScript checks
npx tsc --noEmit --noUnusedLocals --noUnusedParameters

# Find unused exports
npx ts-prune

# ESLint rules
npx eslint . --rule 'no-unreachable: error'

Confidence Levels

See references/dead-code-patterns.md for detailed patterns.

Asset Tracking

Asset Types

Reference Patterns to Search

// Direct imports
import logo from './logo.png';

// HTML/JSX references
<img src="/images/hero.png" />

// CSS references
background-image: url('/images/bg.jpg');

// Dynamic (flag for review)
const img = require(`./images/${name}.png`);

See references/asset-patterns.md for detailed patterns.

Dependency Auditing

Analysis Categories

1. Unused packages – In package.json but never imported
2. Security vulnerabilities – Known CVEs in dependencies
3. Duplicate packages – Same functionality, different packages
4. Misplaced dependencies – devDeps vs deps incorrect
5. Outdated packages – Behind latest versions

Quick Commands

# Find unused packages
npx depcheck

# Security audit
npm audit

# Check outdated
npm outdated

# Package size analysis
npx package-size lodash moment axios

Common Functional Duplicates

See references/dependency-patterns.md for detailed patterns.

Configuration Cleanup

What to Check

1. Environment variables – Defined in .env but never used
2. Config files – For tools no longer installed
3. Feature flags – Stale or always-on flags
4. Build configs – Redundant or default options

Common Obsolete Configs

Best Practices

Before Cleanup

1. Commit current state – Ensure clean git status
2. Run tests – Verify tests pass before changes
3. Document public APIs – Know what shouldn’t be removed
4. Backup configs – Save current configuration

During Cleanup

1. Start with high confidence – Remove obvious dead code first
2. Batch similar changes – Group related removals
3. Test incrementally – Run tests after each batch
4. Use git diff – Review changes before committing

After Cleanup

1. Run full test suite – Verify nothing broke
2. Check bundle size – Measure improvement
3. Update documentation – Remove references to deleted code
4. Commit with clear message – Document what was removed

Common Pitfalls

False Positives to Avoid

1. Dynamic usage – obj[methodName]() patterns
2. Framework magic – Decorated methods, lifecycle hooks
3. External consumers – Public library exports
4. Test utilities – Only used in test files
5. Generated code – Files with @generated comments

Edge Cases

// Looks unused but called dynamically
export function helper_a() { }
export function helper_b() { }
const fn = helpers[`helper_${type}`];

// Framework-managed lifecycle
@Component({})
class MyComponent {
  ngOnInit() { }  // Called by Angular
}

// Re-exports for public API
export { Button } from './Button';  // Used by consumers

Report Format

The /cleanup command generates reports in this format:

# Codebase Cleanup Report

## Summary
| Category | Issues | Est. Savings |
|----------|--------|--------------|
| Unused Imports | 23 | - |
| Dead Code | 15 | ~500 LOC |
| Unused Assets | 12 | 2.3 MB |
| Unused Dependencies | 5 | 4.1 MB |

## High Priority (Safe to Remove)
[Detailed findings with file paths and line numbers]

## Medium Priority (Review Required)
[Findings that need verification]

## Low Priority (Manual Review)
[Potential issues with dynamic patterns]

References

• references/import-patterns.md – Import analysis patterns
• references/dead-code-patterns.md – Dead code detection strategies
• references/asset-patterns.md – Asset tracking methodology
• references/dependency-patterns.md – Dependency audit procedures

Examples

• examples/cleanup-examples.md – Before/after cleanup examples