DevStock — Stock Images for VS Code

The ultimate stock image companion for developers. Search, Preview, and Insert high-quality images without leaving your editor.

---

DevStock is a powerful VS Code extension that integrates Unsplash, Pexels, and Pixabay directly into your workflow. Whether you're building a landing page, writing markdown documentation, or styling a React component, DevStock helps you find and insert perfect placeholder images in seconds.

✨ 1.0.0 Features

• 🔍 Triple-Engine Search — Unified access to Unsplash, Pexels, and Pixabay.
• 🖼️ Premium Lightbox — Click any image to view it in a stunning fullscreen, high-resolution preview.
• 📋 Context-Aware Insertion — Automatically detects your file type:
  • HTML: <img src="..." alt="..." />
  • Markdown: ![alt](url)
  • CSS: background-image: url('...') (Smart-detects if you're already inside url())
  • JSX/React: src={...} support.
  • URL: Just the clean source link.
• 💾 Local Downloads — Save images directly to your project. The extension tracks local files and intelligently switches to local paths in your code.
• ⚡ Magic Trigger — Type {/img} in any file to instantly open search. Fully customizable in settings.
• ⌨️ Keyboard Navigation — Navigate results with arrow keys, preview with Enter, and close with Escape.
• 🛡️ Rate Limit Awareness — Real-time tracking of API usage so you never hit a wall mid-search.

🚀 Installation & Quick Start

1. Install the extension from the VS Code Marketplace.
2. Ready to Go — DevStock comes with built-in API keys. Just install and start searching!
3. Open Explorer: Use the Activity Bar icon or press Ctrl + Shift + I.

💡 Power Users: For higher rate limits, you can add your own API keys in Settings → DevStock from Unsplash, Pexels, or Pixabay.

⚙️ Configuration

Setting	Description	Default
devstock.defaultProvider	Start search on this provider	unsplash
devstock.downloadPath	Project folder for downloads	images
devstock.triggerPattern	The magic string to open sidebar	{/img}
devstock.enableTrigger	Toggle the auto-open feature	true

🏗️ For Developers

DevStock is built with modern TypeScript, esbuild, and Vanilla CSS for a lightning-fast experience.

# Clone and install
git clone https://github.com/AvTe/DevStock.git
cd DevStock
npm install

# Build & Run
npm run compile
# Press F5 to launch Extension Development Host

📝 License

Distributed under the MIT License. See LICENSE for more information.

---

Crafted with ❤️ for the Developer Community