03bd3659e0
- Introduced a comprehensive set of general coding guidelines to enhance code readability and maintainability. - Established a localization rule to prevent hard-coded user-facing text, ensuring all strings are managed through the localization system. - Defined a naming convention for React components, mandating the use of PascalCase for consistency across the codebase. - Included examples and enforcement strategies for each rule to facilitate adherence during development and code reviews.
1.5 KiB
1.5 KiB
Localization Rule: No Hard-Coded User-Facing Text
Rule
- All user-facing text must be added to the localization system at
@/locales. - Never hard-code user-facing strings directly in components, pages, or business logic.
- Use the appropriate i18n or localization utility to fetch and display all text.
- Always provide a
defaultValuewhen using thet()function for translations, e.g.,{t('emailPlaceholder', {defaultValue: 'Enter your email'})}.
Rationale
- Ensures the application is fully translatable and accessible to all supported languages.
- Prevents missed strings during translation updates.
- Promotes consistency and maintainability.
- Providing a
defaultValueensures a fallback is shown if the translation key is missing.
Examples
✅ Correct
import { useTranslation } from 'react-i18next';
const { t } = useTranslation();
return <input placeholder={t('emailPlaceholder', { defaultValue: 'Enter your email' })} />;
❌ Incorrect
return <input placeholder={t('emailPlaceholder')} />;
// or
return <input placeholder="Enter your email" />;
Enforcement
- All new user-facing text must be added to the appropriate file in
@/locales. - Every use of
t()must include adefaultValuefor fallback. - Code reviews should reject any hard-coded user-facing strings or missing
defaultValuein translations. - Refactor existing hard-coded text to use the localization system and add
defaultValuewhen modifying related code.