View Your HTML File for Visual Studio Code

One thing I noticed when using VS Code that there was no quick action to view your website changes from this text editor. In the past I would use Notepad++ for simple changes and view those changes by selecting Run > Open in Chrome or hitting the appropriate key binding. It seemed odd to me that VS Code is missing this pretty basic bit of functionality from any of it’s menu items. For the solution, I went ahead and created my own Task that I could run when I wanted to view my changes in Chrome, Firefox, etc.

Microsoft does a great job documenting all the uses and functionality available to you as a developer here.

If you haven’t created or ran any tasks yet in your project, the tasks.json file will not appear in your folder list under .vscode quite yet. To get this file created, press Control (or Command on MacOS) + Shift + P in order to bring up the Command Palette. Type “task: Configure Task Runner” into the Command Palette and select “Configure Task Runner” as pictured below.

Note that this only works when you have a folder opened in Visual Studio Code, if you just have a file opened this will not work for your needs. If you have just a file open, you would see the warning below.

Next, select “Others”.

Now let’s dive into the code that we want in our tasks.json file.

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "0.1.0",
  "tasks":[
    {
      "taskName": "hello",
      "command": "echo",
      "isShellCommand": true,
      "args": ["Hello World"],
      "showOutput": "always"
    },
    {
      "taskName": "View Site",
      "command": "Chrome",
      "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
      "windows":{
        "command": "explorer.exe"
    },
      "args": [
         "${file}"
      ]
    }
  ]
}

The first task in the array is just a sample command that comes with the tasks.json file by default. I left that code as part of this example to illustrate how to place multiple tasks within one configuration file.

The taskName field is what this command will be known as and called by within the Command Palette. You can see that my example includes both the commands for Windows and for MacOS. That way, this command will work on both Operating Systems. The MacOS command points to the application itself while for Windows, we are just running the default browser through the explorer.exe command. Finally, we pass an argument which is the current file that is open in VS Code when the task is invoked.

To test out this new functionality, navigate back to the back would like to preview in Chrome and hit Ctrl + Shft + P (Cmd + Shft + P in MacOS) and type in “tasks: run task” and hit enter. You’ll see the echo and Visit Site tasks listed since we have two tasks defined in our tasks.json.

Go ahead and select “View Site”. Your default browser (or Chrome if on MacOS) should now display the file in focus from VS Code. Awesome!

Allow Visual Studio to Recommend NuGet Packages

I first saw this on Scott Hanselman’s blog the other day and wanted to share the tip. Additional details can be found from his blog here. Please note that this feature is only available on Visual Studio 2015 Update 3 and up.

Steps to Enable:
1. Launch Visual Studio 2017
2. Select Tools > Options
3. Select Text Editor > C# > Advanced

Now Visual Studio will give you an additional choice when you try and use a type that doesn’t exist to use a NuGet package that has that defined type. Awesome!

Some may note that this feature has been in Resharper for awhile now but seeing this integrated into the default IDE is a huge plus.

Learning Resources

There’s a ton of great resources out there for learning about programming from basic syntax to more advanced topics like design patterns. There’s plenty of great YouTube videos or blog posts out there but I wanted to compile a list of professional learning resources that I’ve personally used. Spoiler: Pluralsight is my favorite resource for .Net development and their lineup of authors is amazing. Pluralsight has been acquiring other learning resources and adding more content outside of Microsoft focused courses which has been great and making the monthly subscription even more valuable.

The List

  • CodeAcademy
  • CodeSchool
  • Coursera
  • Edx
  • Freecodecamp
  • KhanAcademy
  • LinuxAcademy
  • Microsoft Virtual Academy
  • Pluralsight
  • Udemy

Setup TeamCity for a Specific Build Agent

If you ever run into a scenario where you need to run your TeamCity build configuration step against a particular build agent there is a simple solution for you built right into TeamCity.

1. Navigate to your build configuration step by either selecting it from the Overview page or selecting your project, and then the build configuration step.
2. Select “Edit Configuration Settings” at the top-right of the page.
3. Select “Agent Requirements” from the left-hand side of the page.
4. Underneath the “Explicit Requirements” section, select “Add new requirement”.
5. Select the parameter name “teamcity.agent.name”.
6. Use the default condition of “equals”.
7. Within the value field, add the name of your TeamCity build agent that you would like your process to run against.

Note: These steps are based on TeamCity 9 but have been verified to still work with the latest version of TeamCity 10.

Git and GitHub Basic Concepts

I saw this video series in a newsletter from freecodecamp the other day. It’s a great general overview of Git and GitHub that doesn’t get stuck in the details. I know when I was first being introduced to Git and interacting with the GitHub repository service it was a bit confusing keeping all the terminology in mind. This is a really clear and simple series that I’d recommend.

git commit -am “Added new file”

The above command is something I used on a project recently as a shortcut to stage and commit the file within the same command. Cool! That saves me from running an extra command. Before, I would stage and track all the files that I’ve been working on with the following:

git add .

followed by the actual commit itself for the staged changes made:

git commit -m "Added new file"

I tried this new found shortcut recently in a similar scenario but was surprised to see that it failed. Huh? I’ve done this before, I changed a file and then was able to combine the command to both stage and commit it at once. The key here (if you believe my commit message) is that in this scenario we have added a new file. This is a file that hasn’t been tracked before so git isn’t aware of it. Git even points this out to us right after we try and execute the command for a file that has never been tracked before.

git_am_fail

We’ll have to specify that this file should be tracked and staged by using the command¬†git add Test.rtf and then commit the file with git commit -m "Added new file".

Now, if we modify the contents of the Test.rtf file for any future changes we can use the add and commit combined command.

git_am_success

This is because I didn’t have a clear understanding of what git commit -a would do. When adding the -a flag to git commit this instructs Git to automatically stage every file that is already tracked before doing the commit. While git add filename both tracks and stages the file specified.