How to retain order of translations with FormatJS CLI?

Question

When the messages are extracted they are ordered in the extraction file alphabetically according to their randomly generated ids. Is there any way to prevent that and have them ordered in the exact same order in which they appear in the code instead?

E.g. now:

"AYGNrK": translation2,
"BIOgfm": translation1,
"Cqv/CV": translation3,

Wanted:

"BIOgfm": translation1,
"AYGNrK": translation2,
"Cqv/CV": translation3,

Answer 1

If you want to have full control over the exported message, you can use your own formating function.

formatjs extract "src/**/*.{ts,tsx,vue}" --format [path]

In this function, you can sort it i.e. by value. See this example for the general structure of a custom formatter:

https://github.com/formatjs/formatjs/blob/main/packages/cli/src/formatters/default.ts

An altnerative way is to set the custom id with a prefix instead of generating ids. But you need to be aware of naming collisions.

<FormattedMessage
  id="component.title"
  value="My title"
/>