After much thought, I've decided to embark on creating my own VS Code extension specifically for TypeScript/Angular code snippets.
The first snippet I've developed is called Forloop.snippet:
const ForLoopSnippet = 'for (let {{iterator}} = {{start}}; {{iterator}} <= {{end}}; {{iterator}} += {{step}}){//code}'
I also have my extension.ts file which contains the necessary code to activate this snippet.
import * as vscode from 'vscode';
import * as fs from 'fs';
const forLoopSnippetFilePath = vscode.Uri.file('../Src/typescript/Forloop.snippet');
const forLoopSnippet = fs.readFileSync(forLoopSnippetFilePath.fsPath, 'utf8');
export function activate(context: vscode.ExtensionContext) {
console.log("Activating for loop snippet");
let disposable = vscode.commands.registerCommand('extension.insertForLoopSnippet', () => {
const editor = vscode.window.activeTextEditor;
if (editor) {
editor.insertSnippet(new vscode.SnippetString(forLoopSnippet));
console.log("inserted");
}
});
context.subscriptions.push(disposable);
}
export function deactivate() {}
In addition, there's the package.json file containing essential details of the extension:
{
"name": "angulartypescriptexctention",
"version": "1.0.0",
"description": "",
"main": "./Src/extension.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vscode": "^1.1.37"
},
"devDependencies": {
"@types/node": "^20.12.7"
},
"contributes": {
"keybindings": [
{
"command": "extension.insertForLoopSnippet",
"key": "ctrl+shift+f",
"mac": "cmd+shift+f",
"when": "editorTextFocus"
}
]
}
}
Despite activating the extension, I'm encountering an issue where the snippet doesn't appear as expected. I've tried multiple key combinations and even searched through commands, but it seems to be missing.
As a beginner in this field, I may be overlooking something crucial. At times, the log says the extension is being activated, but nothing happens.