Visual Studio Code extension

Learn how to use the Visual Studio Code Extension.

What does it do?

The Visual Studio Code Extension allows you to wrap your static text with <Value> tags automatically along with generating unique name attributes. It even supports automatically wrapping variables and placing them in the format attribute of the <Value> tag.

Basic usage

1. Install the Stringtale Visual Studio Code extension from the Visual Studio Marketplace
2. Select the text you want to wrap in a <Value> tag

3. Hit Ctrl/Cmd + Shift + P and exexcute Stringtale: Wrap

4. The VS Code extension will generate a unique name attribute for the <Value> tag based on the filepath and offer you to rename it. We recommend you limit renaming to new tags and not existing ones to avoid synchronization issues.

5. Once you’ve accepted the name, the VS Code wrap your text in a <Value> tag, rendering the field editable in your browser.

6. That’s it! The name attribute will be used to store information once the text changes, there’s no need to push it to the server.

Advanced usage

The demonstration above shows basic usage of how to wrap plain text with a <Value> tag. But the functionality of Stringtale isn’t limted to just plain text. It supports string interpolation and inline components. Below is an example of how to have the Visual Studio Code extension automatically wrap a piece of text with a string interpolated variable.

The usage is exactly the same as the basic usage. Just select the text Welcome: {name} and execute the Stringtale: Wrap command.

import { Value } from "@stringtale/react";

const name = "John Doe"

<span>
  Welcome: {name}
</span>

Will automatically be transformed to

import { Value } from "@stringtale/react";

const name = "John Doe"

<span>
  <Value
    name="apps.web.src.index.welcome_name"
    format={{ name }}
  >
    {`Welcome: {name} `}
  </Value>
</span>