How do I bundle and read files within my extension? - vscode-extensions

Question

I'm learning how to create vscode extensions and I'm simply trying to emulate a template plugin to be used internally within my company. I'd like to store the template in a file within the extension and then read the contents from that file and output it to the active window. So given the following example directory structure of the extension (other files omitted for brevity):
workspace/
|- templates/
| |- template1.yaml
| |- template2.yaml
|- extension.js
For the command that I'm registering, I'd simply like to read from one of those files and send it to the window as a snippet, but I don't know how to find the path to that folder
// extension.js
function activate(context) {
context.subscriptions.push(
vscode.commands.registerCommand("xxx.my-command"), function() {
let path = // ???/templates/template1.yaml
fs.readFile(path, (err, data) => {
let snippet = new vscode.SnippetString(data);
vscode.window.activeTextEditor.insertSnippet(snippet);
}
})
})
)
}
When I try to use relative paths to that templates folder, it appears to be relative to the VSCode installation. I looked around TextDocument provider etc but all of the examples were relevant to using the active editor as the document. How can I include files with my extension and access the contents of those files like this?

Answer 1

You should use context.asAbsolutePath, which by documentation says:
/**
* Get the absolute path of a resource contained in the extension.
*
* *Note* that an absolute uri can be constructed via {#linkcode Uri.joinPath} and
* {#linkcode ExtensionContext.extensionUri extensionUri}, e.g. `vscode.Uri.joinPath(context.extensionUri, relativePath);`
*
* #param relativePath A relative path to a resource contained in the extension.
* #return The absolute path of the resource.
*/
asAbsolutePath(relativePath: string): string;
For instance
const path = context.asAbsolutePath("templates/template1.yaml");
I also suggest you to avoid using Node's fs. Instead, use workspace.fs whenever possible. It will enable your extension to work on Remotes and Web, when necessary. More details here https://code.visualstudio.com/api/extension-guides/virtual-workspaces#review-that-the-extension-code-is-ready-for-virtual-resources
Hope this helps

Answer 2

I found that I could actually do a couple different things:
const path = require('path')
let templatePath = path.resolve(__dirname, './templates/template1.yaml');
But also as Mark suggested in the comments, using the extension context also provides that path:
/**
* #param {vscode.ExtensionContext} context
*/
function activate(context) {
let templatePath = context.extensionPath + '/templates/template1.yaml';
}
I went with the latter since it is being injected by the runtime which seemed better to me if not simpler. Thanks Mark!