Quasar and i18n-ally

Quasar integrates i18n fairly well but its suggested usage does not suit the i18n-ally VS code extension very well. This article presents how to adapt the quasar proposed i18n usage so that i18n-ally can be used properly.

When following the quasar i18n integration guide, translations are stored in .ts files, residing in their respective folders in src/i18n. For i18n-ally to work, those need to be .json files. Also, I personally prefer to have all translations files in the same folder so let's go ahead and delete the translation folders. Instead, the new structure of the i18n folder should look like this:

src
|- i18n
|  |- index.ts
|  |- en.json
|  |- ja.json

The content of src/i18n/index.ts must be adapted accordingly:

import en from './en.json'
import ja from './ja.json'

export default {
    en,
    ja,
}

With this done, quasar will use those .json files for translations.

The final step is to configure VS code's i18n-ally extension to use those files as well. This can be achieved by editing the .vscode/settings.json file and enabling json parsing for i18n by adding the following line:

  "i18n-ally.enabledParsers": ["json"],

With this done, i18n-ally should work properly in your quasar project.

Articles

Quasar and i18n-ally