Aller au contenu principal

Déclaration des messages

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Bien que vous puissiez déclarer vos messages en utilisant uniquement des id, nous recommandons vivement de déclarer les defaultMessage en ligne avec leurs utilisations pour les raisons suivantes :

  1. Les messages colocalisés avec leurs utilisations deviennent auto-gérés : lorsque leurs utilisations changent ou sont supprimées, les messages le sont aussi.

  2. Les messages sont fortement contextuels. Nous avons constaté de nombreux cas où les développeurs supposent une certaine grammaire lors de la rédaction. Les boutons/appels à l'action et les étiquettes sont également traduits différemment.

  3. Le style du texte dépend aussi du message lui-même. Des éléments comme la troncation, la capitalisation... affectent nécessairement les messages.

  4. Meilleure intégration avec les chaînes d'outils. La plupart ne peuvent pas vérifier les références inter-fichiers pour valider la syntaxe/l'usage.

À haut niveau, les messages formatjs utilisent la syntaxe ICU avec quelques améliorations communes à d'autres formats comme Fluent. Cette section se concentre sur les méthodes supportées pour appeler les APIs formatjs afin d'extraire les messages.

Utilisation de l'API impérative 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
)

Utilisation de l'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
  }
/>

Utilisation de l'API Vue et des méthodes de template comme $formatMessage​

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

Pré-déclaration avec defineMessage pour usage ultérieur (déconseillé)​

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
Attention

Nous utilisons l'AST pour extraire les messages du codebase. Vérifiez donc que vous appelez bien intl.formatMessage(), utilisez nos composants React natifs, nos méthodes Vue ou configurez correctement --additionalFunctionNames/--additionalComponentNames dans notre CLI.

Attention

Vous pouvez déclarer un message sans le formater immédiatement avec defineMessage et notre extracteur pourra toujours l'extraire. Cependant, notre règle de linter enforce-placeholders ne pourra pas l'analyser.