{"id":38883,"date":"2025-10-23T07:00:00","date_gmt":"2025-10-23T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=38883"},"modified":"2026-03-17T16:24:57","modified_gmt":"2026-03-17T23:24:57","slug":"cloudinary-vs-code-extension","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/cloudinary-vs-code-extension","title":{"rendered":"Introducing the Cloudinary VS Code Extension: Manage Your Media Development Flow Without Leaving Your IDE!"},"content":{"rendered":"

Context switching kills productivity. You\u2019re deep in code when you need to upload an image, grab a URL for a video, or find an asset in your Cloudinary account. Browser tabs pile up, you lose your place, and what should be a 30-second task becomes a five-minute detour.<\/p>\n

The Cloudinary VS Code Extension solves this.<\/strong><\/p>\n

Our new VS Code extension (Beta) brings essential Cloudinary operations directly into your editor. Find and preview assets, copy URLs, upload files, or switch environments, all from inside VS Code. No more jumping between your IDE and browser just to work with media assets. Just code and media, in one place.<\/p>\n

See it in action\u2026<\/p>\n<\/div>\n\n\n <\/video>\n <\/cld-video-player>\n\n

Typical Developer Workflow<\/h2>\n

Theory is nice, but here\u2019s what it actually looks like when you\u2019re building:<\/p>\n

    \n
  1. Start coding with media assets. You need specific images or videos, but you\u2019re not sure what\u2019s already available in your account.<\/li>\n
  2. Open the Cloudinary extension and browse through your folders, the same structure you see in the Console, now right in your editor. Find the assets you need organized exactly as expected.<\/li>\n
  3. Preview assets before committing your code. Click any image or video to verify it\u2019s the right one and see how it looks with Cloudinary\u2019s optimizations applied.<\/li>\n
  4. Right-click any asset and copy its public ID or optimized URL. Paste it directly into your code, whether you\u2019re using image\/video tags or Cloudinary SDKs. No manual URL construction, no switching to your browser to hunt for assets.<\/li>\n
  5. Upload new assets when you need something that doesn\u2019t exist yet. Click Upload, select your preset, and add your files. They appear in the tree view immediately, ready to reference.<\/li>\n<\/ol>\n

    All without leaving your IDE. No browser tabs. No breaking your focus. Just seamless media workflow integrated into your development process.<\/p>\n<\/div>\n\n

    \n
    \"\"<\/figure><\/div>\n\n

    Integration With Existing Tools<\/h2>\n

    The extension complements other Cloudinary developer tools:<\/p>\n