How I Made My First VS Code Extension

HelloWorld Setup

I initially set up their HelloWorld https://code.visualstudio.com/docs/extensions/example-hello-world

$ cd ~/.vscode/extensions$ npm install -g yo generator-code$ yo code 
screenshot of text in next code block below
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? Console Log
? What's the identifier of your extension? console-log
? What's the description of your extension? it console logs
? What's your publisher name (more info: https://code.visualstudio.com/docs/tools/vscecli#_publishing-ext
ensions)? Kevin
? Enable JavaScript type checking in 'jsconfig.json'? No
? Initialize a git repository? (Y/n)n
$ cd console-log
$ code .
Hello World is displayed in an information Message

Making Changes Bit by Bit

My goal was to be able to highlight some text and have it console.log that text.

  1. Change the message appearing in info message
  2. Show the highlighted text in info message
  3. Show the final expression console.log(‘highlightedText’, highlightedText) in info message
  4. replace the highlighted text withe the final expression console.log(‘highlightedText’, highlightedText)
  5. Update the name of the expression from Hello World to Console Log
//extension.js// The module 'vscode' contains the VS Code extensibility API// Import the module and reference it with the alias vscode in your code belowconst vscode = require('vscode');// this method is called when your extension is activated// your extension is activated the very first time the command is executedfunction activate(context) {// Use the console to output diagnostic information (console.log) and errors (console.error)// This line of code will only be executed once when your extension is activatedconsole.log('Congratulations, your extension "console-log" is now active!');// The command has been defined in the package.json file// Now provide the implementation of the command with  registerCommand// The commandId parameter must match the command field in package.jsonlet disposable = vscode.commands.registerCommand('extension.sayHello', function () {// The code you place here will be executed every time your command is executed// Display a message box to the uservscode.window.showInformationMessage('Hello World!');});context.subscriptions.push(disposable);}exports.activate = activate;// this method is called when your extension is deactivatedfunction deactivate() {}exports.deactivate = deactivate;
vscode.window.showInformationMessage('Hello Betty!');
//extension.js// The module 'vscode' contains the VS Code extensibility API// Import the module and reference it with the alias vscode in your code belowconst vscode = require('vscode');// this method is called when your extension is activated// your extension is activated the very first time the command is executedfunction activate(context) {// Use the console to output diagnostic information (console.log) and errors (console.error)// This line of code will only be executed once when your extension is activatedconsole.log('Congratulations, your extension "console-log" is now active!');// The command has been defined in the package.json file// Now provide the implementation of the command with  registerCommand// The commandId parameter must match the command field in package.jsonlet disposable = vscode.commands.registerCommand('extension.sayHello', function () {// The code you place here will be executed every time your command is executedconst editor = vscode.window.activeTextEditor
const selection = editor.selection
const text = editor.document.getText(selection)
// Display a message box to the uservscode.window.showInformationMessage(text);});context.subscriptions.push(disposable);}exports.activate = activate;// this method is called when your extension is deactivatedfunction deactivate() {}exports.deactivate = deactivate;
const editor = vscode.window.activeTextEditor
const selection = editor.selection
const text = editor.document.getText(selection)
shows the text editor highlighted within the code and then editor displayed within the information message
//extension.js// The module 'vscode' contains the VS Code extensibility API// Import the module and reference it with the alias vscode in your code belowconst vscode = require('vscode');// this method is called when your extension is activated// your extension is activated the very first time the command is executedfunction activate(context) {// Use the console to output diagnostic information (console.log) and errors (console.error)// This line of code will only be executed once when your extension is activatedconsole.log('Congratulations, your extension "console-log" is now active!');// The command has been defined in the package.json file// Now provide the implementation of the command with  registerCommand// The commandId parameter must match the command field in package.jsonlet disposable = vscode.commands.registerCommand('extension.sayHello', function () {// The code you place here will be executed every time your command is executedconst editor = vscode.window.activeTextEditor
const selection = editor.selection
const text = editor.document.getText(selection)
const newText = `console.log('${text}', ${text})// Display a message box to the uservscode.window.showInformationMessage(newText);});context.subscriptions.push(disposable);}exports.activate = activate;// this method is called when your extension is deactivatedfunction deactivate() {}exports.deactivate = deactivate;let wonderfulShow = 'The Young Offenders'
wonderfulShow
const newText = `console.log('${text}', ${text})`
"console.log('" + text + "', " + text + ")"
let wonderfulShow = 'The Young Offenders'
wonderfulShow
//extension.js// The module 'vscode' contains the VS Code extensibility API// Import the module and reference it with the alias vscode in your code belowconst vscode = require('vscode');// this method is called when your extension is activated// your extension is activated the very first time the command is executedfunction activate(context) {// Use the console to output diagnostic information (console.log) and errors (console.error)// This line of code will only be executed once when your extension is activatedconsole.log('Congratulations, your extension "console-log" is now active!');// The command has been defined in the package.json file// Now provide the implementation of the command with  registerCommand// The commandId parameter must match the command field in package.jsonlet disposable = vscode.commands.registerCommand('extension.sayHello', function () {// The code you place here will be executed every time your command is executedconst editor = vscode.window.activeTextEditor
const selection = editor.selection
const text = editor.document.getText(selection)
const newText = `console.log('${text}', ${text})editor.edit(builder => builder.replace(selection, newText))// Display a message box to the user
vscode.window.showInformationMessage(newText);});context.subscriptions.push(disposable);}exports.activate = activate;// this method is called when your extension is deactivatedfunction deactivate() {}exports.deactivate = deactivate;let wonderfulShow = 'The Young Offenders'
wonderfulShow
editor.edit(builder => builder.replace(selection, newText))
// vscode.window.showInformationMessage(newText);

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store