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.3.0

Add the ability to automatically detect if DittoComponent isn't imported and add it if necessary when doing replacements.

1.2.0

Add the ability to only match on components from a component folder. Must be used with v3.8.0 of the Ditto CLI.

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

• i18next support