FormatJS CLI

format js cli importing

Overview

FormatJS (formerly known also as react-intl) provide a JavaScript CLI tool for extracting i18n keys. You can extract all information from <FormattedMessage/> tags and save it into JSON file by using FormatJS CLI.

<FormattedMessage 
    id="YOUR_TRANSLATION_KEY" 
    defaultMessage="Your default translation text" 
    description="Your code comment for translators"/>

Then, you can use SimpleLocalize CLI to upload the exported JSON file. It will automatically create missing translation keys from id, add defaultMessage as a default translation, and save description in the translation editor.

Remember to also check links below this guide to learn how to integrate real-time translation updates in your web application.

Installation

Install Format JS CLI

# Using NPM
npm i -D @formatjs/cli

# Using yarn
yarn add -D @formatjs/cli

Install SimpleLocalize CLI

curl -s https://get.simplelocalize.io/2.0/install | bash

Problems with CLI? See troubleshooting section.

Configuration

Add the following command to your package.json scripts:

{
  "scripts": {
    "extract": "formatjs extract 'src/**/*.{ts,js,tsx,jsx}' --out-file lang.json",
    "upload-i18n": "simplelocalize upload --apiKey <PROJECT_API_KEY> --uploadPath ./lang.json --uploadFormat simplelocalize-json --languageKey en",
    "download-i18n": "simplelocalize download --apiKey <PROJECT_API_KEY> --downloadPath ./messages.json --downloadFormat multi-language-json"
  }
}

Usage

Use extract script to start FormatJS CLI extraction. It will save all translation keys in lang.json file.

$ npm run extract

Run upload-i18n script to upload found translation keys

$ npm run upload-i18n

Translate messages in the editor

Your translation keys will show up in the translation editor.

translation editor

Use translations

Now, you have options to get your translations.

Live updates

Fetch your translations from SimpleLocalize CDN using your favourite HTTP client.

translation cdn

Learn how to configure live translation updates with FormatJS

Download translation files

Download JSON file with translation to your project files with CLI. Run download-i18n script to download ready to use JSON file with all translations.

$ npm run download-i18n

Table of content