Enhance your Angular application's internationalization process with this Visual Studio Code extension that automatically generates i18n translation keys for HTML and TypeScript files.
Usage
HTML: Go to your HTMl file, press F1, type createi18nhtml, and hit Enter.
TypeScript: Select a string or multiple string (e.g. alt + mouse selection) in a TypeScript file, press F1, type createi18nts, and hit Enter.
Examples
HTML
Before:
<input placeholder="Enter your name">
<p>Welcome to our site!</p>
After:
<input placeholder="Enter your name" i18n-placeholder="@@ANGULAR_FILENAME_ENTERYOURNAME">
<p i18n="@@ANGULAR_FILENAME_WELCOMETOOURSITE">Welcome to our site!</p>
TypeScript
Before:
const greeting = "Welcome to our site!";
const greeting = "`Welcome to our site ${hello}!`";
After:
const greeting = $localize`:@@ANGULAR_FILENAME_WELCOMETOOURSITE:Welcome to our site!`;
$localize`:@@ANGULAR_FILENAME_WELCOMETOOURSITE:Welcome to our site ${hello}!`;