How to Create an Extension: Custom Snippets

This tutorial will show you how to write extensions for creating and working with custom snippets.


Before you begin, you must install:

  • TeamSQL. You must also have a TeamSQL account that you use to log into your TeamSQL account -- if you don't already have one, you'll be prompted to create an account the first time you launch TeamSQL
  • Node.js. Node.js comes with npm, but because the latter is updated more frequently, you'll want to make sure that you're using the most up-to-date version
  • TypeScript

Install the TeamSQL CLI

You can install the TeamSQL CLI by running the following command:

npm i -g @teamsqlio/teamsql-cli

Next, you'll need to log in with your TeamSQL credentials. Begin the login process by running

teamsql-cli login

You'll be prompted for your username and password. Be sure to use the same set of credentials you're using to log in to your local instance of TeamSQL.

Create Your Extension

The easiest way to begin creating an extension is to clone the Snippet template provided as a starter for you.

Navigate to the disk location where you want to work on your extension. Run the following command to clone the Context Menu template:

teamsql-cli create

Use the up/down arrow to change your selection, and press Enter (or Return) to begin the process of cloning the Snippet template. You'll be prompted to Please enter a name for your project's folder.

Once you receive a message that the cloning process is complete, you can begin working on your extension.

The Snippet Extension Template Contents

All extension project folders must contain, at a minimum, the four following files in the root:

  • README.MD: Markdown file containing well-written description of your extension, as well as pertinent images, usage instructions, and so on. If we approve your extension and it becomes available in the TeamSQL Extension Store, this file's content will be used as the description.
  • icon.png: An icon (512px x 512px) in PNG format to be used with your extension
  • index.js: The main file of your extension (we will cover the specifics required in this file later on in this tutorial)
  • package.json: File containing configuration information about your npm package

Writing Your Extension

The code for your extension goes into the index.js file, which you will later compile into TypeScript for installation.

There are several different classes that allow you to implement functionality where your extension interacts with or takes advantage of data available in the TeamSQL environment. For the most part, you do not have to utilize these classes if not necessary. The exception to this is your main class, which must extend the Extension class and implement one of the interfaces available via the TeamSQL Extension SDK.

import { Extension } from "@teamsqlio/ts-extension-sdk/dist/source/Extension";
import { IExtensionSnippet } from "@teamsqlio/ts-extension-sdk/dist/source/interfaces/groups/IExtensionSnippet"
import { Snippet } from "@teamsqlio/ts-extension-sdk/dist/source/snippet/Snippet"
import { DatabaseType } from "@teamsqlio/ts-extension-sdk/dist/source/enums/DatabaseType"

    Your extensions' main class must be named TeamSQLExtension and extend the Extension class.
export class TeamSQLExtension extends Extension implements IExtensionSnippet {
    getSnippets(databaseName: string, schemaName: string): Array<Snippet> {
        let snippets = new Array<Snippet>();

        // The text of the snippet
        let insertText = `SELECT * FROM \`\${1:databaseName}\`.\`\${2:table_name}\` LIMIT 200;`;

        // The label is the name of your snippet
        let label = "SELECT * FROM... (My Snippet)";

        // Documentation allows you to store additional information about your snippet for reference
        let documentation = `Simple SELECT command`;
        let snippet = new Snippet(DatabaseType.MYSQL, label, insertText, documentation);
        return snippets;


Prepare for Installation

Now that you've created the extension, you'll need to perform the following steps to prepare it for installation.

  1. In the extension's root, install the required npm packages for this tutorial by running npm install

  2. Build the extension project with TypeScript by running tsc -p .

  3. At this point, you're ready to install the extension. You can do so by running the following command: teamsql-cli submit --install. If the installation was successful, you're ready to use your extension!

Use the Extension

After launching TeamSQL and connecting to the database of your choice, you'll open up an editor window. Snippets are available to you immediately -- simply begin typing your query statement, and if TeamSQL sees that there's a snippet matching what you're typing, you'll have the option of inserting the snippet. As an example, you can see the a snippet we created located at the top of the list in the following screenshot.

results matching ""

    No results matching ""