Visual Studio Code Example Extension

15-09-2021

Visual Studio Code Example Extension

Extension packs are a type of extension that simply bundles other extensions that are typically installed together.

Visual Studio Code Extensions
Free Visual Studio Code Examples
Visual Studio Code File Extensions
Best Visual Studio Code Extension
Visual Studio Code Example Extensions

Visual Studio Code 1.52, known as the November 2020 release, has an extension bisect feature, to troubleshoot which extensions are causing issues in the editor. Visual Studio for Mac; Visual Studio Code; Visual Studio Team Services; Other useful resources. Publish your completed extension to the Visual Studio Marketplace, which provides a convenient place for developers to find and install your extension. Join the Visual Studio Partner Program for free to get access to dedicated resources to support. The Azure Functions extension for Visual Studio Code lets you locally develop functions and deploy them to Azure. If this experience is your first with Azure Functions, you can learn more at An introduction to Azure Functions. The Azure Functions extension provides these benefits: Edit, build, and run functions on your local development computer. For example, you don’t want to enable the JavaScript extensions in a Go project. There is a list of recommended extensions, which include all the most popular tools. Since I edit lots of markdown files for my blog, VS Code suggests me the markdownlint extension, which provides linting and syntax checking for Markdown files. The extension can be installed either from Marketplace, integrated extension manager inside Visual Studio Code, or using the VSIX installation file available as a download on this page. I’m gonna go with the integrated extension manager, but feel free to use any of the other two methods.

For example, rather than hunting down and installing Live Share, Live Share Audio, and Team Chat one by one, you can simply download the Live Share Extension Pack to install all of them for you in one click. Should you want to uninstall all the bundled extensions, uninstalling the pack will automatically remove each extension.

You can browse Software's open source extension packs to see more examples:

Why you should create extension packs

If you are tired of managing an entire toolbox of VS Code extensions, extension packs are a great way to improve your workflow, as well as that of your team and the wider development community.

Easy sharing: Extension packs are easy to share with other developers, whether they are on your team or part of the community. Packs are an easy way to give back to the VS Code community and help others discover new tools.

Better organization: Packs can also help keep track of your own development environments, like a more public version of Settings Sync that can be replicated by anyone on any machine. You can also disable and enable packs to control the extensions when you need them.

Now let’s try building one!

Building your extension pack

If you have never built an extension before, you will need to set up your development environment. You will need to install:

Node.js, a JavaScript runtime that powers VS Code extensions
Yeoman, a scaffolding tool that will build the framework for your extension pack
Visual Studio Code Extension Generator, the Yeoman generator that will help you build your extension

Node.js is a popular open source JavaScript runtime that executes JavaScript outside of the browser. VS Code has support for JavaScript and TypeScript out-of-the-box as well as Node.js debugging. You'll need to have Node.js installed to be able to run your application in debug mode in VS Code. Check out the different installers if you don't already have Node.

There are many different ways to install Node across different platforms, but the most straightforward way to install Node is to use the official installers from the Node website.

You can check that you have Node installed by opening up the terminal and entering node -v. Also make sure that npm, the Node Package Manager that handles package installation for Node tools, is installed with npm -v.

Once you have installed Node, you can install Yeoman and the Visual Studio Code Extension Generator. Together these tools will automatically build the basic framework of your extension with the necessary files.

Yeoman is known as the “web’s scaffolding tool.” It provides easy access to a large ecosystem of generators to quickly jumpstart projects. The Visual Studio Code extension generator will guide you through the process of laying out your extension’s file structure.

To install both Yeoman and the Visual Studio Code Extension Generator, run:

Once you have these three tools installed, open up your terminal, navigate to your project directory, and run:

You will be prompted with the following questions that will help generate the scaffolding for your extension pack.

What type of extension do you want to create?New Extension Pack

Add the currently installed extensions to the extension pack?N

What’s the name of your extension?extension-name

What’s the identifier of your extension?extension-name

What’s the description of your extension?Creating a test pack!

Once you have completed the process, your terminal should look similar to this:

Visual Studio Code Extensions

After answering these questions, a project will be created with the following file structure:

If you are interested, read through vsc-extension-quickstart.md to get a quick overview of how extensions are created.

To start customizing your pack, navigate to package.json, where you will add the unique identifiers of the extensions that will be part of your extension pack. You will see a placeholder key/value pair:

Next, find a few extensions on the marketplace that you think would make a useful pack. Every extension has a unique identifier in the form publisher.extensionName, which can be found on the extensions’ download page in the VS Code marketplace. Look for a section on the right side of the page More Info that will include the unique identifier.

Here’s an example for Code Time, with unique identifier softwaredotcom.swdc-vscode.

Add as many extensions as you need to the extensionPack array in package.json.

As an example, Software's productivity pack looks like this:

Once you’ve added the unique identifiers, you're almost done! Let’s make a few final touches to make your extension pack extra polished for your fans.

Link to a GitHub repository

It is recommended that you add a GitHub repository to your extension pack. Doing so will help you strengthen your GitHub profile and allow other developers who download your pack to easily submit pull requests and file bugs.

First initialize a Git repository with git init in your extension folder and push the project to GitHub. In package.json add a link to the repository:

Design an eye-catching icon

You should also add an icon to your extension pack that will help others identify your extension in their editors and in the marketplace.

Icons must be at least 128px by 128px. You can make icons with Figma, a fantastic free tool for design work. Add your image to your project folder and add the following to package.json:

Write a descriptive README and changelog

Your README will be displayed in the extension marketplace, so it is a great way to describe what problem your extension pack solves, your inspiration for creating it, and the extensions that are included.

Free Visual Studio Code Examples

You can include links to each individual extension alongside a screenshot of the extension in action. If you are looking for an example, you can see the READMEs for the productivity pack here and the best dark themes pack here.

Similarly, updating the changelog is also helpful for you and the developers that download your pack. You can show which extensions you have added to the current version. The changelog can help you keep track of how the pack changes, should you decide to add more in the future and push an update.

Tidy up your project

Lastly, you should delete vsc-extension-quickstart.md and any other extraneous files before publishing.

Publishing your extension pack

To publish your extension, you’ll need to install Visual Studio Code Extensions, a command line tool for packaging, publishing, and managing extensions. Open up your terminal again and run:

The fastest way to gain access to the VS Code marketplace is to create both a Microsoft account and a publisher profile on the management page for the VS Code marketplace. Here you can create a publisher profile to add your extensions to the marketplace.

Once you've created a publisher, be sure to go back to your extension pack and edit the package.json file by adding 'publisher”: “publisher-name” as a new key/value pair using your newly created publisher name.

You now have the option to upload your extension, which will then be available in the VS Code marketplace. Navigate to the directory containing your extension pack and simply run vsce package, which will create a VSIX file. The VSIX file contains all of the information needed to install and run your extension pack. Upload the resulting VSIX file on your publisher management page you created earlier.

If you would like to publish using a more advanced workflow, you can publish directly from the command line, but you’ll need to create an Azure DevOps Organization. You can read more about how to do so in the Visual Studio Code documentation.

Once your extension is approved (a process that should only take a few minutes), return to the publisher management page and find your extension in the VS Code marketplace.

Features

With AdaptiveCards Studio you can author cards directly in Visual Studio Code. The Extension automatically detects all Adaptive Cards in your working space and lets you easily edit the card template and sample data.

Extension Settings

To use the Extension you must configure it first!

This extension contributes the following settings:

acstudio.defaultHostConfig : The HostConfig to be used when rendering cards

Visual Studio Code File Extensions

Usage

Open the Adaptive Cards Panel and select a card.... thats all you have to do :)

Testing Cards

Snippets

Best Visual Studio Code Extension

The Extension comes with various snippets to make authoring cards even easier. Just press ctrl+space anywhere in the AdaptiveCard Json

Snippets for Adaptive Cards Elements:

ac-txt : TextBlock with minimum properties
ac-txtfull : TextBlock with all properties
ac-col3 : Columnset with 3 columns
ac-col2 : Columnset with 2 columns
ac-fctset : Factset
ac-ctr : Container
ac-img : Image

Snippets for Adaptive Card Samples:

ac-empty : A new, blank AdaptiveCard
ac-activityUpdate : Adaptive Cards Activity Update Sample
ac-expenseReport : Adaptive Cards Expense Report Sample
ac-inputForm : Adaptive Cards Input Form Sample