Add User Snippet to VS Code

For anyone working on the UI and using VS Code, you can create a user Snippet and keyboard shortcut so that you can easily add the localization code when needed. Add the user Snippet to VS Code by going to File->Preferences->User Snippets and pasting the code below in the javascript.json file.

 

"AddLocalizedString": {
"prefix": "loc",
"body": [
"{this.props.translate('${1:stringKey}')}$0"
],
"description": "Add placeholder for localized string. Replace stringKey with localized string key."
}

 

To use your snippet you would type loc to insert this line in your code:
{this.props.translate('stringKey')}

 

then replace the stringKey text with the key of the localized string found in the en.js language file.

 

For example:
{this.props.translate('stringKey')} for the string 'Schedule' becomes {this.props.translate('scheduleString')}

 

You can also add a keyboard shortcut by going to File->Preferences->Keyboard Shortcuts and then clicking the link at the top to keybindings.json. Add the following to the keybindings.json file:

 

{
"key": "ctrl+l ctrl+l",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "javascript",
"name": "AddLocalizedString"
}
}

 

When you enter ctrl+l twice, the code for localizing a string will be inserted. You can change the "key" in the shortcut above to whatever combination works for you.