Tag Archives: visual studio code

Office Fabric UI Snippets for VS Code

Update for Release 1.2: http://blog.mannsoftware.com/?p=2491

Update for Release 1.0: http://blog.mannsoftware.com/?p=2371

Release Date: Feb 26, 2016

Status: Beta

Provided By: Sector 43 Software (David Mann)

Details: s43.io/FabricSnippets

Repo: https://github.com/Sector43/FabricSnippets

Based on: Fabric release 2.01 (Feb 5, 2016)

These snippets are a first go at making the Office UI Fabric easier to use. In general, the HTML is taken directly from the Office UI Fabric GitHub repository, with some tweaking.

Snippets generally fall into one of two flavors:

  • Simple Components: these have no JavaScript elements and so the snippet just expands into the correct HTML to render the component
  • Complex Components: these aren’t really “complex” they simply have some JavaScript associated with them. In these cases, there is a snippet for the component and one for an example of the JavaScript required to make the component work.

All of the snippets have a trigger that starts with uif- so you can see what’s available by simply typing uif- and looking at the Intellisense popup shown by VS Code.

Installation Instructions

For the time being, installation is manual. Once I’ve ironed out any bugs, I’ll make a true VS Code extension and deploy it to the Extension Gallery. At that point, I’ll also create a Visual Studio Extension and deploy that to the Visual Studio Gallery as well. If there is interest, I’ll convert the snippets to other editors – Sublime is one I’m considering, but am open to other suggestions as well.

To Install:

  • Open the file VSCodeFabricSnippets.txt from the GitHub repo (direct link: https://raw.githubusercontent.com/Sector43/FabricSnippets/master/VSCodeFabricSnippets.txt)
  • Select all of the contents and copy it to the clipboard
  • In VS Code, click File | Preferences | User Snippets and select HTML from the Language dropdown
  • Paste the contents from the GitHub file into the html.json file that is now open in VS Code
  • Save the html.json file and close it

The snippets are now available when you are editing an HTML file in VS Code. (NOTE: Snippets in VS Code only seem to work if the HTML file is open as part of a folder, not if you just open a standalone file. I’m looking into whether this is really true, and if so whether it is by design or a bug)

Installation and usage is shown in the short video here: https://youtu.be/VsfUTwgNdgg

Known Issues

The following components are not currently supported by the snippets:

  • Facepile
  • People Picker
  • Persona
  • Persona Card

They’ll be coming in the next release.

Please report other issues here: https://github.com/Sector43/FabricSnippets/issues

Getting Started with Visual Studio Code

Blah, blah, blah…intro to VS Code and why you should use it…blah, blah, blah.

If you’re here, I’ll assume you know what VSC is and are at least planning on kicking the tires to see what it’s all about.  This article is as much for me as you – a place where I document all of the little steps I needed to go through to get things set up the way I wanted.  Here’s basically what we cover:

  1. Configure Git, including credential caching for GitHib
  2. Configuring Karma
  3. Configuring TypeScript support

Let’s get started…

Configure Git, including credential caching for GitHib

VSC has support for Git built in:


Click there to go to the Git Panel.  The first time you visit, it will look like this:


Click the blue “Initialize git repository” button to, well, initialize your git repo.  Enter a Commit message and click the checkbox.  Your files are now committed to the local repo.  So how do we push them to a remote (GitHub) repo?


  1. From a command prompt, and assuming you have Git tools installed that provide command line support, enter the following two commands:
    git remote add origin your_remote_git_repo_urlgit push -u origin master
  2. Depending on how your remote repo is initially configured, you may get an error here saying that basically the remote repo isn’t empty.  You can overcome that by doing a “pull” first or a “sync”
  3. You’ll be prompted for your credentials – enter them for now, we’ll get them cached next.  When the second command is done, you should be able to see your commit in your remote GitHub repo
  4. You can now also use the menu options  in VSC to interact with your GitHub repo:


Caching GitHub Credentials

I had Git Desktop installed already and I’m not sure if that is required for this or not.  Try it without but then if it doesn’t work, try it with.

From a command prompt (again, assuming Git tools installed and in PATH), run the following command:

git config --global credential.helper wincred

Your credentials should be cached and you should no longer be prompted by VSC again every time you connect to GitHub.

Configuring Karma

Nothing really special to configure Karma for VSC.  When I’m coding, I typically just run

start Karma

from a command prompt in my project folder (assuming that’s where my karma.conf.js file is located) and let it run in the background. Eventually I’ll get around to automating the start and stop of Karma with gulp, but this is good enough for now.  I configure Karma to watch my files so it fires every time I save.

Configuring TypeScript support

You can skip this step if you don’t use TypeScript.  I do, so:

  1. Use the instructions in the following two links to configure things:
    • https://code.visualstudio.com/Docs/languages/typescript
    • http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx
  2. For reference, my tsConfig.json file looks like this:
      "compilerOptions": {
         "module": "amd",
         "noImplicitAny": false,         
         "removeComments": true,
         "preserveConstEnums": true,
         "declaration": true,
         "sourceMap": true,
         "target": "ES5",
  3. The top of my tasks.json files looks like this:
    	"version": "0.1.0",
    	"command": "tsc",
    	"isShellCommand": true,
    	"showOutput": "always",
    	"args": [
    		//add your .ts files here		
    	"problemMatcher": "$tsc"

    Nothing below that was changed from the default

That’s about it.  I’ll probably flesh this out later, but for now this is my notes for what I needed.  Hopefully that helps someone.