This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

Using eslint to fix wrong i18n usages


We care lots about DX at Woovi. We need to discover the very best workflow to make it straightforward for builders to work with i18n strings. Manually updating the code and the i18n locale JSON recordsdata is sluggish and error-prone.

Our present workflow after many iterations is like this:

  • Write your i18n strings utilizing t(‘key in english’), you write the string in English.
  • We run i18next-scanner to extract all usages of t within the codebase
  • the developer simply must fill the Portuguese and Spanish translations (we’ve some POCs to make use of Google Translate, ChatGPT or Copilot to autofill translations for us).



Avoiding i18n that may’t be extracted

You’ll be able to solely extract static strings, you’ll be able to’t extract string interpolations or variables.

Listed below are 2 examples of dangerous utilization of i18n

t(`CHARGE_STATUS.${cost.standing}`)
Enter fullscreen mode

Exit fullscreen mode

We won’t know all strings that should be extracted when utilizing a string interpolation and a variable

t(outcome.error)
Enter fullscreen mode

Exit fullscreen mode

We won’t know all potential strings of outcome.error neither.

To keep away from this dangerous usages in our codebase, we determined to jot down a customized Eslint rule to catch this errors at pre-commit hook.



noVariableT eslint rule

module.exports = createRule({
  create: (context) => ({
    CallExpression(node) {
      if (node.callee.identify === 't') {
        const arg = node.arguments[0];

        if (arg.kind === 'TemplateLiteral' && arg.expressions.size === 0) {
          return;
        }

        if (!arg || arg.kind !== 'Literal' || typeof arg.worth !== 'string') {
          context.report({
            node,
            message:
              'Solely string literals are allowed as arguments to the t() operate.',
          });
        }
      }
    },
    MemberExpression(node) {
      if (node.property.identify === 't') {
        if (!node.dad or mum.arguments) {
          return;
        }

        const arg = node.dad or mum.arguments[0];

        if (arg.kind === 'TemplateLiteral' && arg.expressions.size === 0) {
          return;
        }

        if (!arg || arg.kind !== 'Literal' || typeof arg.worth !== 'string') {
          context.report({
            node,
            message:
              'Solely string literals are allowed as arguments to the t() operate.',
          });
        }
      }
    },
  }),
  identify: 'no-variable-t',
  meta: {
    kind: 'drawback',
    fixable: 'code',
    docs: {
      description: 'Utilizing t(variable) breaks i18next-scanner',
      advisable: 'error',
    },
    schema: [],
  },
  defaultOptions: [],
});
Enter fullscreen mode

Exit fullscreen mode

To know what this eslint rule is doing, it’s good to perceive how JavaScript AST works. You’ll be able to discover it right here https://astexplorer.net/

ast-t

A CallExpression represents a operate name. The rule searches for all t callExpression that aren’t utilizing a string literal, and report an error.



To sum up

DX can also be how do you keep away from builders making errors.
At Woovi we do not blame an individual when an error is made, we attempt to perceive the basis trigger, enhance our course of and automation to keep away from this taking place once more.

How are you avoiding errors at your Startup? What automation do you’ve in place?


Woovi
Woovi is a Startup that permits consumers to pay as they like. To make this potential, Woovi gives on the spot cost options for retailers to simply accept orders.

If you wish to work with us, we’re hiring!

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?