Thank you for your interest in contributing to the Cloudinary VS Code extension! This guide will help you get started with contributing to the project.
- Getting Started
- Development Setup
- Development Workflow
- Submitting Changes
- Reporting Issues
- Feature Requests
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher)
- npm (comes with Node.js)
- Visual Studio Code (latest version)
- Git
-
Fork the repository
# Fork the repo on GitHub, then clone your fork git clone https://github.com/YOUR_USERNAME/cloudinary-vscode.git cd cloudinary-vscode
-
Install dependencies
npm install
-
Set up Cloudinary credentials Create a global configuration file at:
- macOS/Linux:
~/.cloudinary/environments.json - Windows:
%USERPROFILE%\.cloudinary\environments.json
{ "your-cloud-name": { "apiKey": "your-api-key", "apiSecret": "your-api-secret" } }Note: The cloud name is the key (the property name). You can optionally add
"uploadPreset"if you want a default preset. - macOS/Linux:
-
Build the extension
npm run compile
-
Run the extension
- Press
F5in VS Code to launch a new Extension Development Host window - Test your changes in this new window
- Press
- Compile TypeScript:
npm run compile - Watch mode (auto-compile on changes):
npm run watch - Prepare for publishing:
npm run vscode:prepublish
-
Launch Extension Development Host:
- Open the project in VS Code
- Press
F5or run "Debug: Start Debugging" - This opens a new VS Code window with your extension loaded
-
Test your changes:
- Open the Cloudinary view in the Activity Bar
- Test various commands and functionality
- Check the Debug Console for logs and errors
-
Reload extension (after code changes):
- In the Extension Development Host window, press
Ctrl+R/Cmd+R - Or use "Developer: Reload Window" command
- In the Extension Development Host window, press
- Use the built-in VS Code extension APIs
- Follow VS Code's UX guidelines for consistency
- Handle errors gracefully with user-friendly messages
-
Create a feature branch
git checkout -b feature/your-feature-name
-
Make your changes
- Follow the code style guidelines
- Add tests for new functionality
- Update documentation if needed
-
Commit your changes
git add . git commit -m "feat: add new feature description"
-
Push to your fork
git push origin feature/your-feature-name
-
Create a Pull Request
- Go to GitHub and create a PR from your fork
- Fill out the PR template completely
- Link any related issues
Use conventional commits format:
type(scope): description
[optional body]
[optional footer]
Types:
feat: New featurefix: Bug fixdocs: Documentation changesstyle: Code style changes (formatting, etc.)refactor: Code refactoringtest: Adding or updating testschore: Maintenance tasks
Examples:
feat(upload): add upload preset selectionfix(tree): resolve folder loading issuedocs(readme): update installation instructions
When reporting bugs, please include:
-
Environment details:
- VS Code version
- Extension version
- Operating system
- Node.js version
-
Steps to reproduce:
- Clear, step-by-step instructions
- Expected vs actual behavior
- Screenshots/videos if helpful
-
Cloudinary setup:
- Are you using a valid Cloudinary account?
- Any specific folder structure or asset types?
-
Logs and errors:
- Check VS Code Developer Tools (Help > Toggle Developer Tools)
- Include relevant console errors
We welcome feature requests! When submitting one:
- Search existing issues first to avoid duplicates
- Describe the use case - why is this feature needed?
- Propose a solution - how should it work?
- Consider alternatives - are there other ways to achieve the goal?
Some areas where contributions are especially welcome:
- Performance improvements: Faster asset loading, better caching
- New asset operations: Additional right-click context menu actions
- Enhanced search: More advanced search and filtering options
- UI/UX improvements: Better visual design, accessibility
- Error handling: More informative error messages
- Documentation: Code comments, tutorials, examples
- Testing: Increased test coverage, integration tests
The extension uses:
- Cloudinary Admin API for asset management
- Cloudinary Upload Widget for uploads
Thank you for contributing to the Cloudinary VS Code extension! 🚀