The release of Visual Studio Code 1.3.0 brought enhancements to browsing for and managing Visual Studio Code Extensions. With the 1.3.0 release an extensions pane was introduced to search for installing and managing extensions to VS Code. This is similar to extension management for Visual Studio (for Windows), Brackets, and other editors too.
I have been spending some of my free time (since I have so much) trying to get back into coding and chose to create an Outlook Addin using Angular 2 and TypeScript, so now I really have no free time! To keep the spin up/spin down time for these sessions as low as possible, I wanted to only use my Mac Book Pro and Visual Studio Code, without firing up a virtual machine and Visual Studio 2015 every time. While trying to find time to code and be more efficient when I can code, there have been several extensions that have come in very handy.
Here are my top 5 VS Code extensions for Outlook Addin development using TypeScript and Angular 2.
1. VS Code Icons
This may seem like just eye candy, and I thought so at first too, but the vscode-icons extension is a real time saver! Since using TypeScript means you have many of the same file name roots, having simple visual queues to indicate html templates, typescript source files, css files, and many more can really save some time. Yes, you can exclude some of the compiled JavaScript files using User Settings as in the snippet below, but the visual cues still help a great deal to me.
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js": {
"when": "$(basename).ts"
},
"**/*.map":true
},
With Visual Studio Code v1.5, file icons are now fully supported, but Roberto Huertas beat them to the punch and released the vscode-icons extension long before v1.5. Now you can simply change to vscode-icons from the default included icons via Preferences->File Icon Theme. Trust me, you are going to want this extension!
2. Office Mail App Manifest Uploader
Since part of the challenge with creating and testing Outlook Addins is the deployment of the manifest, this extension will make your life much easier. While this activity is not a frequent task in the process of developing locally, the Office MailApp Manifest Uploader makes deploying to your Office 365 or Outlook profile very simple and keeps you in the editor and not clicking through browser screens and tabs!.
Not only is this a VS Code extension, but now the author had added a VSTS build tasks - Office Outlook Add-In Build/RM Tasks to automate this process during a build!. I have not used these yet, but I can't wait to try this one out for a build and deployment scenario!
3. Angular2 TypeScript Snippets (Wahlin)
The Angular 2 Snippets from Dan Wahlin make creating your root module, bootstrapping section, services or components as simple as possible. Honesty, with my limited time and all of the Angular churn for alphas and RC's, I gave up trying to keep up. The best part about Dan's snippets is they are already helping me learn all of the changes in Angular 2.0.0 "proprioception-reinforcement" (that name is just gold!).
4. Office UI Fabric Snippets
This is a relatively new find for me. I am the world's worst UI dev, so finding this was a huge boost to my ego for using the Office UI Fabric. The jury is still out on this one, but so far the Office UI Fabric Snippets has helped me put some polish on my UI very easily. I am not sure how well this will track with the Office UI Fabric project proper, but for now I am willing to take the risk!
5. CodeMetrics
CodeMetrics is code complexity metric calculator for TypeScript and JavaScript files. Again, this may seem like a useless tool, but having a tool that gives you some visual clues that you are making your methods, or code in general, a little too complex is great for learning new things. This forces me to keep my methods small and DRY. This also helps me return to code that is understandable when I have a gap of time between sessions that I can do some coding because wrapping my head around Promises and Observables just hurts!
As the saying goes, "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." (unknown) The CodeMetrics extension let's you stop hating yourself when you return to code you wrote a week ago that now you don't understand.
Bonus: VorlonJS
I know it is not a VS Code extension, but VorlonJS is awesome! This is one of those tools that just makes you shake your head and say "how did they do that!?". You may know how they did it, but it is still amazing! Since Office Addin development requires that all of your dev be done with HTTPS, you have to modify the /vorlon/Server/config.json file to use HTTPS. This was super simple though, and the documentation they have is top notch.
A simple edit (listed below) on my Mac Book in the vorlon installation folder to the following and I was using Vorlon to help debug the Addin in minutes.
"useSSLAzure": false,
"useSSL": true,
"SSLkey": "../../../../../localhost-key.pem",
"SSLcert": "../../../../../localhost-cert.pem",
That's the top 5. All of the items above have helped me get into TypeScript and Angular 2 all without firing up a heavy VM and Visual Studio 2015.
HTH - Maybe this can help someone else ramp up or lower the learning curve just a bit. Leave a comment or feedback below.