For a TypeScript extension, the yo generator creates the src/extension.ts file with the framework for a basic extension.
The import statements make additional libraries available for use. More can be added, but by default the VS Code and Azure Data Studio (azdata) are added to the code.
The activate and deactivate functions control the code executed when the extension is activated or deactivated, respectively. Activation events are defined within package.json.
To associate code to execute with a command from Azure Data Studio, use registerCommand.
The code snippet for this section is available here.
In your generated extension framework, within the activate function add an additional command:
Access the current Azure Data Studio connection with connection.getCurrentConnection() and create a code block that will execute if a connection is found:
If we're connected, we want to establish a QueryProvider for the connection and run a query. In this example, we're counting on the user being connected to a StackOverflow sample database.
In Summary:
In VS Code select the package.json file (extension manifest). We will be editing two regions of code to fully enable the new command we have added. (commands and activation events)
In the contributes\commands array, add another command and title object with the same command identifier from our previous step ("extension.getDown").
Because we want to be able to immediately use this command, it also needs to be added as an activation event in the activationEvents array.
While the APIs are largely self-documenting, keeping up with changes and additions is easiest through the GitHub RSS feed for the API file: https://github.com/microsoft/azuredatastudio/commits/master/src/sql/azdata.d.ts.atom
There are 2 ways to add the proposed Azure Data Studio APIs to your project:
In the terminal at the root folder of your project, run: npm run proposedapi
Grab the azdata.proposed.d.ts file from the Azure Data Studio repository.
Create a folder in src named typings and place the file there.
The code snippet for this section is available here.
We're going to update Hello World to tell us a little info about our machine.
First, open the terminal and install the NodeJS package 'os' to this project with the command npm install os. At the top of the extension.ts file with the other import statements, add a line to access this package:
import * as os from 'os';
Find the command for 'extension.sayHello' in your extension framework. Add a variable for the hostname ahead of the information message and edit the message to include the hostname.
Some extensions might need more information about a machine, such as the operating system. We can access the OS type through this NodeJS package and show a message to the user based on the OS of machine.
In Summary:
Testing the new functionality:
I haven't put together an Azure Data Studio example for serving up a webview yet, but an additional way to add extension functionality is to send HTML content to a webview.
Beyond the use of VSCode/Azure Data Studio APIs, additional NodeJS libraries, and webviews - is the opportunity to access native code through an extension.
You can continue to add functionality, debug, or package your extension for distribution.