ESLint plugin

[amannn]

This issue acts to collect ideas for an ESLint plugin that next-intl could provide to support developers.

Ensure navigation APIs from next-intl are used

✅ See #1082

Use async APIs in async components

Using hooks in async components should be flagged as an error. AFAIK the React ESLint plugin will do this, but we could offer an (autofixable) alternative.

Linting for unused translations

External tools support this, but we could consider supporting this if there's an ESLint plugin.

See also: #503

[Gawdfrey]

I think a lot of the power in the lint rules here are that they have a customisable message that allows the developer to point others to the correct location, unsure on how doable/ergonomic it is do that with a eslint package 🤔
But, I am currently using these rules:

  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "name": "next/link",
        "message": "Please use @shared/navigation instead."
      },
      {
        "name": "next/navigation",
        "importNames": [
          "redirect",
          "permanentRedirect",
          "useRouter",
          "usePathname"
        ],
        "message": "Please use @shared/navigation instead."
      },
      {
        "name": "next/router",
        "message": "Please use @shared/navigation instead."
      }
    ]
  }

Just banning the usage of the function that are exported from next-intl and pointing to where I export them. The last rule is just to avoid usage of the old router.

I definitely think some of these should be documented somehow :)

[amannn]

Oh that's a good idea with no-restricted-imports, even easier to manage!

Being able to provide a customizable message is certainly possible with ESLint, but you'd have to configure at least the rule yourself—just using a preset wouldn't be enough. I think as a first step, adding a page to the workflows section with the rules you're using would be a good idea!