Copilot Edits

Traditional Completions:
  One file → One suggestion

Copilot Edits:
  Your request → Multiple file changes
                 ├── Create new files
                 ├── Modify existing files
                 └── Coordinated updates

/edit Add error handling to all API routes

Cmd/Ctrl+Shift+P → "GitHub Copilot: Edit"

1. Open Copilot Edits panel
2. Describe your change
3. Optionally reference files
4. Submit request

┌────────────────────────────────────────────────────────────┐
│ Copilot Edits                                              │
├────────────────────────────────────────────────────────────┤
│                                                            │
│ Your request: "Add logging to all service methods"        │
│                                                            │
│ Proposed changes:                                          │
│                                                            │
│ ✓ src/services/user.service.ts              [View diff]   │
│   + Added console.log at method entry/exit                │
│                                                            │
│ ✓ src/services/order.service.ts             [View diff]   │
│   + Added console.log at method entry/exit                │
│                                                            │
│ ✓ src/services/payment.service.ts           [View diff]   │
│   + Added console.log at method entry/exit                │
│                                                            │
│                    [Accept All] [Reject] [Modify]          │
└────────────────────────────────────────────────────────────┘

Add user authentication to all protected routes.
Use the authMiddleware from lib/auth.

// routes/users.ts - Before
export async function GET(request: Request) {
  const users = await getUsers()
  return Response.json(users)
}

// routes/users.ts - After
import { authMiddleware } from '@/lib/auth'

export const GET = authMiddleware(async (request: Request) => {
  const users = await getUsers()
  return Response.json(users)
})

Refactor all useState + useEffect patterns to use useSWR for data fetching

const [users, setUsers] = useState([])
const [loading, setLoading] = useState(true)

useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(setUsers)
    .finally(() => setLoading(false))
}, [])

const { data: users, isLoading: loading } = useSWR('/api/users', fetcher)

Add TypeScript types to all functions in lib/utils.ts

Update all form submissions to use react-hook-form instead of controlled inputs

Create unit tests for all functions in src/lib/calculations.ts

src/
├── lib/
│   └── calculations.ts (existing)
└── tests/
    └── lib/
        └── calculations.test.ts (new)

Add error handling to #file:src/services/user.ts
and #file:src/services/order.ts

Add JSDoc comments to all exported functions in the services folder

Create a new ProductCard component with:
- Component file
- Styles file
- Test file
- Storybook story

components/
└── ProductCard/
    ├── ProductCard.tsx
    ├── ProductCard.module.css
    ├── ProductCard.test.tsx
    └── ProductCard.stories.tsx

Step 1: "Add the base logger utility"
Review → Accept

Step 2: "Use the logger in user service"
Review → Accept

Step 3: "Use the logger in remaining services"
Review → Accept

❌ "Add validation everywhere"
✅ "Add Zod validation to the checkout API route"

/explain What files would be affected by changing the User type?

[Review list]

/edit Update User type to include lastLoginAt field

// src/services/user.ts
+ import { logger } from '@/lib/logger'

  export async function createUser(data: CreateUserInput) {
+   logger.info('Creating user', { email: data.email })
    const user = await prisma.user.create({ data })
+   logger.info('User created', { id: user.id })
    return user
  }

✓ Accept: user.service.ts    - Looks good
✓ Accept: order.service.ts   - Looks good
✗ Reject: payment.service.ts - Needs different approach

Add rate limiting to all POST endpoints, but not GET endpoints

Add audit logging that tracks:
- Who made the change (userId)
- What changed (before/after values)
- When it changed (timestamp)

Apply to all database write operations.

Convert all API routes from REST to tRPC.
Keep the same functionality but use the tRPC patterns
shown in #file:src/trpc/routers/example.ts

Migrate from Moment.js to date-fns.
Update all date formatting and manipulation.

❌ "Make it better"
✅ "Add error handling with try/catch blocks and proper error types"

❌ "Update the code"
✅ "Update useState to useReducer for complex state management"

Use the same pattern as #file:src/services/user.service.ts
for the new product service

1. Check each file's changes
2. Look for unintended modifications
3. Verify imports are correct
4. Ensure tests still pass

❌ "Refactor the entire codebase"
✅ "Refactor the user module to use the repository pattern"

Then: "Refactor the order module"
Then: "Refactor the product module"

1. Check if file is read-only
2. Verify file path is correct
3. Try smaller change set
4. Reload VS Code

1. Reject the changes
2. Be more specific in request
3. Reference example files
4. Break into smaller edits

If edits seem incomplete:
1. Make follow-up request
2. Specify missing files
3. Provide more context