I needed a way to preview the contents of localized labels while working on lookml files, so I created a VS Code extension to do just that.
When you want to localize labels for dimensions and measures inside of Looker, you need to use a json file per language, containing the corresponding strings (learn more). That looks something like this:
en.strings.json
{
"dogs.name.label": "Dog Name",
"dogs.name.description": "The name of the dog.",
"dogs.weight.label": "Dog Weight",
"dogs.weight.description": "The weight of the dog"
}
fr.strings.json
{
"dogs.name.label": "Nom du chien",
"dogs.name.description": "Le nom du chien.",
"dogs.weight.label": "Poids du chien",
"dogs.weight.description": "Le poids du chien."
}
dogs.view.lkml
view: dogs {
sql_table_name: prod.dogs ;;
dimension: name {
label: "dogs.name.label"
description: "dogs.name.description"
type: string
sql: ${TABLE}.name ;;
}
dimension: weight {
label: "dogs.weight.label"
description: "dogs.weight.description"
type: number
sql: ${TABLE}.weight ;;
}
}
This is all fine, except when you are working inside of view.lkml or explore.lkml files and want to quickly see what the label is for a given field. The Looker UI provides no quick way to get this information and the alternative is to have the localized strings file open side-by-side to search and find the corresponding label. It's not a great experience.
So I created a Visual Studio Code extension that allows me to see the value of the label found in the localized strings file. Here are the steps I took to create this very basic extension:
First, I followed the steps in the VS Code Extension documentation to get template extension working.
Then I figured out how to get the extension to activate only when a relevant file is open (of type lookml):
package.json
"activationEvents": [
"onLanguage:lookml"
],
The hardest part of this whole project was the following: getting the contents of the localized strings file. I tried a variety of different VS Code functions before finding a snippet that was doing something similar:
extension.js
vscode.workspace.findFiles(new vscode.RelativePattern(folder, '**/' + localizedStringsFileName), '', 1)
.then((uris) => {
const uri = uris[0];
vscode.workspace.fs.readFile(uri).then((result) => {
const decoder = new TextDecoder('utf-8');
const fileText = decoder.decode(result);
const jsonObject = JSON.parse(fileText);
labelLookup = jsonObject;
})
});
The hover event listener was easy to set up since vscode provides a working example in their docs. I just had to match up the label value with a key in my labelLookup object.
extension.js
vscode.languages.registerHoverProvider('lookml', {
provideHover(document, position) {
const lineText = document.lineAt(position.line).b;
const splitText = lineText.split(':');
const key = splitText[0].trim();
const val = splitText.slice(1).join(':').trim().replace(/['"]+/g, '');
if (['label', 'view_label', 'group_label', 'group_item_label', 'description'].indexOf(key) > -1) {
const result = labelLookup[val];
return {
contents: [result]
};
}
}
});
The result is that when I hover any of the labels (or view_label, group_label, etc) that are localized and found in my designated localized strings file, I can preview the label associated with the line line in question without needing to search for it in the strings file.
Here are some things I'd like add, if they're within reach. I don't plan to invest much time learning the VS Code extension api:
Cmd + Click the label to navigate to the localized strings file location and edit the label.