Ditto for VS Code

This is the official Visual Studio Code extension for Ditto, a powerful design-to-code tool that helps teams maintain a single source of truth for product text. By using the Ditto VS Code extension, you can easily find text in your repository to replace with Ditto string keys without needing to hunt down individual IDs.

Once integrated, developers no longer need to manually update strings. Up-to-date text can be directly pulled from and updated by Ditto.

Features

• Scans JSX/TSX files to find potential matches for Ditto components
• Automatically generates suggestions based on your code
• Seamlessly replaces selected components with Ditto React components

Requirements

To use this extension, you must have the Ditto CLI downloaded and set up in your project. Please use the most up-to-date version of the CLI for best results.

Usage

1. Open the Ditto extension.
2. The extension will automatically scan your JSX/TSX files to find potential matches for Ditto components.
3. Suggestions will be generated based on your code. Review the suggestions and select the text you want to replace with Ditto React components.
4. Click the "Replace" button and let the extension update your code with the selected replacements.

Release Notes

1.1.0

Add the ability to only search the current opened file. Must be used with v3.6.1 of the Ditto CLI.

1.0.8

Initial release

Upcoming features

• Performance optimization for generating suggestions
• Specify directory to generate suggestions for
• Restrict components base on specified components folder
• Add ditto-react import if needed
• i18next support