Contributing

​

How to contribute

​

Ways to contribute

​

Report bugs

1. Check existing issues to avoid duplicates
2. Open a new issue with:
   • Clear description of the problem
   • Steps to reproduce
   • Expected vs actual behavior
   • VS Code version and extension version
   • Screenshots or error messages if applicable

​

Suggest features

1. Check if it’s already been suggested in GitHub Issues
2. Open a new issue with the “feature request” label
3. Describe the feature and why it would be useful
4. Include examples or mockups if possible

​

Submit code

1. Fork the repository at github.com/midudev/better-svg
2. Clone your fork locally:
   git clone https://github.com/YOUR_USERNAME/better-svg.git
   cd better-svg
   
3. Install dependencies:
   npm install
   
4. Create a branch for your changes:
   git checkout -b feature/your-feature-name
   
5. Make your changes and test thoroughly
6. Build the extension:
   npm run compile
   
7. Test your changes in VS Code:
   • Press F5 to open a new Extension Development Host window
   • Test your changes with various SVG files and scenarios
8. Commit your changes with a clear message:
   git commit -m "Add: description of your feature"
   
9. Push to your fork:
   git push origin feature/your-feature-name
   
10. Open a Pull Request on GitHub

​

Development setup

​

Prerequisites

• Node.js (24.x or later)
• VS Code (1.85.0 or later)
• Git

​

Project structure

better-svg/
├── src/
│   ├── extension.ts          # Main extension entry point
│   ├── svgEditorProvider.ts  # Custom SVG editor
│   ├── svgGutterPreview.ts   # Gutter icon provider
│   ├── svgTransform.ts       # SVG optimization logic
│   ├── utils.ts              # Utility functions
│   ├── consts.ts            # Constants and configs
│   └── webview/             # Webview HTML/CSS/JS
├── dist/                     # Compiled output
├── package.json              # Extension manifest
└── tsconfig.json            # TypeScript config

​

Available scripts

• npm run compile - Build the extension
• npm run watch - Watch mode for development
• npm run package - Build for production
• npm run test - Run tests
• npm run lint - Lint TypeScript files
• npm run check-types - Type check without emitting

​

Testing

• Various SVG files (simple and complex)
• Different framework files (.jsx, .tsx, .vue, .svelte, .astro)
• All configuration settings
• Edge cases (invalid SVGs, large files, etc.)

​

Code guidelines

​

TypeScript

• Use TypeScript for all new code
• Follow existing code style and conventions
• Run npm run lint before committing
• Ensure npm run check-types passes

​

Commit messages

• Add: new feature description
• Fix: bug description
• Update: what was updated
• Refactor: what was refactored
• Docs: documentation changes

​

Pull requests

• Provide a clear title and description
• Reference any related issues
• Include screenshots for UI changes
• Ensure all tests pass
• Keep changes focused (one feature/fix per PR)

​

Getting help

• Check the README for basic information
• Review existing code and pull requests for examples
• Ask questions in your issue or pull request
• Contact the maintainer: [email protected]

​

Code of conduct

​

License

​

Recognition

• GitHub’s contributor list
• Release notes (for significant features/fixes)
• Project documentation