Before we get started, let's take a moment to understand what Ditto is. On the developer side, it functions like a headless CMS, making life easier for developers by eliminating the need to manually update and manage text within code. This not only gets rid of tickets for copy updates but also helps maintain consistency within and across projects. Since Ditto is well integrated with Figma, developers can also pull up-to-date text directly from Figma mockups.
One of the great things about being a developer at Ditto is that I get to experience the same pains that our customers do when it comes to the design-to-code copy process. To make life easier, we use Ditto at Ditto whenever possible. And much like our customers, we didn’t have Ditto from the start of development. This means there are large areas of our codebase that still have hardcoded strings that need to be converted to be managed via Ditto’s developer integrations.
The process of converting these strings, which we call components in Ditto, to Ditto React components can be a little tedious, especially when there are lots of different texts to update. The process goes something like this:
Doing this for many components can be cumbersome and error-prone, so our engineering team brainstormed a bit on how to improve the process.
Because our engineering team uses VS Code as our code editor, we eventually landed on creating a VS Code extension to improve the process. It works by integrating with the Ditto CLI to do a smart find-and-replace of component text in a project. I call it “smart” because it will only identify text within JSX code, and ignore everything else. Here it is in action:
In the video, the extension suggests updating multiple instances of “Developer ID”, an existing component in our workspace, to Ditto React components. From the extension, I can see a preview of the code, open the file and jump to the line it occurs at, and toggle whether I want it to be replaced or not. Then, once I click the replace button, the extension updates the code with Ditto React components that includes the appropriate componentId property. As a result, I can now safely update the project’s code much more quickly than doing the replacements manually!
After using our VS Code extension internally, we decided to release it so that other developers can also get its benefits. Eventually, we are planning to continue adding functionality to the extension so it works beyond just the Javascript realm. If you get to try it out, please leave any feedback as a GitHub Issue. Thank you!
