Flexibility in Variable Recognition for Translation Functions

[ArchShop]

Problem Description:

Currently, the "i18n Ally" extension appears to recognize only the variable "t" as a valid identifier for translation functions, such as those returned by useTranslations in libraries like next-intl. This creates an issue when developers prefer to use more descriptive variable names, such as "translation," to improve code readability and maintainability.

Steps to Reproduce:

1. Configure the "i18n Ally" extension in a Next.js project using next-intl.
2. In a component, use const translation = useTranslations('HomePage').
3. Attempt to use the extension's functionalities (key highlighting, automatic translation, etc.) with the "translation" variable.
4. Observe that the extension does not recognize the variable.
5. Rename the variable to const t = useTranslations('HomePage').
6. Observe that the extension now recognizes the variable and its translation calls.

Expected Behavior:

The extension should be flexible and allow developers to use custom variable names for translation functions. Ideally, there should be a configuration to define a pattern or regular expression to identify these variables.

Current Behavior:

The extension recognizes only the variable "t" as a valid identifier for translation functions.

Possible Solutions:

1. Add a configuration to allow developers to define a pattern or regular expression to identify translation function variables.
2. Improve the extension's internal regular expressions to recognize more common variable names, such as "translation," in addition to "t."
3. Allow the user to provide an array of valid variable names.

Additional Information:

• i18n library used: next-intl
• Framework: Next.js 15
• Language: TypeScript
• "i18n Ally" extension version: 2.13.1
• VS Code version: 1.97.2
  Code Example:

import { useTranslations } from 'next-intl';

export default function HomePage() {
  const translation = useTranslations('HomePage'); // Extension does not recognize this
  // const t = useTranslations('HomePage'); // Extension recognizes this

  return (
    <div>
      <h1>{translation('title')}</h1>
    </div>
  );
}

[ArchShop]

https://storage.googleapis.com/archshop-cloud-contents/example.gif