vscode-snippet-contrib

VSCode Snippet Contributor Example

An example demonstrating how to implement a code snippet contribution using the VSCode code snippet framework.

Documentation

A code snippet contribution is a VSCode extension which:

1. Declares an extensionDepedency to saposs.code-snippet:

   • {
       "extensionDependencies": ["saposs.code-snippet"]
     }

2. Returns an object from its activate() method which defines the snippet's behavior (GUI form definition / code generation or edit actions).
   • TODO: define API's interface in TypeScript.
3. Implements a trigger to use the code snippet.

• For example: a VSCode context menu command.

Running the Extension

pre-requisites

• Yarn >= 1.4.2
• A Long-Term Support version of node.js
• VSCode 1.39.2 or higher or Theia 0.12 or higher.
• saposs.code-snippet (framework) extension installed in your VSCode instance.
  • Available on github releases.

Demo Flow

In your terminal:

1. yarn (install/update dependencies)
2. yarn compile

In your "root" VSCode instance:

1. File Menu --> Open Folder --> .
2. Run Menu --> Start Debugging.

This will open a new VSCode instance in which you should now:

1. File Menu --> Open Folder --> <the dummy-scripts folder>.
2. View --> Command Palette --> Create Launch Configuration.

This will open the snippet GUI in which you should now:

1. For Type dropdown --> choose "node".
2. For Name input field --> enter "foo".
3. For Program value --> use the file explorer to choose the hello-world.js.
4. Click the Create Button.
5. Approve the VSCode refactoring preview.

A launch.json file has now been created in the .vscode folder. With the launch configuration you have defined.

You can now execute this launch configuration via the VSCode Run and Debug pane.

• https://code.visualstudio.com/Docs/editor/debugging