# Setting Up Your Code Editor

<!-- <div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="https://plebdevs.com/api/get-video-url?videoKey=starter-lesson-1.mp4" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;" controls=""></video></div> -->

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-1.mp4" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;" controls=""></video></div>

## Introduction
In this lesson, we'll set up the most fundamental tool in your development journey: your code editor. This is where you'll spend most of your time writing, testing, and debugging code, so it's crucial to get comfortable with it from the start.

## What is an IDE?

### Definition
An IDE (Integrated Development Environment) is a software application that provides comprehensive facilities for software development. Think of it as your complete workshop for writing code.

### Key Components
1. **Code Editor**
   - Where you write and edit code
   - Provides syntax highlighting
   - Helps with code formatting
   - Makes code easier to read and write

2. **Compiler/Interpreter**
   - Runs your code
   - Translates your code into executable instructions
   - Helps test your applications

3. **Debugging Tools**
   - Help find and fix errors
   - Provide error messages and suggestions
   - Make problem-solving easier

## Setting Up Visual Studio Code

### Why VS Code?
- Free and open-source
- Lightweight yet powerful
- Excellent community support
- Popular among developers
- Great for beginners and experts alike

### Installation Steps
1. Visit [code.visualstudio.com](https://code.visualstudio.com)
2. Download the version for your operating system
3. Run the installer
4. Follow the installation prompts

### Essential VS Code Features

#### 1. Interface Navigation
- **File Explorer** (Ctrl/Cmd + Shift + E)
  - Browse and manage your files
  - Create new files and folders
  - Navigate your project structure

- **Search** (Ctrl/Cmd + Shift + F)
  - Find text across all files
  - Replace text globally
  - Search with regular expressions

- **Source Control** (Ctrl/Cmd + Shift + G)
  - Track changes in your code
  - Commit and manage versions
  - Integrate with Git

#### 2. Terminal Integration
To open the integrated terminal:
- Use ``` Ctrl + ` ``` (backtick)
- Or View → Terminal from the menu
- Basic terminal commands:
  ```bash
  ls      # List files (dir on Windows)
  cd      # Change directory
  clear   # Clear terminal
  code .  # Open VS Code in current directory
  ```

#### 3. Essential Extensions
Install these extensions to enhance your development experience:
1. **ESLint**
   - Helps find and fix code problems
   - Enforces coding standards
   - Improves code quality

2. **Prettier**
   - Automatically formats your code
   - Maintains consistent style
   - Saves time on formatting

3. **Live Server**
   - Runs your web pages locally
   - Auto-refreshes on save
   - Great for web development

### Important Keyboard Shortcuts
```
Ctrl/Cmd + S          # Save file
Ctrl/Cmd + C          # Copy
Ctrl/Cmd + V          # Paste
Ctrl/Cmd + Z          # Undo
Ctrl/Cmd + Shift + P  # Command palette
Ctrl/Cmd + P          # Quick file open
```

## Writing Your First Code
Let's create and run a simple HTML file:

1. Create a new file (`index.html`)
2. Add basic HTML content:
   ```html
   <h1>Hello World!</h1>
   ```
3. Save the file (Ctrl/Cmd + S)
4. Open in browser or use Live Server

## Best Practices

### 1. File Organization
- Keep related files together
- Use clear, descriptive names
- Create separate folders for different projects

### 2. Regular Saving
- Save frequently (Ctrl/Cmd + S)
- Watch for the unsaved dot indicator
- Enable auto-save if preferred

### 3. Terminal Usage
- Get comfortable with basic commands
- Use the integrated terminal
- Practice navigation and file operations

## Troubleshooting Common Issues

### 1. Installation Problems
- Ensure you have admin rights
- Check system requirements
- Use official download sources

### 2. Extension Issues
- Keep extensions updated
- Disable conflicting extensions
- Restart VS Code after installation

### 3. Performance
- Don't install too many extensions
- Regular restart of VS Code
- Keep your system updated

## Next Steps

1. **Practice Navigation**
   - Create and manage files
   - Use the integrated terminal
   - Try keyboard shortcuts

2. **Customize Your Editor**
   - Explore themes
   - Adjust font size
   - Configure auto-save

3. **Prepare for Next Lesson**
   - Keep VS Code open
   - Get comfortable with the interface
   - Practice basic operations

## Additional Resources
- [VS Code Documentation](https://code.visualstudio.com/docs)
- [Keyboard Shortcuts Reference](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
- [VS Code Tips and Tricks](https://code.visualstudio.com/docs/getstarted/tips-and-tricks)

Remember: Your code editor is your primary tool as a developer. Take time to get comfortable with it, and don't worry about mastering everything at once. Focus on the basics we covered in the video, and you'll naturally learn more features as you need them.

Happy coding! 🚀