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
- Install the Stringtale Visual Studio Code extension from the Visual Studio Marketplace
- Select the text you want to wrap in a
<Value>
tag

- Hit
Ctrl/Cmd + Shift + P
and exexcuteStringtale: Wrap

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

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

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