# Setting Up Your Development Environment for Vibe Coding
Your development environment is the foundation of successful vibe coding. While AI tools can generate impressive code, the right setup determines whether you'll spend your time building or battling with tooling. This guide will walk you through choosing and configuring the tools that will make your AI-assisted development workflow smooth and productive.
## Understanding the Vibe Coding Stack
Before diving into specific tools, let's clarify what you actually need. A vibe coding environment consists of three core layers:
1. **Your code editor or IDE** - Where you write prompts and review AI-generated code
2. **AI coding assistant** - The tool that generates, explains, and modifies code
3. **Supporting tools** - Version control, terminal, testing frameworks, and documentation
The key insight: you don't need everything at once. Start minimal, then expand as you discover what accelerates your workflow.
## Choosing Your Code Editor
Your editor is where you'll spend most of your time, so this choice matters. The good news? Most modern editors now support AI assistants.
### VS Code: The Default Choice
Visual Studio Code dominates AI-assisted development for good reasons:
- **Universal AI support**: GitHub Copilot, Cursor integration, Continue.dev, and dozens of other extensions
- **Massive ecosystem**: Extensions for every language and framework
- **Free and open source**: No licensing costs
- **Active community**: Solutions to problems are a search away
**When to choose VS Code**: You're starting out, working across multiple languages, or want maximum flexibility.
### Cursor: AI-First Experience
Cursor is VS Code's AI-native cousin - a fork specifically designed for AI-assisted coding:
- **Built-in AI chat**: No extension configuration needed
- **Codebase-aware prompting**: Automatically understands your project structure (more on this in [codebase-aware-prompting](codebase-aware-prompting))
- **Composer mode**: Generate multi-file changes with one prompt
- **Tab completion**: Context-aware code suggestions
**When to choose Cursor**: You want the fastest path to productive vibe coding and don't mind a subscription.
### JetBrains IDEs: Power User Territory
IntelliJ IDEA, PyCharm, WebStorm, and other JetBrains IDEs offer robust AI integration:
- **Superior refactoring**: Industry-leading code intelligence
- **JetBrains AI Assistant**: Deep integration with the IDE's features
- **Language-specific power**: Best-in-class support for Java, Kotlin, Python, etc.
**When to choose JetBrains**: You're working primarily in one language and need advanced refactoring and debugging tools.
### Practical Setup Example
Let's set up VS Code as a concrete example:
```bash
# Install VS Code (macOS example)
brew install --cask visual-studio-code
# Launch VS Code
code .
```
Install essential extensions:
```json
// .vscode/extensions.json - Recommended extensions for your team
{
"recommendations": [
"github.copilot",
"github.copilot-chat",
"continue.continue",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"eamodio.gitlens"
]
}
```
This setup gives you AI assistance (Copilot and Continue), code quality tools (ESLint, Prettier), and version control visibility (GitLens).
## Selecting Your AI Coding Assistant
This is where the magic happens. Different assistants excel at different tasks, and many developers use multiple tools.
### GitHub Copilot: The Workhorse
GitHub Copilot works in virtually every editor and excels at:
- **Inline suggestions**: As you type, it predicts your next lines
- **Function completion**: Start a function signature, get the implementation
- **Test generation**: Write test boilerplate quickly
- **Language versatility**: Strong across most mainstream languages
**Practical example**:
```python
# Type this comment:
# Function to calculate fibonacci numbers up to n
# Copilot suggests:
def fibonacci(n):
if n <= 0:
return []
elif n == 1:
return [0]
elif n == 2:
return [0, 1]
fib = [0, 1]
for i in range(2, n):
fib.append(fib[i-1] + fib[i-2])
return fib
```
**Cost**: $10/month individual, $19/month for Copilot Business
### Claude (via Cursor, Continue, or API)
Claude excels at understanding complex codebases and following detailed instructions:
- **Long context windows**: Handles entire files or multiple files at once (learn more in [context-window-management](context-window-management))
- **Reasoning capability**: Excellent at architectural decisions
- **Natural conversation**: Great for exploratory development
**When to use Claude**: Complex refactoring, architectural planning, or when you need to discuss trade-offs. See [model-capabilities](model-capabilities) for deeper comparison.
### ChatGPT/GPT-4: The Generalist
OpenAI's models are strong all-rounders:
- **Broad knowledge**: Trained on diverse codebases
- **Clear explanations**: Excellent at teaching and explaining code
- **Canvas mode**: Iterate on code in a dedicated interface
**Practical workflow**:
```markdown
I need a React component that displays a user profile card with:
- Avatar image
- Name and title
- Email (clickable)
- Social media links
- Responsive design for mobile
Use TypeScript and Tailwind CSS.
```
GPT-4 will generate a complete component you can copy into your project. This works great for [component-generation](component-generation).
### Continue.dev: The Open Source Option
Continue is a VS Code extension that connects to multiple AI providers:
- **Provider flexibility**: Use OpenAI, Anthropic, local models, or others
- **Customizable**: Configure per your needs
- **Free tier available**: Use your own API keys
**Setup example**:
```json
// ~/.continue/config.json
{
"models": [
{
"title": "Claude 3.5 Sonnet",
"provider": "anthropic",
"model": "claude-3-5-sonnet-20241022",
"apiKey": "your-api-key"
},
{
"title": "GPT-4",
"provider": "openai",
"model": "gpt-4",
"apiKey": "your-api-key"
}
],
"tabAutocompleteModel": {
"title": "Codestral",
"provider": "mistral",
"model": "codestral-latest"
}
}
```
This gives you Claude for complex tasks and a faster model for autocomplete.
## Essential Supporting Tools
AI assistants are powerful, but they work best within a solid development workflow.
### Version Control: Git is Non-Negotiable
AI-generated code needs version control even more than hand-written code. You'll want to:
- **Review before committing**: AI can generate bugs or security issues
- **Commit frequently**: Small commits make it easy to revert AI mistakes
- **Use branches**: Experiment with AI suggestions without risk
**Practical workflow**:
```bash
# Create a feature branch for AI-assisted work
git checkout -b feature/ai-user-authentication
# Let AI generate authentication code
# Review the changes
git diff
# Commit in small, logical chunks
git add src/auth/login.ts
git commit -m "Add login form component (AI-generated, reviewed)"
# If AI made a mistake, easy rollback
git revert HEAD
```
Learn more about using version control with AI in [version-control-ai](version-control-ai).
### Terminal: Your Command Center
A good terminal setup accelerates your workflow:
- **Modern shells**: zsh (macOS default) or fish offer better autocomplete
- **Terminal multiplexing**: tmux or built-in editor terminals
- **AI in terminal**: Tools like GitHub Copilot CLI or Warp AI
**Example .zshrc additions**:
```bash
# Useful aliases for AI-assisted development
alias gd='git diff'
alias gdc='git diff --cached'
alias gs='git status -sb'
alias gl='git log --oneline --graph -10'
# Quick access to AI chat (if using Cursor)
alias ai='cursor --chat'
```
### Testing Frameworks: Trust but Verify
AI-generated code needs testing. Set up your testing environment from day one:
**JavaScript/TypeScript**:
```bash
npm install --save-dev vitest @testing-library/react @testing-library/jest-dom
```
**Python**:
```bash
pip install pytest pytest-cov
```
**Example test workflow**:
```typescript
// Let AI generate the function
export function calculateDiscount(price: number, percentage: number): number {
return price * (1 - percentage / 100);
}
// Then prompt: "Generate tests for calculateDiscount function"
import { describe, it, expect } from 'vitest';
import { calculateDiscount } from './discount';
describe('calculateDiscount', () => {
it('calculates 10% discount correctly', () => {
expect(calculateDiscount(100, 10)).toBe(90);
});
it('handles 0% discount', () => {
expect(calculateDiscount(100, 0)).toBe(100);
});
it('handles 100% discount', () => {
expect(calculateDiscount(100, 100)).toBe(0);
});
});
```
More on this in [testing-strategies](testing-strategies).
### Documentation Tools: Keep Context Clear
AI assistants work better with good documentation. Set up:
- **README.md**: Project overview, setup instructions
- **Architecture docs**: High-level design (see [ai-architecture](ai-architecture))
- **API documentation**: JSDoc, docstrings, or tools like TypeDoc
**Example documentation that helps AI**:
```typescript
/**
* Authenticates a user with email and password.
*
* @param email - User's email address
* @param password - Plain text password (will be hashed)
* @returns Promise resolving to authenticated user object
* @throws {AuthenticationError} If credentials are invalid
* @throws {DatabaseError} If database connection fails
*
* @example
* ```ts
* const user = await authenticateUser('user@example.com', 'password123');
* console.log(user.id);
* ```
*/
export async function authenticateUser(
email: string,
password: string
): Promise {
// Implementation here
}
```
This documentation helps both humans and AI understand how to use your code. Learn more in [doc-generation](doc-generation).
## Configuring Your Environment
### Project-Level Configuration
Create consistent setups across projects:
```json
// package.json scripts for AI-friendly workflow
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"test": "vitest",
"test:ui": "vitest --ui",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"format": "prettier --write \"src/**/*.{ts,tsx,json,css}\"",
"type-check": "tsc --noEmit"
}
}
```
This setup ensures AI-generated code gets properly checked:
```bash
# After AI generates code
npm run format # Auto-format to project standards
npm run lint # Catch common issues
npm run type-check # Verify TypeScript types
npm run test # Run tests
```
### Environment Variables for AI Tools
Keep API keys secure and organized:
```bash
# .env.local (never commit this!)
ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...
GITHUB_TOKEN=ghp_...
# Add to .gitignore
echo '.env.local' >> .gitignore
```
### Editor Settings for AI Assistance
```json
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"github.copilot.enable": {
"*": true,
"yaml": false, // Disable for config files if you prefer
"markdown": true
},
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
"comments": true // Get AI help in comments
}
}
```
## Your First Vibe Coding Session
Let's put it all together with a real example. We'll build a simple todo API.
**1. Set up the project:**
```bash
mkdir vibe-todo-api
cd vibe-todo-api
npm init -y
npm install express typescript @types/express @types/node
npm install --save-dev tsx nodemon
git init
```
**2. Prompt your AI assistant:**
```markdown
Create a TypeScript Express API with the following:
- GET /todos - list all todos
- POST /todos - create a new todo
- PUT /todos/:id - update a todo
- DELETE /todos/:id - delete a todo
Use in-memory storage for now. Include proper TypeScript types.
```
**3. Review and refine:**
The AI will generate the code. Review it, then prompt for improvements:
```markdown
Add input validation using Zod.
Add error handling middleware.
Add request logging.
```
**4. Test and commit:**
```bash
# Test the generated code
npm run dev
# Review what was created
git diff
# Commit working code
git add .
git commit -m "Initial API setup with AI assistance"
```
This workflow - setup, prompt, review, refine, test, commit - becomes your vibe coding rhythm.
## Common Setup Mistakes to Avoid
### Mistake 1: Installing Everything at Once
Don't install every AI tool on day one. Start with one assistant (GitHub Copilot is a safe bet), learn it well, then expand.
### Mistake 2: Skipping Version Control
AI makes mistakes. Without Git, you can't easily undo them. Initialize a repo before writing any code.
### Mistake 3: No Code Quality Tools
AI-generated code needs linting and formatting. Set up ESLint/Prettier (JavaScript) or Black/Ruff (Python) immediately.
### Mistake 4: Ignoring Testing Setup
Don't wait until "later" to add testing. Generate tests alongside code from day one. See [testing-strategies](testing-strategies) for more.
### Mistake 5: Over-Reliance on Defaults
Customize your setup. AI assistants work better when configured for your specific needs. Learn more in [over-reliance](over-reliance) about finding the right balance.
## Next Steps: Making Your Environment Work for You
You now have a solid foundation. Here's how to level up:
1. **Learn your AI's strengths**: Spend time understanding what your chosen assistant does best (see [model-capabilities](model-capabilities))
2. **Build your prompt library**: Save effective prompts for common tasks (covered in [clear-instructions](clear-instructions))
3. **Optimize your workflow**: Identify bottlenecks and address them (see [team-workflows](team-workflows))
4. **Stay updated**: AI tools evolve rapidly; review changelogs monthly
Your environment isn't static. As you grow as a vibe coder, your tools should evolve with you. Start simple, measure what works, and continuously refine.
## Conclusion: Your Environment Enables Everything
The right development environment doesn't just make vibe coding possible - it makes it joyful. You've now learned:
- How to choose an editor that supports your AI workflow
- Which AI assistants excel at different tasks
- Essential supporting tools for quality and productivity
- How to configure everything to work together
- A practical workflow to start building immediately
Remember: the best environment is the one you'll actually use. Start with the basics covered here, build something real, and adjust based on what slows you down.
Ready to understand what's happening under the hood? Continue to [model-capabilities](model-capabilities) to learn how AI assistants actually work, or jump to [clear-instructions](clear-instructions) to start writing better prompts immediately.
Now go set up your environment and start building. Your first AI-assisted project awaits.