Building a VS Code Extension to Generate Snippets

A common challenge in group projects, particularly when multiple developers work on the same codebase, is ensuring consistent coding styles. Another frequent issue is the need to search for frequently used APIs of the framework or library used. If these scenarios sound familiar, the solution presented here may be just what you need: building a VS Code extension to generate snippets.

The Power of Snippets in VS Code

Visual Studio Code (VS Code) supports global snippets, which are pre-defined pieces of code that help streamline the coding process. For instance, typing "log" in VS Code suggests a snippet to log output to the console. Similarly, snippets exist for common operations like foreach. These can significantly simplify development tasks.

You can also create your own snippets manually. Here’s a quick guide:

1. Press Command+Shift+P and type "snippets".
2. Select your programming language to open a file where you can write your snippet in JSON format.
3. Define your snippet with a prefix, body, and description.

Limitations of Manual Snippets

While manually adding snippets is helpful, it has its limitations:

• Lack of dynamic variable support.
• Difficulty in handling complex languages.
• Poor shareability since each developer must manually update their snippets.
• No collaborative changes, requiring constant updates and sharing.
• Steep learning curve for new team members.

Building a VS Code Extension with Yeoman

To address these challenges, building a VS Code extension to generate snippets is a robust solution. Here’s how to get started:

1. Install Yeoman and the VS Code Extension Generator:

npm install -g yo generator-code

2. Run the Yeoman generator: Follow the prompts to create a basic boilerplate for your extension:

yo code

3. Launch the extension development host instance: Press F5 in VS Code, which opens a new window for debugging the extension.

Adding Snippets to the Extension

Following are the steps to be followed to add snippets and publish a vscode extension:

1. Set Up Snippets Directory:
   • Create a snippets directory in your extension folder.
   • Add a language-specific JSON file (e.g., javascript.json) in the snippets directory.
2. Define Snippets:
   • Include snippet definitions in the JSON file, specifying prefix, body, and description. For more info, check this for more info.
   • Update package.json to register these snippets under the contributes section. Refer here: https://code.visualstudio.com/api/references/contribution-points

Automating Snippet Generation

Manual snippet creation is tedious, especially with numerous components. We, at Gluestack leverages Storybook for generating snippets automatically:

1. Use Storybook as Source:
   • Each component and its variations are documented in Storybook.
2. Scripted Snippet Generation:
   • Write a script to parse Storybook stories through AST and generate the corresponding JSON snippets.
   • This script handles fetching component names, bodies, and imports, streamlining the snippet creation process.
   • Having a single source of truth for multiple things helps us reducing minor changes in the APIs.

Publishing the Extension

Once the extension is ready, publishing it to the VS Code Marketplace involves:

1. Build the Extension:

vsce build

2. Publish the Extension:

• Log in to your Azure Developer Dashboard and create an account.
• Generate a personal access token and use it to log in via the terminal:

vsce login

Publish the extension:

vsce publish

Summing Up

By building a VS Code extension to generate snippets simplifies coding consistency and efficiency for developers. This automated approach ensures that all developers on a project use the same standards and reduces the learning curve for new team members. Embracing such tools can greatly enhance the development workflow and maintain high coding standards across teams.

Don’t miss out on the complete talk and presentation below ⬇️