✨ Overview
DevFest is a carefully crafted extension pack that bundles 53 essential VS Code extensions for full-stack web developers. Whether you're building with JavaScript/React, PHP/Laravel, Python, or modern web technologies — DevFest has you covered.
┌─────────────────────────────────────────────────────────────┐
│ 🎉 DevFest │
├─────────────────────────────────────────────────────────────┤
│ 📦 53 Extensions │ ⚙️ Auto Settings │ 🎯 18 Categories │
├─────────────────────────────────────────────────────────────┤
│ JavaScript │ React │ PHP │ Laravel │ Python │ Tailwind CSS │
└─────────────────────────────────────────────────────────────┘
🚀 Features
📦 Extension Pack
- 53 hand-picked extensions
- Full-stack development support
- One-click installation
|
⚙️ Auto Settings
- Category-based selection
- Settings preview
- Apply selectively
|
🎯 18 Categories
- Editor Settings
- Workbench & UI
- Git & Version Control
- JavaScript/TypeScript
- Tailwind CSS
- And more...
|
🎨 Developer Experience
- Material Icon Theme
- Palenight Theme
- Better Comments
- Error Lens
|
📊 Extension Breakdown
pie title Extensions by Category
"Code Editing & Formatting" : 8
"JavaScript/React" : 8
"HTML/CSS/Web" : 13
"Productivity & Utilities" : 19
"Themes & Icons" : 2
| Category |
Count |
Key Extensions |
| Code Editing & Formatting |
8 |
Prettier, ESLint, Error Lens, Better Comments |
| JavaScript / React |
8 |
ES7+ Snippets, Auto Import, TypeScript |
| HTML / CSS / Web |
13 |
Tailwind CSS, Live Server, shadcn/ui |
| Productivity & Utilities |
19 |
Copilot, GitLens, Code Runner |
| Themes & Icons |
2 |
Material Icon Theme, Palenight |
| Total |
53 |
|
🔄 How It Works
flowchart TD
A[Install DevFest] --> B{First Activation}
B -->|Prompt| C{User Choice}
C -->|Choose Categories| D[Select Categories]
C -->|Apply All| E[Apply All Settings]
C -->|Skip| F[Configure Later]
D --> G[Preview Settings]
G -->|Confirm| H[Apply Selected]
G -->|Cancel| F
E --> I[Apply 400+ Settings]
H --> J[✅ Done!]
I --> J
F --> K[Manual: DevFest Commands]
style A fill:#7c3aed,stroke:#7c3aed,color:#fff
style J fill:#10b981,stroke:#10b981,color:#fff
style F fill:#6b7280,stroke:#6b7280,color:#fff
📦 Included Extensions
⚛️ JavaScript / React
🎨 HTML / CSS / Web Development
🚀 Productivity & Utilities
🎨 Themes & Icons
⚙️ Settings Categories
DevFest includes 400+ recommended settings organized into 18 categories:
graph LR
A[DevFest Settings] --> B[Editor]
A --> C[Workbench]
A --> D[Git]
A --> E[Terminal]
A --> F[Files]
A --> G[JavaScript]
A --> H[Tailwind]
A --> I[AI Tools]
A --> J[CodeGeeX]
A --> K[More...]
style A fill:#7c3aed,stroke:#7c3aed,color:#fff
style B fill:#3b82f6,stroke:#3b82f6,color:#fff
style C fill:#3b82f6,stroke:#3b82f6,color:#fff
style D fill:#3b82f6,stroke:#3b82f6,color:#fff
| Category |
Settings |
Description |
| Editor Settings |
36 |
Cursor, font, formatting, linting |
| Workbench & UI |
14 |
Themes, icons, layout |
| File Explorer |
6 |
Explorer behavior |
| Git & Version Control |
10 |
Git integration |
| Terminal |
3 |
Terminal config |
| File Handling |
6 |
File associations, auto-save |
| Code Runner |
3 |
Code execution |
| ESLint |
1 |
Linting config |
| Better Comments |
1 |
Comment styling |
| Spell Check |
8 |
cSpell settings |
| Language Formatters |
8 |
Default formatters |
| Emmet |
2 |
Emmet config |
| JavaScript/TypeScript |
7 |
JS/TS IntelliSense |
| Tailwind CSS |
4 |
Tailwind config |
| Mobile Preview |
2 |
Mobile devices |
| CodeGeeX |
13 |
AI assistant |
| AI Tools |
5 |
Copilot, GitLens AI |
| Miscellaneous |
16 |
Other settings |
📥 Installation
Method 1: VS Code Marketplace
1. Open VS Code
2. Press Ctrl+Shift+X (Extensions)
3. Search "DevFest"
4. Click Install
Method 2: VSIX File
# Download and install
code --install-extension devfest-extension-pack-1.0.4.vsix
Method 3: Command Line
| Editor |
Command |
| VS Code |
code --install-extension exthub-ahmad-pack.devfest-extension-pack |
| Insiders |
code-insiders --install-extension exthub-ahmad-pack.devfest-extension-pack |
| Cursor |
cursor --install-extension exthub-ahmad-pack.devfest-extension-pack |
🔧 Configuration
Apply Settings
After installation, use these commands:
| Command |
Description |
DevFest: Apply Settings by Category |
Choose which settings to apply |
DevFest: Apply All Settings |
Apply all 400+ settings |
Workflow
┌──────────────────────────────────────────────────────────────┐
│ Settings Workflow │
├──────────────────────────────────────────────────────────────┤
│ │
│ 1. Install DevFest │
│ ↓ │
│ 2. First activation → Prompt │
│ ↓ │
│ 3. Choose: Categories / All / Skip │
│ ↓ │
│ 4. Preview → Confirm → Apply │
│ ↓ │
│ 5. ✅ Ready to code! │
│ │
└──────────────────────────────────────────────────────────────┘
🖥️ Compatibility
| Editor |
Status |
| VS Code (Stable) |
✅ |
| VS Code Insiders |
✅ |
| Cursor |
✅ |
| Windsurf |
✅ |
| VSCodium |
✅ |
| GitHub Codespaces |
✅ |
📈 Stats
┌─────────────────────────────────────────┐
│ DevFest Stats │
├─────────────────────────────────────────┤
│ 📦 Extensions: 53 │
│ ⚙️ Settings: 400+ │
│ 📁 Categories: 18 │
│ 📝 Languages: JS, PHP, Python │
│ 🎨 Themes: 2 │
│ 🔧 Productivity: 19 tools │
└─────────────────────────────────────────┘
🤝 Contributing
Suggestions are welcome!
- Open an issue
- Describe the extension
- Explain why it should be added
📄 License
MIT License — see LICENSE
