Ir para o conteúdo principal

Declaração de Mensagens

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Embora seja possível declarar mensagens usando apenas ids, recomendamos fortemente declarar defaultMessages inline junto com seus usos pelos seguintes motivos:

  1. Mensagens colocalizadas com seus usos tornam-se autogerenciáveis: conforme os usos mudam/são removidos, as mensagens acompanham.

  2. Mensagens são altamente contextuais. Vimos muitos casos onde desenvolvedores presumem certa gramática ao escrever mensagens. Botões/chamadas para ação e rótulos também são traduzidos diferentemente.

  3. Estilização de texto também depende da própria mensagem. Elementos como truncamento, capitalização... certamente afetam as mensagens.

  4. Melhor integração com cadeias de ferramentas. A maioria não consegue verificar referências entre arquivos para validar sintaxe/uso.

Em alto nível, as mensagens do formatjs usam Sintaxe ICU com aprimoramentos comuns em outros formatos como Fluent. Esta seção foca nas formas suportadas de chamar APIs do formatjs para extração de mensagens.

Usando API imperativa intl.formatMessage​

// Method must be exactly `intl.formatMessage`
intl.formatMessage(
  {
    description: 'A message', // Description should be a string literal
    defaultMessage: 'My name is {name}', // Message should be a string literal
  },
  {
    name: userName,
  } // Values should be an object literal, but not necessarily every value inside
)

Usando API React <FormattedMessage/>​

import {FormattedMessage} from 'react-intl'
;<FormattedMessage
  description="A message" // Description should be a string literal
  defaultMessage="My name is {name}" // Message should be a string literal
  values={
    {
      name: userName,
    } // Values should be an object literal, but not necessarily every value inside
  }
/>

Usando API Vue & métodos de template como $formatMessage​

<template>
  <p>{{ $formatNumber(3, {style: 'currency', currency: 'USD'}) }}</p>
</template>

Pré-declarando com defineMessage para uso posterior (menos recomendado)​

import {defineMessage} from 'react-intl'
const message = defineMessage({
  description: 'A message', // Description should be a string literal
  defaultMessage: 'My name is {name}', // Message should be a string literal
})

intl.formatMessage(message, {name: 'John'}) // My name is John

<FormattedMessage
  {...message}
  values={{
    name: 'John',
  }}
/> // My name is John
cuidado

Dependemos de AST para extrair mensagens da codebase, portanto garanta que você chame intl.formatMessage(), use nossos componentes React nativos, métodos Vue ou configure --additionalFunctionNames/--additionalComponentNames em nossa CLI corretamente.

cuidado

Você pode declarar mensagens sem formatá-las imediatamente com defineMessage, e nosso extrator ainda conseguirá extraí-las. Porém nossa regra de linter enforce-placeholders não conseguirá analisá-las.