No dynamic keys rule

[kristian240]

Hey! I want to contribute to this package with a new rule - no-dynamic-keys.

The rule aims to prevent developers to use dynamic keys for i18next.

Example of incorrect code:

<>
  <div>{i18next.t("hello" + "." + "world")}</div>
  <div>{i18next.t(`enum.${dynamicValue}`)}</div>
</>

Example of correct code:

<>
  <div>{i18next.t("hello.world"}</div>
  <div>{i18next.t('enum', { returnObjects: true })[dynamicValue]}</div>
</>

Do you think something like this could be useful?

[edvardchen]

To achieve consensus, here is my thought about this new to-be rule

1. no-literal-string is to warn people not to use literal strings everywhere except within translate API calling t
2. no-dynamic-keys is to make sure people call translate API with literal strings. Is it a common usage? From my experience, it usually is called with the translation KEY, like i18next.t(translation_keys.FOO)

[omonk]

@kristian240 I have something similar which you can use very easily

"only-string-for-t": {
    create: function (context) {
      return {
        CallExpression(node) {
          if (
            node.callee.name === "t" &&
            (!node.arguments[0] ||
              node.arguments[0].type !== "Literal" ||
              typeof node.arguments[0].value !== "string")
          ) {
            context.report({
              node,
              message: 'Function "t" should only be passed a string literal',
            });
          }
        },
      };
    },
  },

You'll need to use a local eslint rule plugin - https://www.npmjs.com/package/eslint-plugin-local-rules

Then follow the steps for setting up your own rules and you're good to go

[edvardchen]

Looking back I think I kinda misunderstood the original issue.

The new rule should be helpful because static keys can help people quickly locate when some keys lack translations

I would like to have that rule. Welcome any contribution otherwise I will implement it when I find time

[SimonSimCity]

Just as a hint: this is how it's implemented in an eslint plugin for vue: https://eslint-plugin-vue-i18n.intlify.dev/rules/no-dynamic-keys.html