From C# Developer to DevOps Engineer

Over the last couple of years, I’ve become a DevOps Engineer after having been primarily a C# developer. Instead of primarily C# and SQL, I was now working almost exclusively with JSON, YAML, and PowerShell. While I was very familiar with Visual Studio 2013/2015/2017 and its excellent support for the .NET work I did over the years, I found the experience for building DevOps solutions to be underwhelming. At the time, the Intellisense for Azure Resource Manager (ARM) or Terraform templates, GitLab or Azure DevOps pipelines, and PowerShell was either non-existent or incomplete. In addition, Visual Studio was quite the resource hog when I wasn’t needing all the extras it provides.

Enter Visual Studio (VS) Code

Now, I had downloaded VS Code soon after it was released with the intent to use it at some point, to say I had. However, after seeing Visual Studio Code used in some ARM template videos where snippets were used, I decided to try it out. Like most Integrated Development Environments (IDE), VS Code isn’t truly ready to go right after installation. It’s taken me some time to build up my configuration to where I am today, and I’m still learning about new features and extensions that can improve my productivity. I want to share some of my preferences.

I want to point out a couple of things. First, I’ve been working primarily with GitLab Enterprise, Azure DevOps Services, and the Azure US Government Cloud. Some of these extensions are purely focused on those platforms. Second, I use the Visual Studio Code – Insiders release rather than the regular Visual Studio Code version. I have both installed, but I like having the newest stuff as soon as I can. For this post, that shouldn’t be an issue.

Theming

As long as there’s a decent dark color theme, I’m content. The bright/light themes give me headaches over time. VS Code’s default dark theme, Dark+, fits the bill for me.

One of the themes I didn’t know I needed before I stumbled across them was icon themes. I used to have the standard, generic folder and file icons, the Minimal theme in VS Code. That made it difficult to differentiate between PowerShell scripts, ARM templates, and other file types at a glance. There are a few included templates, but I’m using the VSCode Icons Theme. It’s one of the better options, but I’m contemplating making a custom one as this one doesn’t have an icon for Terraform variables files (.tfvars), and I’d like a different icon for YAML files. If the included themes aren’t suitable for you, there are several options for both types of themes and Product Icons themes through the marketplace.

Figure 1 – VS Code’s Minimal icon theme

Workspaces

Workspaces are a collection of folders that are a “collection of one or more folders are opened in a VS Code window.” A workspace file is created that contains a list of the folders and any settings for VS Code and extensions. I’ve only recently started using workspaces because I wanted to have settings configured for different projects.

Extensions in Visual Studio Code provide enhancements to improve productivity. Extensions include code snippets, new language support, debuggers, formatters, and more. I have nearly 60 installed (this includes several Microsoft pre-installs). We will focus on a handful that I rely on regularly.

Workspace Code Configuration
Figure 2 – VS Code Workspace configuration. Also shows the choice of Azure Cloud referenced in the Azure Account extension section below.

Azure Account

The Azure Account extension provides login support for other Azure extensions. By itself, it’s not flashy, but there are a few dozen other Azure extensions that can use the logged-on account from one to reference Azure resources targeted by the others. This extension has a setting, Azure Cloud, that was the main reason I started adopting Workspaces. The default is the commercial version, AzureCloud. I’ve changed it at the user level to AzureUSGoverment, but some of my recent projects use AzureCloud. I’ve set the workspace setting for those.

Azure Resource Manager (ARM) Tools

This extension will make your ARM template tasks much more manageable! It provides an extensive collection of code snippets to scaffolding out many different Azure resources. Schema support provides template autocompletion and linting-like validation. A template navigation pane makes finding resources in a larger template easy. There is also support for parameter files, linked templates, and more.

HashiCorp Terraform

Terraform is an offering of HashiCorp. They’ve provided an extension that supports Terraform files (.tf and .tfvars), including syntax highlighting. While there are only a few snippets included, the autocompletion when defining new blocks (i.e., resources, data) is quite extensive.

Terraform
Figure 3 – Terraform autocompletion

GitLens – Git Supercharged

GitLens is full of features that make tracking changes in code easily accessible. I installed this extension for the “Current Line Blame” feature that shows who changed the current line last, when they changed it and more. In addition, there are sidebar views for branches, remotes, commits, and file history that I use regularly. There are several other features that I either don’t use or even wasn’t aware of until writing this post, as well this is an excellent tool for Git repo users.
GitLens Line Blame

MSBuild Project Tools

I had a recent project that contained a relatively large MSBuild deployment package that needed to be updated to work with the changes made to migrate the application to Azure. I haven’t worked with MSBuild in several years. When I did, I didn’t have all the syntax and keywords committed to memory. This extension provides some essential support, including element completion and syntax highlighting. It did make the project a little easier to modify.

PowerShell Preview

I’ve become a bit of a PowerShell fan. I had been introduced to it when I was working with SharePoint, but since I’ve been doing DevOps work in conjunction with Azure, I’ve started enjoying writing scripts. The less-than-ideal support for PowerShell (at the time, at least) in Visual Studio 20xx was the main reason I gave VS Code a shot. This extension (or the stable PowerShell extension) provides the excellent IntelliSense, code snippets, and syntax highlighting you’d expect. However, it also has “Go to Definition” and “Find References” features that I relied on when writing C#. In addition, it incorporates linting/code analysis with PowerShell Script Analyzer, which helps you develop clean code that follows best practices.

PowerShell Preview

Powershell (stable)

Wrapping Up

I have far more than these extensions installed, but these are the ones I use the most when doing DevOps work. Some of the others either haven’t been used enough yet, aren’t helpful for a DevOps Engineer, or weren’t interesting enough to list for the sake of brevity.

However, I’ve created a Gist on my GitHub that contains the complete list of extensions I have installed if that’s of interest. Visual Studio Code is an amazing tool that, along with the proper configuration and extensions, has increased my productivity as a DevOps Engineer.

Now available as a Visual Studio Code extension, Microsoft Edge Developer Tools lets you inspect network activity, view layout, and styling changes, and see runtime HTML, all without leaving VS Code. What prompted the Microsoft Edge Team to develop these tools? In their words:

Continuously switching between editor and browser adds cognitive load to your workflow throughout the day. You change from one environment to another – from development to debugging mode – and you need to switch back. That feedback is what prompted us to explore embedding the developer tools into an extension, thus allowing you to see what your code generates and debug it without leaving your “development” mindset. – Microsoft Blog

Do you want to take the leap and leave your traditional browser behind for good? Here are a few simple steps to help you get started with Microsoft Edge Developer Tools.

Step 1: Install the Microsoft Edge Browser

If you don’t already have the Microsoft Edge browser installed, you will need to install it. You can download the latest version here: Microsoft Edge.

Step 2: Install the Microsoft Edge Tools Extension

Open Visual Studio code and click on the extension’s icon on the left to load the extensions view.
Enter “Microsoft Edge” in the search box at the top, then click on “Microsoft Edge Tools…” to pull up the “Microsoft Edge Tools for VS Code” extension in the main window. Click “Install” to install the extension.

Install Microsoft Edge Tools Extension

Step 3: Choose Full-browser or Headless Mode and Enable the Network Panel

  • Full-browser Mode
    You can operate MS Edge Tools in two different modes, full-browser or headless. If you work it in full-browser mode, which is the default mode, the extension will launch a new browser window to view your web application, which will automatically update when you make changes to your code. It will also create a smaller, mirrored browser window within VS Code that you may close if you wish, although you will lose the power and functionality of having your browser window right next to your HTML. Full-browser mode is a good choice if your screen is small or wants to view your app at full screen. To use full-browser mode, do nothing.
  • Headless Mode
    If you would prefer to use only the browser window within VS Code and not have a new window pop up every time, choose the headless mode. This is the most seamless option. To enable headless mode, click on the small gear-shaped icon at the lower right of “Microsoft Edge Tools…”, click on “Extension Settings” in the dropdown, then check “Headless.”
  • Network Panel
    The network panel is another excellent function of Microsoft Edge Tools that gives you an extra tab to view your app’s network activity traffic. You can enable the network panel to enable headless mode by checking the “Enable Network” box. If you wish to use the network panel with full-browser mode, leave the “Headless” box unchecked.

Important: after you have enabled headless mode or the network panel, close VS Code and reopen it to apply your changes.

Microsoft Edge Tools

Step 4: Connect MS Edge to your Web Application

This step requires that you be serving your web application from a local web server and have an URL for that server, for example, “http://localhost:4200”. After you’ve made your changes from step 3 and relaunched Visual Studio Code, open your project folder. Click on the “Microsoft Edge Tools” icon on the left, then click on the plus sign next to the “MICROSOFT EDGE …” at the top. If you have chosen “headless” browser mode, you’ll see an “Edge DevTools” window appear in VS Code. Enter your URL in that window (where it says “about:blank”).

If you have chosen the default full-browser mode when you click on the plus sign, the Edge Tools will open a new browser window, and you should enter your URL in that browser window.

You will also see a browser window appear within VS Code; any change you make will be mirrored in the external browser window and vice versa. You may close the browser window within VS Code if you do not want it or if your screen size is too small to support it.

Start Development and Debugging

Conclusion

That’s it! You are now ready to start doing your development and debugging in one harmonious environment. To learn more about making the most of Microsoft Edge Developer Tools for VS Code, visit the extension documentation. It’s a great place to start.