Translation Files Validation in Angular with Transloco And Husky

#angular #translation #husky #validation

Originally published at shahar.kazaz

When working on an enterprise application and with multiple teams, it’s often the case where we have merge conflicts with one of the translation files.

In this case, we can accidentally break the file by forgetting an extra comma, for example:

{
  "key": "",
  "keyTwo": "", <====
}

Which leads to an invalid JSON. In most cases, the developer doesn’t notice this change and pushes the code to production or staging environments, and brokes that app.

Here in Transloco, we take such things seriously, and to prevent this, we created a linter that will verify the translation files before they pushed.

In addition to that, it will also check that it does not contain duplicate keys.
Let’s see how we use it:

Set up husky and lint-staged
Run npm i @ngneat/transloco-validator --save-dev

Update your package.json file:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/assets/i18n/*.json": ["transloco-validator"]
  }
}