VS Code extension (video tutorial)

Overview

The Cloudinary VS Code extension brings media asset management directly into your integrated development environment. Browse, search, upload, and reference your Cloudinary assets without ever leaving your coding workflow.

This tutorial walks you through installation, configuration, and key features of the extension, showing you how to streamline your media management within VS Code.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

0:00	The Cloudinary VS Code extension brings media asset management directly into your IDE. Browse, search, upload, and reference your Cloudinary assets without ever leaving your coding workflow, streamlining your development process.

Installation

0:21	To get started, search for "Cloudinary" in the VS Code extensions marketplace and click install. Once installed, you'll see the Cloudinary icon appear in your activity bar, giving you quick access to your media assets.

Configuration

0:32	Configure your Cloudinary credentials including cloud name, API key, and API secret. You can retrieve these values from the API Keys page of the Cloudinary Console Settings and add them to your environments.json file to connect the extension to your account.

Browsing your asset library

0:54	The extension provides a comprehensive asset browser where you can navigate through your media library. Preview images and videos directly within VS Code without switching contexts, and easily view tags and metadata for each asset.

Uploading assets

1:15	Upload new assets directly from VS Code using the upload dialog. Your assets are immediately available in your Cloudinary Media Library and can be referenced in your code right away.

Working with multiple environments

1:34	If you work across multiple product environments, you can easily switch between them from the status bar. Your asset tree updates instantly to reflect the selected environment, making it simple to work with different Cloudinary accounts or configurations.

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.