Visual Studio is my favorite code editor, and the things I like the best about it is how light and extensible it is. Last week I posted some of my favorite extensions for this code editor, and today I want to show you some of the new features I like the most.

Visual Studio Code is updated frequently, and it is hard to keep up with all the new great stuff they keep adding to this editor. This is my attempt to help you discover some of the coolest features added to it so far this year, in my opinion of course.

I will update this post at the end of the year and include a summary of all the great features and advances of this mighty code editor.

The following features are just some of my favorites and the ones I use often. They are listed in the order they have been released so the most recent one and one of my favorites, the Grid Editor Layout is listed last as it was part of the June release.

Node debugging

Automatically attach debugger to Node.js subprocesses

For node-debug we’ve added a mechanism that tracks all subprocesses of a debuggee and tries to automatically attach to those processes that are launched in debug mode. This feature simplifies debugging of programs that fork or spawn Node.js processes like programs based on the “cluster” node module:

Auto Attach shown with Cluster Example

The feature is enabled by setting the launch config attribute autoAttachChildProcesses to true:

{
  "type": "node",
  "request": "launch",
  "name": "Cluster",
  "program": "${workspaceFolder}/cluster.js",
  "autoAttachChildProcesses": true
}

Auto-imports based on filename

Auto-imports for JavaScript and TypeScript now support importing default exported objects based on filename:

importing a default exported object by filename

Copy/Paste files across windows

We now allow you to copy and paste files between two VS Code File Explorers in different instances. This works for single or multi-selection of files as well as folders.

Copy Paste across Windows

Split terminals (My personal favorite!)

The Integrated Terminal can now be split such that multiple are visible at once, which can enable much easier management of terminals when you need a watch and a run command for example:

Split terminals

Splitting can be done by clicking the split button in the panel, through the context menu or the command Ctrl+\.

Focus can be moved between split terminals using Alt+Right and Alt+Left. The active pane can be resized using the keyboard with:

  • Terminal: Resize Pane Down:¬†unassigned
  • Terminal: Resize Pane Up:¬†unassigned
  • Terminal: Resize Pane Left:¬†unassigned
  • Terminal: Resize Pane Right:¬†unassigned

Syntax aware folding

Folding ranges in HTML, JSON, Markdown, CSS, LESS and SCSS are now, by default, computed based on the language’s syntax and no longer rely on well-formed indentation.

Syntax folding

Support for TypeScript and JavaScript is also available, and can be enabled by the setting "typescript.experimental.syntaxFolding": true.

If you prefer to switch back to indentation based folding for one (or all) of the languages above, use:

  "[html]": {
    "editor.foldingStrategy": "indentation"
  },

The extension API now supports adding related information to diagnostics and this is shown in all places where diagnostics are shown: on hover, the error Peek window, and Problems Panel.

In the example below, you can see related information pointing out the first location where a twice assigned variable was used:

Related Diagnostics Information

Column selection using middle mouse button

In VS Code, column (box) selection can be added by holding Shift and Alt and then using the left mouse button. Now the middle mouse button can also be used to create a column selection:

Editor column selection

Note: When setting editor.multiCursorModifier to ctrlCmd, the modifiers are Shift and Ctrl on Windows and Shift and Cmd on macOS.

Highlight unused variables and imports

Unused variables, parameters, and imports are now greyed out in JavaScript and TypeScript:

Many greyed out unused variables

Use a Quick Fix to remove them and clean up your code automatically:

Quick fix all action

Grid editor layout

You can now arrange editors both vertically and horizontally and have more than 3 editors side by side:

Grid Editor Layout

To support flexible layouts, you can create empty editor groups. By default, closing the last editor of an editor group will also close the group itself, but you can change this behavior with the new setting workbench.editor.closeEmptyGroups: false.

Grid Empty

There are a predefined set of editor layouts in the new View > Editor Layout menu:

Grid Editor Layout Menu

Editors that open to the side (for example by clicking the editor toolbar Split Editor action) will by default open to the right hand side of the active editor. If you prefer to open editors below the active one, configure the new setting workbench.editor.openSideBySideDirection: down.

Like I said above, it’s hard to keep up with all the great features being released so often, so please feel free to leave a comment with your favorite feature added this year or something that you’d hope they will add in the near future.

For the full list of features released so far this year, click here.

Happy Coding!

Killer features and a beautiful design are important things when developing a website. However, none of that matters if your site doesn’t perform well or is not able to scale when necessary. Serving static files such as CSS and images from your web server is not ideal.

These are some of the disadvantages of serving static files directly from your web server:

  • Unnecessary deployment of files that do not change often, potentially slowing the deployment process.
  • Increase the load of your web server, making it less responsive.
  • Increase of hosting costs
  • Etc…

Here are some of the advantages of not serving static content from your web server:

  • Distribute web server load.
  • Save bandwidth.
  • Boost performance and reduce your existing hosting costs.
  • Ability to update static files by replacing them in CDN without having to deploy entire website.
  • Etc…

In this blog post I will show you how to take advantage of Microsoft’s Azure CDN and Blob storage to make your website serve all of its static content from the Azure CDN. If you don’t have an Azure account and you are a web developer you are missing out. Azure supports a wide range of frameworks and technologies including but not limited to Python, MySQL, Oracle, Java, Linux, PHP, Ruby and of course all of Microsoft products such as .NET, MS SQL, etc… Also, they offer a program for startups called BizSpark where you get Azure services for free, you can¬†sign up here if you like.

Create a Blob storage account and a container

First of all you need to create a blob storage account and then a container which you’ll use to store all of the static content. To do this open your Azure portal and then click on the + NEW¬†button located at the bottom left corner of the portal and select Data Services > Storage > Quick Create > as shown below, then just type a URL to identify this new blob storage account. In this example I used the name “mystaticfiles”.

Create Blob Storage Account Image

It takes approximately 1 minute for the blob storage account to be created. Think about it, it takes a minute (or less) to deploy a blob storage account/instance capable of logging, monitoring and redundancy.

After that you’ll see your newly created storage account, click on the name of it, then on the Containers link and then on Create Container as shown below:

Create Storage Container Image

After the Create Container window opens, type the name of the new container and its access type. For this example we are going to select Public Blob which allow us to have a container where all files are available to the public. The other two options are Private which makes the container available to you only and Public Container which allows anyone to have access to the files, metadata and pretty much everything else in this container.

create container in Azure

Manage the blob storage account and container

Now that you have your new storage account and container, you can start transferring static files from your website to the container(s) you’ve created. To do this, you can either write a service that does this for you or use one of the programs available that help you manage your containers and files in an Azure storage account.

I found an open source application to help me manage my storage accounts and containers and so far it has worked out very well for me. If you are interested, you can download it here and even get the source code for it too:

Azure Storage Explorer

You can use this application to browse your files as well. Once you have all your static files in your Azure blob storage containers you can then update your static file’s path to point to the Azure containers. For example, here is a link to one of my images stored in Azure blob storage:

https://foreverbitapp.blob.core.windows.net/images/journal9_medium.jpg

Are you using Azure blob storage? please share any tips or feedback in the comments below.

This error message has been giving me headaches for a while, I have seen it happen in different Windows computers when trying to install a Visual Studio update or a new version of Visual Studio. If you Google for the string “Error 0x80131902: Failed to create the managed bootstrapper application.” you’ll find some sites and forums where the following advice and tips are given:

The error in the log, 0x80131902, means that the .NET Framework could not be loaded (more specifically, an AppDomain could not be created).

Do you have at least .NET 3.5 installed/enabled on your machines? You might also connect to Windows Update and make sure you have all required updates installed. There may be some bugs that have been fixed in the .NET Framework.

Another possibility – though not for this specific error but in general – is that your graphics drivers our out of date or not appropriate for your card (mentioned to @TobiasUlm below in another thread). Setup uses WPF and sometimes bad graphics drivers can cause issues (happened with VS itself for some users).

Visit your graphics card’s manufacturer web site and make sure you have the newest driver available for your card and, on Windows 7, that you have the latest DirectX runtime installed. See http://support.microsoft.com/kb/179113 for more information.

– Heath @ http://blogs.msdn.com/heaths; Visual Studio Professional Deployment

Also…

As you can install VS11 with the same ISO successfully on other machines, I think your VS11 ISO should be fine. And please follow the steps below to see if it helps you:

TemporarilyTurn off your anti-virus/antispyware software during installation;
Install the latest Windows updates from the Windows Update site: http://update.DataZX.CN;
Complete or dismiss Windows Update before installation. (And don’t forget to turn it on
later);
Clean your %temp% folder (Start Menu >>Run >> Type “%temp% >> OK);
Then run the setup with Administrator privilege: right-click the installer -> Run as administrator.
Thanks.

Vicky Song [MSFT]
MSDN Community Support

And…

Do you also install VS11 Developer Preview on that Windows7 machine? If so, I am afraid you need to first uninstall the VS11 DP and then install the VS11 Beta again.

In addition, please try to uninstall VS11 Beta completely from your machine and then try re-install it to see if you get the same result. And for the .NET application related issues, I think can consider reinstall .NET Framework 4.5 again. You can find it here:

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27541

If you still get the same result, please offer me the complete installation log files you get.

Of course I tried all of those suggestions but none of them worked for me. Every time I tried to install a VS update or a new version of VS – this is the entire log showing me the errors, the error messages were exactly the same for both updating or trying to install a new version of VS:

…..

[0898:1304][2014-04-11T09:08:22]: Loading managed bootstrapper application.
[0898:1304][2014-04-11T09:08:22]: Error 0x80131902: Failed to create the managed bootstrapper application.
[0898:1304][2014-04-11T09:08:22]: Error 0x80131902: Failed to create UX.
[0898:1304][2014-04-11T09:08:22]: Error 0x80131902: Failed to load UX.
[0898:1304][2014-04-11T09:08:22]: Error 0x80131902: Failed while running

…..

[0898:1304][2014-04-11T09:08:22]: Error 0x80131902: Failed to run per-user mode.
[0898:1304][2014-04-11T09:08:22]: Exit code: 0x80131902, restarting: No

As you can see the advice is very similar and while this might have helped some people, it did not help me. After looking around extensively and trying different approaches, I did the opposite of what most people suggested and actually turned off the Microsoft .NET Framework 3.5.1 Windows feature located under Programs and Features – Turn Windows features on or off – see screen shot below:

disable 3.5 .NET framework photo

After turning off Microsoft .NET Framework 3.5.1 I tried installing the updates for VS2012 and installing VS2013 and everything worked flawlessly. After the installations completed successfully, I opened back the Windows features on or off menu and enabled the Microsoft .NET Framework 3.5.1 once again.

This is what I got after my simple fix/change and I hope you can get to the following screen too!

VS install successful photo

 

 

 

The annoying sound of the alarm clock crying for attention at 5:00am in the morning woke me up. Everybody in my house was still sleeping, after all it is summer and it was just 5 in the morning! For a moment I thought about going back to sleep and forget about the reason I setup the alarm at such an early time, especially after going to bed around 3am, just a few hours earlier.

About 30 minutes later I was outside and in my car, and I started to drive on IH35, heading north, I was on my way to Dallas to attend a Microsoft Azure Summit. For a while I have been thinking about using Azure for my software startup but have been avoiding it since other cloud solutions offered by Amazon and Rackspace have been sufficient to host a few web applications and image files. The reason I have been avoiding Azure is because the first time I tried it, almost two years ago, I was¬†disappointed¬†with it for various reasons, the product didn’t seem to be ready, it lacked many basic features and there was not enough documentation. I have been using Amazon S3 for file storage and Rackspace’s Cloud Servers for my web servers and database. (more…)

If you run into a ASP.NET MVC site that needs to get images stored as binary data in a SQL database you can do the following to help you read these images and display them in your view.

The Controller

First, create a controller that will serve these images and add a void method that requires the image id as parameter to locate the right image to serve. In the example below I used the Adventure Works database and Linq to query the database and read an image stored in MS SQL. Make sure you set the content type to the right type of image file you’ll be getting from the database, in the example below I used “image/gif” as the content type.

The View

In your view, you only need to use the Url.Action helper to form the url to the image stored in the database by calling the method in the image controller you just created (see above).

“Show” is the name of our method and “Image” is the name of the controller, what’s on the right to “id=” is just the image id that I want to get.

 

 

 

 

I bought a Windows Home Server about two years ago, I use it primarily for backups and file sharing in my home network. It is a good solution for a small home network such as mine because it is sufficient, it is not overkill and it is easy to manage.

A few months ago, I put together a new PC which I use for development when I am home and for gaming. I installed Windows Ultimate 64-bit in it and up until today, I didn’t worry about connecting it to the WHS because I didn’t have much to backup, now I do. (more…)