28-day Challenge - GitHub Copilot
Hint: if you're on your phone turn it sideways ⤵️
GitHub Copilot Training Course
GITHUB COPILOT MASTERY
Professional Development Program
MODULE 4: Multi-File Editing & Codebase Transformation
Master Copilot Edits for large-scale refactoring, technical debt elimination, and architectural transformations that span hundreds of files simultaneously.
The Power of Contextual Multi-File Editing
Traditional refactoring: identify pattern → manually edit file 1 → file 2 → file 3... → eventually lose track or introduce inconsistencies. Copilot Edits: describe the transformation once → Copilot edits dozens or hundreds of files simultaneously while maintaining perfect consistency. What previously took weeks now takes hours. This isn't incremental improvement—it's a fundamental shift in how large-scale code transformations happen.
Refactoring Speed
15-25x Faster
Consistency Rate
98%+
Error Reduction
-87%
Copilot Edits: Architecture and Capabilities
Understanding Edit Mode vs Agent Mode
Copilot Edits is a specialized multi-file editing interface designed for refactoring and transformation tasks. Unlike agent mode (which handles entire features autonomously), Edits focuses on applying consistent changes across many files with granular control.
Edit Mode capabilities: Simultaneous editing of 5-100+ files, real-time diff preview for every change, granular accept/reject controls, pattern-based transformations, and context preservation across all edits.
- Perfect for: Renaming functions/variables across codebase, updating API patterns, migrating libraries, code style standardization, type safety improvements
- Not suitable for: New feature development, complex business logic, architectural redesigns requiring decisions
- Key difference from find-replace: Edit mode understands code context—it won't rename a function if it would conflict with an import, or change a variable if it would break scope
The Edit Mode Workflow
Professional Edit Mode usage follows a specific pattern: select files → describe transformation → review changes → apply selectively → verify results.
Basic Edit Mode Session:
// Step 1: Open Edit Mode in VS Code
Cmd/Ctrl + Shift + I → Switch to "Edit" tab
// Step 2: Select files to modify
@workspace #file src/**/*.tsx
// Step 3: Describe transformation
"Replace all useState hooks with useReducer where state has
3+ properties. Maintain exact functionality and add TypeScript
types for actions."
// Step 4: Copilot analyzes files
[Scanning 43 files... Found 17 components matching criteria]
// Step 5: Review proposed changes
[Shows side-by-side diffs for each file]
UserProfile.tsx: 12 lines changed
Dashboard.tsx: 18 lines changed
Settings.tsx: 9 lines changed
...
// Step 6: Accept changes selectively
[Accept all] [Accept file-by-file] [Reject all]
// Step 7: Verify
Run tests to ensure no behavioral changes
File Selection Strategies
Effective Edit Mode starts with precise file selection. Too broad and you waste time reviewing irrelevant changes. Too narrow and you miss files that need updating.
File Selection Patterns:
// Scenario 1: Specific directory tree
#file src/components/**/*.tsx
// Targets: All TypeScript React files in components/
// Scenario 2: File type across workspace
@workspace *.test.ts
// Targets: All test files everywhere
// Scenario 3: Multiple specific files
#file src/api/users.ts #file src/api/posts.ts #file src/api/auth.ts
// Targets: Only these three files
// Scenario 4: Exclude patterns
@workspace src/**/*.ts !src/**/*.test.ts !src/**/*.spec.ts
// Targets: All TS files except tests
// Scenario 5: Files matching content pattern
@workspace "function fetchUser"
// Targets: Files containing this function
// Pro tip: Start narrow, expand as needed
// Better to run Edit Mode twice than review 100 irrelevant files
Transformation Prompt Engineering
The quality of your transformation description directly determines Edit Mode success. Vague prompts yield inconsistent results. Precise prompts with constraints yield perfect transformations.
Poor Prompt (inconsistent results):
"Make the code better"
// Too vague - Copilot doesn't know what "better" means
"Add error handling"
// Ambiguous - What kind? Where? How comprehensive?
"Update to use the new API"
// Missing context - Which API? What changed?
Professional Transformation Prompts:
// Excellent: Specific, constrained, verifiable
"Replace all fetch() calls with our ApiClient wrapper from
lib/api.ts. Maintain the same parameters and return types.
Add proper error handling using try/catch with typed ApiError.
Preserve all existing comments."
// Excellent: Pattern-based with examples
"Convert all class components to functional components with
hooks. Follow this pattern:
- this.state → useState
- componentDidMount → useEffect with empty deps
- this.setState → setState function
Maintain PropTypes as-is for now."
// Excellent: Constrained scope
"Add TypeScript types to all function parameters and return
values in utils/ directory. Use existing types from types/
when available. Create new types only if necessary. Do not
change function logic."
// Excellent: Migration with safety
"Update from React Router v5 to v6 syntax:
- Switch → Routes
- Redirect → Navigate
- useHistory → useNavigate
Keep exact same routing behavior. Update only routing code,
not components."
Large-Scale Refactoring Patterns
The Incremental Transformation Strategy
For massive refactoring projects (100+ files), break transformations into logical phases. Each phase should be independently reviewable and testable.
Example: TypeScript Migration (300 files)
// Phase 1: Rename files (lowest risk)
Edit Mode: Rename all .js files to .ts, .jsx to .tsx
Files: 300 → Review: Quick scan → Apply all
Test: Ensure build still works
// Phase 2: Add basic types to function signatures
Edit Mode: Add parameter types and return types using 'any'
for now. Don't change logic.
Files: 300 → Review: Check patterns → Apply all
Test: Full test suite
// Phase 3: Replace 'any' with proper types (highest value)
Edit Mode: Replace 'any' types with correct types from
existing interfaces. Create new interfaces only when needed.
Files: 300 → Review: Carefully check each file → Apply gradually
Test: Type checking + full test suite
// Phase 4: Enable strict mode and fix errors
Edit Mode: Add null checks, handle undefined cases, fix
implicit any usage
Files: ~150 (files with issues) → Review: Critical review → Apply carefully
Test: Strict TypeScript + test suite
// Result: 300 files migrated in 4 controlled phases
// Each phase validated before proceeding
// Total time: 3-4 days vs 4-6 weeks manual
Pattern Recognition and Application
Copilot Edits excels when you identify a pattern in one file and want to apply it everywhere. Show it the pattern, and it replicates consistently.
Pattern-Based Refactoring:
// You have: Inconsistent error handling across 50 API routes
// Some use try/catch, some don't, some return different formats
// Step 1: Create reference implementation
// File: src/api/_reference.ts
export async function referenceApiRoute(req, res) {
try {
const result = await someOperation()
return res.status(200).json({ data: result })
} catch (error) {
if (error instanceof ValidationError) {
return res.status(400).json({
error: error.message,
code: 'VALIDATION_ERROR'
})
}
if (error instanceof NotFoundError) {
return res.status(404).json({
error: error.message,
code: 'NOT_FOUND'
})
}
return res.status(500).json({
error: 'Internal server error',
code: 'INTERNAL_ERROR'
})
}
}
// Step 2: Use Edit Mode to apply pattern
"Apply the error handling pattern from #file:api/_reference.ts
to all API routes in #file:api/**/*.ts. Maintain existing
business logic, only standardize error handling structure."
// Step 3: Review changes
[50 files modified, error handling now consistent]
// Step 4: Delete reference file
rm api/_reference.ts
Dependency Migration Workflows
Migrating from one library to another across a large codebase is a perfect Edit Mode use case. The key is providing migration context.
Library Migration Example: Moment.js → date-fns
// Preparation: Document the migration mappings
// Create: migration-guide.md
moment() → new Date()
moment(date) → parseISO(date)
moment().format('YYYY-MM-DD') → format(new Date(), 'yyyy-MM-dd')
moment().add(7, 'days') → addDays(new Date(), 7)
moment(a).isBefore(b) → isBefore(a, b)
moment(a).diff(b, 'days') → differenceInDays(a, b)
// Edit Mode prompt:
"Migrate from moment.js to date-fns following the mappings
in migration-guide.md. Add date-fns imports at top of each
file. Remove moment imports. Update all date operations
following the documented patterns."
// Select files:
@workspace "import moment"
// Result: 45 files migrated
// Remove moment from package.json
// Bundle size reduced by 67KB
Code Style Standardization
Use Edit Mode to enforce consistent code style across teams, especially after merging codebases or onboarding new developers with different conventions.
Style Standardization Tasks:
// Task 1: Consistent import ordering
"Reorder imports in all files: React/framework first, then
third-party libraries alphabetically, then local imports.
Add blank line between groups."
// Task 2: Consistent quote style
"Convert all double quotes to single quotes except in JSX.
In JSX attributes, use double quotes."
// Task 3: Async/await vs .then()
"Convert all Promise chains using .then() to async/await
syntax. Add try/catch blocks for error handling."
// Task 4: Arrow functions vs function declarations
"Convert all function declarations to arrow function const
declarations. Keep function keyword only for React components
and generators."
// Task 5: Destructuring consistency
"Use object destructuring for props in all React components.
Convert 'props.name' to destructured parameters."
// Pro tip: Run Prettier/ESLint after Edit Mode
// Catches any formatting inconsistencies
Technical Debt Elimination at Scale
Deprecated API Cleanup
Every codebase accumulates deprecated API usage. Edit Mode makes wholesale cleanup practical instead of a multi-sprint project.
Deprecated API Cleanup Pattern:
// Scenario: React 18 deprecated several APIs
// Your codebase uses them in 89 files
// Find usage:
@workspace "ReactDOM.render"
// Result: 89 files found
// Edit Mode transformation:
"Replace ReactDOM.render() with createRoot() following
React 18 migration guide:
Old pattern:
ReactDOM.render(
Security Vulnerability Remediation
Security audits often reveal patterns of vulnerable code. Edit Mode enables immediate organization-wide fixes.
Security Fix Example:
// Security scan found: SQL injection vulnerabilities
// 23 files directly concatenate SQL strings
// Find vulnerable code:
@workspace "db.query(`"
// Edit Mode fix:
"Replace all SQL string concatenation with parameterized
queries. Pattern:
BAD: db.query(`SELECT * FROM users WHERE id = ${userId}`)
GOOD: db.query('SELECT * FROM users WHERE id = ?', [userId])
For Prisma ORM:
BAD: prisma.$queryRaw`SELECT * FROM users WHERE id = ${id}`
GOOD: prisma.$queryRaw`SELECT * FROM users WHERE id = ${id}`
// Prisma already safe, no change needed
Ensure all user inputs use parameterized queries."
// Additional security fixes:
- eval() usage → safer alternatives
- innerHTML = userInput → textContent or DOMPurify
- crypto.pseudoRandomBytes() → crypto.randomBytes()
- localStorage sensitive data → encrypted storage
Performance Optimization Patterns
Apply performance best practices across your entire codebase in one session instead of gradually over months.
Performance Optimization Tasks:
// Task 1: React performance - Add memoization
"Add React.memo() to all pure components that receive object
or array props. Skip components that use context or have
complex logic."
// Task 2: Lazy loading
"Convert all route component imports to lazy loading:
import Component from './Component'
→
const Component = lazy(() => import('./Component'))
Wrap routes with Suspense boundaries."
// Task 3: Database query optimization
"Replace all .find() operations followed by .map() with
single .select() query that includes relationships. Use
Prisma's include option."
// Task 4: Image optimization
"Replace all ![]()
tags with Next.js Image component.
Maintain alt text and styling. Add width/height props
based on actual image dimensions."
// Task 5: Bundle optimization
"Replace lodash imports from 'lodash' to specific functions:
import _ from 'lodash'
→
import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'"
Testing Coverage Improvement
Use Edit Mode to systematically add tests to untested code, following consistent patterns across the codebase.
Test Addition Strategy:
// Phase 1: Add test files for utilities without tests
"For each file in src/utils/ that doesn't have a
corresponding .test.ts file, create a test file with:
- Import the module
- Describe block with module name
- Test cases for happy path
- Test cases for error conditions
- Test cases for edge cases (null, undefined, empty)
Use Jest and follow patterns in existing test files."
// Phase 2: Increase coverage in partially tested components
"For each React component in src/components/ with <80% test
coverage, add missing test cases:
- Test all props variations
- Test user interactions (click, input, etc.)
- Test error states
- Test loading states
Maintain existing tests, only add new ones.
// Phase 3: Add integration tests
For each API route, create integration test that:
- Tests successful response
- Tests 400 validation errors
- Tests 401 authentication errors
- Tests 404 not found
- Tests 500 server errors
Use supertest and follow patterns in existing API tests.
Advanced Multi-File Editing Techniques
Conditional Transformations
Apply different transformations to different files based on their content or context. Useful for gradual migrations or context-specific changes.
Conditional Logic in Edit Mode:
// Scenario: Different auth patterns in different directories
"Update authentication checks:
For files in src/api/public/:
- No authentication required
- Add rate limiting only
For files in src/api/internal/:
- Require authentication header
- Check user permissions
- Add rate limiting
For files in src/api/admin/:
- Require authentication
- Check admin role
- Check specific permissions
- Add strict rate limiting
- Add audit logging
Follow existing patterns in each directory."
Rollback and Iteration
Edit Mode changes are just git changes. Professional workflow: create branch, apply edits, test, iterate if needed, commit when satisfied.
Safe Refactoring Workflow:
# Create feature branch
git checkout -b refactor/error-handling
# Apply Edit Mode transformations
[Use Copilot Edits for changes]
# Review git diff
git diff
# Run tests
npm test
# If tests fail, analyze
git diff path/to/failing/test.ts
# Option 1: Fix specific files manually
# Option 2: Refine Edit Mode prompt and rerun
git checkout . # Reset all changes
[Run Edit Mode again with refined prompt]
# When satisfied
git add .
git commit -m "Standardize error handling across API routes"
git push origin refactor/error-handling
# Create PR for team review
Combining Edit Mode with Other Copilot Features
Maximum efficiency comes from chaining Copilot features: agent mode for new code, Edit Mode for refactoring, CLI for deployment.
Complete Feature Workflow:
// Step 1: Agent mode creates new feature
Assign issue to Copilot coding agent
Result: New authentication module with 5 files
// Step 2: Edit Mode standardizes with existing code
"Update the new auth module files to match our project
patterns from copilot-instructions.md. Specifically:
- Use our ApiError classes instead of generic Error
- Follow our logging pattern from lib/logger.ts
- Use our database client from lib/db.ts"
// Step 3: Edit Mode applies feature across codebase
"Update all API routes to use the new authentication
middleware from middleware/auth.ts. Replace existing
auth checks with checkAuth() middleware."
// Step 4: CLI for deployment
$ copilot
> Run tests, create PR, deploy to staging if tests pass
// Result: Feature developed, standardized, applied,
// and deployed in fraction of traditional time
Monetization Opportunities
Codebase Modernization Services
Your multi-file editing mastery enables you to modernize entire codebases in days instead of months. Companies with legacy code, outdated dependencies, or accumulated technical debt will pay premium rates for rapid, reliable modernization that doesn't disrupt their business.
Service Package: Legacy Codebase Modernization
Complete codebase transformation—dependency updates, deprecated API removal, security fixes, and modern best practices applied across thousands of files.
- Week 1 - Audit & Planning: Analyze codebase, identify all technical debt, create transformation roadmap with phases
- Weeks 2-3 - Core Transformations: TypeScript migration, dependency updates, API modernization using Edit Mode
- Week 4 - Quality & Testing: Test coverage improvements, performance optimizations, security hardening
- Week 5 - Documentation & Handoff: Update docs, create runbooks, train team on new patterns
Pricing Structure:
Small Codebase: $16,000 - Under 50k lines, 5 weeks, typical startup application
Medium Codebase: $32,000 - 50k-200k lines, 6-7 weeks, established product
Large Codebase: $55,000 - 200k+ lines, 8-10 weeks, enterprise application
Typical Deliverables: Complete TypeScript conversion, all dependencies updated to latest stable versions, deprecated APIs removed, security vulnerabilities fixed, test coverage increased to 80%+, performance optimizations applied, comprehensive documentation of changes.
ROI for Client: Traditional consulting: 6 months × $200/hour × 160 hours = $192,000. Your Edit Mode-accelerated approach: $32,000. Client saves $160,000 and gets results in 1.5 months instead of 6.
Target Clients: Series B+ companies with 3-5 year old codebases. Companies planning IPO or acquisition (code quality due diligence). Teams inheriting legacy systems after M&A.
Recurring Service: Monthly Maintenance Modernization
Ongoing service that keeps codebases modern through monthly transformation sprints, preventing technical debt accumulation.
- Monthly dependency updates: Keep all packages current, handle breaking changes
- Security patch application: Immediate response to CVEs affecting the stack
- Code quality improvements: Gradual application of new best practices
- Performance monitoring & optimization: Monthly performance audit and fixes
Subscription Pricing:
Basic Maintenance: $3,500/month - Dependency updates, security patches, 10 hours of transformation work
Standard Maintenance: $6,500/month - Everything in Basic plus performance optimization, 20 hours of work
Premium Maintenance: $12,000/month - Comprehensive modernization, priority support, 40 hours of work
Value Proposition: Client avoids technical debt accumulation that costs 6-10x more to fix later. Stays current with ecosystem, attracts better talent, maintains velocity as codebase grows.