While you can declare your messages using only
ids, we highly recommend declaring
defaultMessages inline along with their usages because of the following reasons:
- Messages colocated with their usages become self-managed, as their usages change/removed, so are the messages.
- Messages are highly contextual. We've seen a lot of cases where developers assume a certain grammar when they write their messages. Buttons/Call-To-Actions and labels are also translated differently.
- Text styling is also dependent on the message itself. Things like truncation, capitalization... certainly affect the messages themselves.
- Better integrations with toolchains. Most toolchains cannot verify cross-file references to validate syntax/usage.
At a high level, formatjs messages use ICU Syntax with a couple of enhancements common in other message format such as Fluent. This section focuses on the actual supported ways of calling
formatjs APIs so messages can be extracted.
Using imperative API
Using React API
Using Vue API & template methods such as
defineMessage for later consumption (less recommended)#
You can declare a message without immediately formatting it with
defineMessage and our extractor would still be able to extract it. However, our enforce-placeholders linter rule won't be able to analyze it.