---
title: "Visual Studio Code extensions for Bot Framework devs"
author: Stephan Bisser
canonical: https://bisser.io/visual-studio-code-extensions-for-bot-framework-devs/
date: 2020-07-27
tags: [AI, Bot Framework]
description: "As a Bot Framework enthusiast, I was looking for ways how to speed up routines in my daily tasks. Therefore I decided to publish some nice little helpers together with my friends from the Bot Framework Community to speed up tasks when working on a bot a bit while working with VS Code."
status: legacy
license: All rights reserved. Quote with attribution and a link to the post.
---


## Motivation

As a Bot Framework enthusiast, I was looking for ways how to speed up routines in my daily tasks. Therefore I decided to publish some nice little helpers together with my friends from the [Bot Framework Community](https://github.com/BotBuilderCommunity) to speed up tasks when working on a bot a bit. And this is what we currently published:

**All Visual Studio Code snippets can be downloaded from [here](http://bit.ly/bfcvscode).**

**All Visual Studio Code commands can be downloaded from [here](http://bit.ly/bfcvscodecommands).**

## Snippets

Currently we have snippets available for the following categories:

- Bot Framework Web Chat
- LUIS (.lu) files
- Adaptive Cards

### Create a basic Web Chat HTML file structure - bf-wc-create-basic-hml

The snippet `bf-wc-create-basic-hml` creates a basic plain html/js web chat within an HTML file:

{{< figure src="https://raw.githubusercontent.com/BotBuilderCommunity/botbuilder-community-tools/master/bfc-vscode-snippets/assets/bfc-webchat-basic-snippet-demo.gif" >}}

### Create a Web Chat HTML file structure with advanced styling - bf-wc-create-style-html

The snippet `bf-wc-create-style-html` creates a plain html/js web chat within an HTML file including some styling options already added to the web chat:

{{< figure src="https://raw.githubusercontent.com/BotBuilderCommunity/botbuilder-community-tools/master/bfc-vscode-snippets/assets/bfc-webchat-styling-snippet-demo.gif" >}}

### Create a sample Language Understanding (.lu) file - bfc-lu-create

The snippet `bfc-lu-create` creates a the required structure within .lu files used for managing LUIS applications:

{{< figure src="https://raw.githubusercontent.com/BotBuilderCommunity/botbuilder-community-tools/master/bfc-vscode-snippets/assets/bfc-lu-snippet-demo.gif" >}}

### Create a sample Adaptive Card "Activity Update" - bf-ac-activityUpdate

Adds a [activity update sample card](https://adaptivecards.io/samples/ActivityUpdate.html) to your project.

### Create a sample Adaptive Card "Input Form" - bf-ac-inputForm

Initializes a new [input form sample card](https://adaptivecards.io/samples/InputForm.html) to be used to gather input from users.

### Create a sample Adaptive Card "Weather Compact" - bf-ac-weatherCompact

Creates the [weather compact sample card](https://adaptivecards.io/samples/WeatherCompact.html) to demo a weather card.

### Create a sample Adaptive Card "Expense Report" - bf-ac-expenseReport

Provides you with the [expense report sample card](https://adaptivecards.io/samples/ExpenseReport.html) to include in your bot's project.

## Commands

At the moment we published one command which lets you import a new LUIS app usign the [Bot Framework CLI](https://github.com/microsoft/botframework-cli) from a .lu file (which you could create with our snippets) to make the LUIS deployment process far easier. It can be done like this:

{{< figure src="https://raw.githubusercontent.com/BotBuilderCommunity/botbuilder-community-tools/master/bfc-vscode-commands/assets/importLuisApp.gif" >}}

All you need to do is to create a .lu file and populate it and then right-click it from the explorer view and select **Import LUIS application** fill out the details and the command will create a new LUIS application for you!

> If you have any ideas or feeback, please feel free to share it [here](https://github.com/BotBuilderCommunity/botbuilder-community-tools) or do a PR 😎