Internationalization

TODO: Move to arquitecture docs once https://github.com/microsoft/WebTemplateStudio/issues/1310 is done

Client

Localization is set up using react-intl package.

Strings are defined using defineMessages().

const messages = defineMessages({
  changeItemName: {
    id: "draggableSidebarItem.changeItemName",
    defaultMessage: "Change Item Name"
  },
  deleteItem: {
    id: "draggableSidebarItem.deleteItem",
    defaultMessage: "Delete item"
  }
});

Components that require localized strings are exported after wrapping them in injectIntl().
e.g. export default injectIntl(DraggableSidebarItem);

Doing this will pass the intl as a prop to the component. Then, the component can use intl.formatMessage() which will localize the message.

Currently, the client does not have the ability to detect the locale of a developer and understand the developer’s native language. However, instructions on doing this can be found here.

Extension

Localization is done using vscode-nls-dev.