IDE Integration (VS Code / Cursor Patterns)

IDE Options for AI Development

VS Code Setup

Recommended Extensions

Install these extensions for AI-assisted development:

json
Copy
{
  "recommendations": [
    "github.copilot",
    "continue.continue",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss"
  ]
}

Save as .vscode/extensions.json in your repo.

Settings for AI Development

json
Copy
{
  "editor.inlineSuggest.enabled": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.autoSave": "onFocusChange",
  "git.autofetch": true
}

Cursor Setup

Cursor has AI built-in. Configure it for professional use:

.cursorrules File

# Cursor Rules for This Project

## Code Style
- Use TypeScript strict mode
- Prefer functional components
- Use named exports

## Constraints
- No console.log in production code
- All functions need JSDoc comments
- Maximum file length: 300 lines

## Testing
- Every new function needs a test
- Use describe/it pattern
- Mock external dependencies

## Off-Limits
- Do not modify: package-lock.json
- Do not run: rm -rf, git push --force

Keyboard Shortcuts

Set up efficient shortcuts for AI interactions:

Effective Prompting in IDE

Inline Prompts (Ctrl+K / Cmd+K)

For quick, focused changes:

// Bad: Too vague
add validation

// Good: Specific and constrained
add email validation using regex, return boolean

Chat Prompts

For larger explanations or multi-file work:

Looking at {{file}}:

Goal: {{goal}}

Questions:
1. What's the best approach given existing patterns?
2. Are there edge cases I should handle?
3. What tests should I add?

Context Management

Including Context

Most AI integrations let you reference files:

• @file.ts - Reference a specific file
• @folder/ - Reference a directory
• @selection - Reference selected code

Excluding Noise

Keep context focused:

• Don't include unrelated files
• Reference specific functions, not whole files
• Clear chat history when switching tasks

Multi-File Operations

For changes across multiple files:

1. Plan first - Use chat to outline the approach
2. One file at a time - Apply changes incrementally
3. Test between changes - Don't batch too much
4. Commit checkpoints - Small commits for rollback

Terminal Integration

For AI CLI tools (Claude Code, aider):

json
Copy
{
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Workspace Settings

Save project-specific AI settings:

json
Copy
// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true
  }
}

Verify

Your IDE is properly configured if:

• AI suggestions appear inline as you type
• You can open AI chat with a keyboard shortcut
• Format-on-save is working
• You have .cursorrules or equivalent

Next: Learn about MCP (Model Context Protocol) and Skills architecture for advanced integrations.