### Install ESLint

Source: https://github.com/lingui/eslint-plugin/blob/main/README.md

Install ESLint as a development dependency using npm or yarn.

```bash
npm install --save-dev eslint
# or
yarn add eslint --dev
```

--------------------------------

### Recommended Legacy Config Setup

Source: https://github.com/lingui/eslint-plugin/blob/main/README.md

Enable all recommended Lingui ESLint rules by extending 'plugin:lingui/recommended' in your .eslintrc configuration.

```json
{
  "extends": ["plugin:lingui/recommended"]
}
```

--------------------------------

### Install ESLint Plugin Lingui

Source: https://github.com/lingui/eslint-plugin/blob/main/README.md

Install the Lingui ESLint plugin as a development dependency using npm or yarn.

```bash
npm install --save-dev eslint-plugin-lingui
# or
yarn add eslint-plugin-lingui --dev
```

--------------------------------

### Recommended Flat Config Setup

Source: https://github.com/lingui/eslint-plugin/blob/main/README.md

Enable all recommended Lingui ESLint rules using the flat config system. Ensure the 'no-unlocalized-strings' rule is configured separately if needed.

```javascript
import pluginLingui from 'eslint-plugin-lingui'

export default [
  pluginLingui.configs['flat/recommended'],
  // Any other config...
]
```

--------------------------------

### Ignore string arguments in member expressions

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

This example demonstrates how to ignore string arguments in member expressions, such as 'context.headers.set', using the 'ignoreFunctions' option with a wildcard pattern.

```js
/*eslint lingui/no-unlocalized-strings: ["error", {"ignoreFunctions": ["*.headers.set"]}]*/
context.headers.set('Authorization', `Bearer ${token}`)
```

--------------------------------

### Correct plural format (hash style)

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/consistent-plural-format.md

Examples of correct plural definitions when the "hash" style is enforced. This demonstrates the use of '#' as a placeholder for the count.

```js
plural(numBooks, {
  one: '# book',
  other: '# books',
})

plural(count, {
  zero: '# items',
  one: '# item',
  other: '# items',
});
<Plural
  value={messagesCount}
  one="There's # message in your inbox"
  other="There are # messages in your inbox"
/>
```

--------------------------------

### ESLint Configuration Examples for require-explicit-id

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/require-explicit-id.md

Shows different ways to configure the 'require-explicit-id' ESLint rule, including default behavior, pattern validation, and case-insensitive flag usage.

```jsonc
// Only require id to be present (default behavior)
"lingui/require-explicit-id": "error"

// Require id to match a specific pattern
"lingui/require-explicit-id": ["error", { "patterns": ["^[\\w-]+$"] }]

// Require id to start with "msg." or "err."
"lingui/require-explicit-id": ["error", { "patterns": ["^msg\\.", "^err\\."] }]

// Require id to start with "msg." (case-insensitive)
"lingui/require-explicit-id": ["error", { "patterns": ["^msg\\."], "flags": "i" }]
```

--------------------------------

### Enforcing Implicit IDs for LinguiJS Translations

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/require-implicit-id.md

Examples demonstrating the correct (✅) and incorrect (⛔️) usage of LinguiJS translation components and macros when the require-implicit-id rule is applied. Incorrect examples use explicit IDs, while correct examples rely on implicit, auto-generated IDs.

```jsx
// nope ⛔️
<Trans id="msg.hello">Hello</Trans>
<Plural id="msg.books" value={count} one="# book" other="# books" />
t({ id: "msg.hello", message: "Hello" })

// ok ✅
<Trans>Hello</Trans>
<Plural value={count} one="# book" other="# books" />
t({ message: "Hello" })
t`Hello`
```

--------------------------------

### Custom Flat Config Setup

Source: https://github.com/lingui/eslint-plugin/blob/main/README.md

Manually configure the Lingui ESLint plugin and specific rules within a flat config file. This allows for granular control over enabled rules.

```javascript
import pluginLingui from 'eslint-plugin-lingui'

export default [
  {
    plugins: {
      lingui: pluginLingui,
    },
    rules: {
      'lingui/t-call-in-function': 'error',
    },
  },
  // Any other config...
]
```

--------------------------------

### Custom Legacy Config Setup

Source: https://github.com/lingui/eslint-plugin/blob/main/README.md

Manually configure the Lingui ESLint plugin and specific rules within a legacy .eslintrc configuration file. This provides fine-grained rule management.

```json
{
  "plugins": ["lingui"],
  "rules": {
    "lingui/t-call-in-function": "error"
  }
}
```

--------------------------------

### Usage with Pattern Validation for IDs

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/require-explicit-id.md

Illustrates invalid and valid examples when the 'require-explicit-id' rule is configured with a specific ID pattern, such as starting with 'msg.'.

```jsx
// nope ⛔️
<Trans id="hello">Hello</Trans>
t({ id: "hello", message: "Hello" })

// ok ✅
<Trans id="msg.hello">Hello</Trans>
t({ id: "msg.hello", message: "Hello" })
```

--------------------------------

### Correct plural format (template style)

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/consistent-plural-format.md

Examples of correct plural definitions when the "template" style is enforced. This demonstrates the use of template literals for variable interpolation.

```js
plural(numBooks, {
  one: `${numBooks} book`,
  other: `${numBooks} books`,
})

plural(count, {
  zero: `${count} items`,
  one: `${count} item`,
  other: `${count} items`,
})
<Plural
  value={messagesCount}
  one={`There's ${messagesCount} message in your inbox`}
  other={`There are ${messagesCount} messages in your inbox`}
/>
```

--------------------------------

### t calls inside functions (OK)

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/t-call-in-function.md

This example shows the correct usage where the `t` macro is called inside a function. This ensures that the translated string will update correctly when the language changes.

```jsx
import { t } from '@lingui/macro'

// ok ✅
function getGreeting() {
  return t`Hello world!`
}
```

--------------------------------

### Ignore string arguments in console logs

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

This example shows how to ignore strings passed to 'console.log' using the 'ignoreFunctions' option. This is useful for debugging messages that do not need to be localized.

```js
/*eslint lingui/no-unlocalized-strings: ["error", {"ignoreFunctions": ["console.log"]}]*/
console.log('Log this message')
```

--------------------------------

### Configure Ignored Names with Regex

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

Use the `ignoreNames` rule with a `regex` to specify patterns for names that should be ignored by the linter. This example ignores 'classname' case-insensitively.

```json
{
  "no-unlocalized-strings": [
    "error",
    {
      "ignoreNames": [
        {
          "regex": {
            "pattern": "classname",
            "flags": "i"
          }
        }
      ]
    }
  ]
}
```

--------------------------------

### t calls at module level (NO)

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/t-call-in-function.md

This example demonstrates incorrect usage where the `t` macro is called at the module level. Such calls will not re-render when the language is switched, leading to outdated translations.

```jsx
import { t } from '@lingui/macro'

// nope ⛔️
const msg = t`Hello world!`
```

--------------------------------

### Ignore string arguments in specific functions

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

This example shows how to use the 'ignoreFunctions' option to prevent the rule from flagging strings passed as arguments to specified functions, like 'showIntercomMessage'. This is useful for functions that handle user-facing messages.

```js
/*eslint lingui/no-unlocalized-strings: ["error", {"ignoreFunctions": ["showIntercomMessage"]}]*/
showIntercomMessage('Please write me')
```

--------------------------------

### Ignore string arguments in console methods using wildcard

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

This example uses a wildcard pattern 'console.*' in 'ignoreFunctions' to ignore strings passed to any method of the console object, such as 'log', 'warn', or 'error'.

```js
/*eslint lingui/no-unlocalized-strings: ["error", {"ignoreFunctions": ["console.*"]}]*/
console.log('Log this message')
```

--------------------------------

### Ignore string arguments in utility functions like cva

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

This example demonstrates ignoring string arguments for utility functions like 'cva' (Component Variant API) using the 'ignoreFunctions' option. This is common for CSS-in-JS libraries or styling utilities.

```js
/*eslint lingui/no-unlocalized-strings: ["error", { "ignoreFunctions": ["cva"] }]*/
const labelVariants = cva('text-form-input-content-helper', {
  variants: {
    size: {
      sm: 'text-sm leading-5',
      md: 'text-base leading-6',
    },
  },
})
```

--------------------------------

### Ignore string arguments in dynamic member expressions

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

This example shows how to ignore string arguments in dynamic member expressions, like 'foo[getName()].set', by using a pattern with a wildcard for dynamic segments in the 'ignoreFunctions' option.

```js
/*eslint lingui/no-unlocalized-strings: ["error", {"ignoreFunctions": ["foo.$.set"]}]*/
foo[getName()].set('Hello')
```

--------------------------------

### Configure ESLint for Text Restrictions

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/text-restrictions.md

Configure the 'lingui/text-restrictions' rule in your ESLint configuration to enforce specific quote usage in translated messages. This example restricts the use of smart quotes.

```json
{
  "lingui/text-restrictions": [
    "error",
    {
      "rules": [
        {
          "patterns": ["''", "’", "“"],
          "message": "Quotes should be ' or ""
        }
      ]
    }
  ]
}
```

--------------------------------

### Ignore specific strings with regex

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

This example demonstrates how to configure the 'no-unlocalized-strings' rule to ignore strings that match a given regular expression, such as 'rgba'. This is useful for CSS color values or other specific string patterns.

```jsx
/*eslint lingui/no-unlocalized-strings: ["error", {"ignore": ["rgba"]}]*/
const color = <div style={{ color: 'rgba(100, 100, 100, 0.4)' }} />
```

--------------------------------

### JSX, Variable, Property, and Class Name Ignored Examples

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

Demonstrates various scenarios where names like 'wrapperClassName' are ignored due to being used in JSX attributes, variable declarations, object properties, or class members.

```jsx
// ignored by JSX attribute name
const element = <div wrapperClassName="absolute top-1/2 left-1/2" />

// ignored by variable name
const wrapperClassName = 'Ignored value'

// ignored by property name
const obj = { wrapperClassName: 'Ignored value' }
obj.wrapperClassName = 'Ignored value'

class MyClass {
  wrapperClassName = 'Ignored value'
}
```

--------------------------------

### Incorrect plural format (hash style)

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/consistent-plural-format.md

Examples of incorrect plural definitions when the "hash" style is enforced. This includes using template literals or a mix of template literals and hash placeholders.

```js
plural(numBooks, {
  one: `${numBooks} book`,
  other: `${numBooks} books`,
})

plural(count, {
  zero: `${count} items`,
  one: '# item',
  other: `${count} items`,
})

// String with template literal pattern
plural(numBooks, {
  one: '${numBooks} book',
  other: '# books',
});
<Plural
  value={messagesCount}
  one={`There's ${messagesCount} message in your inbox`}
  other={`There are ${messagesCount} messages in your inbox`}
/>
```

--------------------------------

### Incorrect plural format (template style)

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/consistent-plural-format.md

Examples of incorrect plural definitions when the "template" style is enforced. This includes using hash placeholders or a mix of hash placeholders and template literals.

```js
plural(numBooks, {
  one: '# book',
  other: '# books',
})

plural(count, {
  zero: '# items',
  one: `${count} item`,
  other: '# items',
})
<Plural
  value={messagesCount}
  one="There's # message in your inbox"
  other="There are # messages in your inbox"
/>
```

--------------------------------

### Prevent Nested Trans Components

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-trans-inside-trans.md

Use this rule to disallow nesting Trans components. The first example shows an invalid nested structure, while the second demonstrates the correct, non-nested usage.

```jsx
// nope ⛔️
<Trans>Hello <Trans>World!</Trans></Trans>
```

```jsx
// ok ✅
<Trans>Hello World!</Trans>
```

--------------------------------

### Ignore specific identifier names

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

This example shows how to use the 'ignoreNames' option to exclude specific identifier names, such as 'style', from being flagged by the rule. This applies to JSX attributes, variable names, and property names.

```jsx
/* eslint lingui/no-unlocalized-strings: ["error", {"ignoreNames": ["style"]}] */
// ignored by JSX sttribute name
const element = <div style={{ margin: '1rem 2rem' }} />
// ignored by variable name
const style = 'Ignored value!'

/* eslint lingui/no-unlocalized-strings: ["error", {"ignoreNames": ["displayName"]}] */
// ignored by property name
const obj = { displayName: 'Ignored value' }
obj.displayName = 'Ignored value'

class MyClass {
  displayName = 'Ignored value'
}
```

--------------------------------

### Invalid and Valid Usage of Trans Components and t Macro

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/require-explicit-id.md

Demonstrates incorrect usage (missing explicit IDs) and correct usage (with explicit IDs) for Lingui's Trans component and the 't' macro function.

```jsx
// nope ⛔️
<Trans>Read the docs for more info.</Trans>
<Plural value={count} one="# book" other="# books" />
t`Hello`
t({ message: "Hello" })

// ok ✅
<Trans id="msg.docs">Read the docs for more info.</Trans>
<Plural id="msg.books" value={count} one="# book" other="# books" />
t({ id: "msg.hello", message: "Hello" })
```

--------------------------------

### Configure no-unlocalized-strings ESLint Rule

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

This JSON configuration object shows how to set up the 'no-unlocalized-strings' ESLint rule, including options for ignoring specific strings, function names, and properties. It also demonstrates enabling TypeScript type information.

```json
{
  "no-unlocalized-strings": [
    "error",
    {
      "ignore": [
        "^(?![A-Z])\\S+$",
        "^[A-Z0-9_-]+$"
      ],
      "ignoreNames": [
        { "regex": { "pattern": "className", "flags": "i" } },
        { "regex": { "pattern": "^[A-Z0-9_-]+$" } },
        "styleName",
        "src",
        "srcSet",
        "type",
        "id",
        "width",
        "height",
        "displayName",
        "Authorization"
      ],
      "ignoreFunctions": [
        "cva",
        "cn",
        "track",
        "Error",
        "console.*",
        "*headers.set",
        "*.addEventListener",
        "*.removeEventListener",
        "*.postMessage",
        "*.getElementById",
        "*.dispatch",
        "*.commit",
        "*.includes",
        "*.indexOf",
        "*.endsWith",
        "*.startsWith",
        "require"
      ],
      "useTsTypes": true,
      "ignoreMethodsOnTypes": [
        "Map.get",
        "Map.has",
        "Set.has"
      ]
    }
  ]
}
```

--------------------------------

### Configure consistent-plural-format rule

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/consistent-plural-format.md

Configure the `lingui/consistent-plural-format` rule in your ESLint configuration. You can specify the preferred style as either "hash" or "template".

```json
{
  "lingui/consistent-plural-format": ["error", { "style": "hash" }]
}
```

--------------------------------

### Correct: Plural as top-level unit

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-plural-inside-trans.md

Use Plural components as the top-level translation unit. This allows translators to manage the entire sentence structure.

```jsx
<Plural value={count} one="You have # unread message." other="You have # unread messages." />
```

--------------------------------

### Incorrect: Plural inside Trans

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-plural-inside-trans.md

Avoid nesting Plural components directly within Trans components. This fragments the message and complicates translation.

```jsx
<Trans>
You have <Plural value={count} one="# unread message" other="# unread messages" />.
</Trans>
```

--------------------------------

### Exception: Plural inside structured markup

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-plural-inside-trans.md

In cases where the pluralized text must be nested within specific markup that cannot be moved, Plural can be placed inside Trans.

```jsx
<Trans>
You have{' '}
  <strong>
    <Plural value={count} one="# unread message" other="# unread messages" />
  </strong>
.</Trans>
```

--------------------------------

### Valid Usage of no-single-variables-to-translate Rule

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-single-variables-to-translate.md

This rule allows variables to be included in translations as long as there is also static text present. This ensures that message catalogs contain meaningful, translatable strings.

```jsx
// valid ✅
;<Trans>Hello {user}</Trans>
t`Hello ${user}`
msg`Hello ${user}`
```

--------------------------------

### Define Text Restriction Rule Structure

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/text-restrictions.md

This JSON structure defines a single rule for text restrictions, including patterns to match and the error message to display.

```json
{
  "patterns": ["first", "second"],
  "message": "error message"
}
```

--------------------------------

### Avoid Unnecessary Trans Component Wrapping

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-single-tag-to-translate.md

This rule flags instances where a single HTML element is unnecessarily wrapped by the Trans component. It suggests moving the Trans component to wrap the text content instead, improving the structure for translation.

```jsx
// nope ⛔️
<Trans><strong>Foo bar</strong></Trans>
```

```jsx
// ok ✅
<strong><Trans>Foo bar</Trans></strong>
```

--------------------------------

### Valid usage of variables in t` ` ` messages

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-expression-in-message.md

Use variable identifiers within t` ` ` messages for better translator context. This ensures messages are translated with named placeholders (e.g., `{userName}`).

```jsx
// valid ✅
const userName = user.name
t`Hello ${userName}` // => 'Hello {userName}'
msg`Hello ${userName}` // => 'Hello {userName}'
defineMessage`Hello ${userName}` // => 'Hello {userName}'
```

--------------------------------

### Ignore Methods on Specific TypeScript Types

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-unlocalized-strings.md

Configure `ignoreMethodsOnTypes` to ignore methods defined on specific types using TypeScript's type information. Requires `useTsTypes: true`. Methods are specified as `Type.method`.

```ts
interface Foo {
  get: (key: string) => string
}

const foo: Foo
foo.get('Some string')
```

--------------------------------

### Valid Message with Allowed Quotes

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/text-restrictions.md

This JavaScript code shows a valid usage of translated messages with standard double quotes, adhering to the text-restrictions rule.

```javascript
t`Hello "mate"`
```

--------------------------------

### Invalid Message with Restricted Quotes

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/text-restrictions.md

This JavaScript code demonstrates an invalid usage of translated messages with smart quotes, which would be flagged by the text-restrictions rule.

```javascript
t`Hello “mate“`
```

```javascript
msg`Hello “mate“`
```

```javascript
t({ message: `Hello “mate“` })
```

--------------------------------

### Invalid Usage of no-single-variables-to-translate Rule

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-single-variables-to-translate.md

This rule flags code where a single variable is passed to a translation function or component without any static text. Such usage pollutes message catalogs with untranslatable strings.

```jsx
// invalid ⛔️
;<Trans>{user}</Trans>
t`${user}`
msg`${user}`
```

--------------------------------

### Invalid usage of expressions in t` ` ` messages

Source: https://github.com/lingui/eslint-plugin/blob/main/docs/rules/no-expression-in-message.md

Avoid using member or function expressions directly within t` ` ` messages. These will be converted to numerical placeholders, losing context for translators.

```jsx
// invalid ⛔
t`Hello ${user.name}` // => 'Hello {0}'
msg`Hello ${user.name}` // => 'Hello {0}'
defineMessage`Hello ${user.name}` // => 'Hello {0}'
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.