I have recently found myself delving into a Vue.js and Typescript project with legacy code. The project utilizes the vue-i18n library for handling translations, using this.$t in every component to access translations stored in directories like translations/[en/es]/FileName.ts. Here's an example:
//translations/en/Forms.ts
export default {
Fields: {
Name: "Name",
LastName: "Last name",
Direction: "Full direction",
ZipCode: "Zip code",
Phone: {
Number: "Number",
Prefix: "Prefix"
}
}
};
The translation usage looks like this:
//pages/UserForm.vue
<div>
<label> {{$t("Fields.Direction")}} </label>
<input type="text" name="directionField" required />
</div>
Despite the integration of the library, there are still many strings within the <templates> that were manually included by previous developers without utilizing the translation library, such as:
<div v-if="hasError">
Oops! There seem to be bugs
</div>
My query: I am wondering if there exists a method, library, plugin, or script that can highlight all untranslated strings automatically?