lingui-best-practiceslisted

# Lingui Best Practices Lingui is a powerful internationalization (i18n) framework for JavaScript. This skill covers best practices for implementing i18n in React and vanilla JavaScript applications. ## Quick Start Workflow The standard Lingui workflow consists of these steps: 1. Wrap your app in `I18nProvider` 2. Mark messages for translation using macros (`Trans`, `t`, etc.) 3. Extract messages: `lingui extract` 4. Translate the catalogs 5. Compile catalogs: `lingui compile` 6. Load and activate locale in your app ## Core Packages Import from these packages: ```jsx // React macros (recommended) import { Trans, Plural, Select, useLingui } from "@lingui/react/macro"; // Core macros for vanilla JS import { t, msg, plural, select } from "@lingui/core/macro"; // Runtime (rarely used directly) import { I18nProvider } from "@lingui/react"; import { i18n } from "@lingui/core"; ``` ## Setup I18nProvider Wrap your application with `I18nProvider`: ```jsx import { I18nProvider } from "@lingui/react"; import { i18n } from "@lingui/core"; import { messages } from "./locales/en/messages"; i18n.load("en", messages); i18n.activate("en"); function App() { return ( <I18nProvider i18n={i18n}> {/* Your app */} </I18nProvider> ); } ``` ## Translating UI Text ### Choosing the Right Macro Work through these questions in order: 1. **Does the message depend on a count?** → `Plural` (JSX) or `plural` (strings). Never wrap a count-dependent string in plain `Trans` —