Tag: Configuration

Thankful for Integrated Terminals in Visual Studio Code

Since before I started my software development career, I have been using Visual Studio. It is a beast-mode IDE with tons of heavy-weight features and a bountiful supply of extensions. Don’t get me wrong, Visual Studio is near and dear. It has been the key to the successful delivery of many kinds of projects. Since Visual Studio was so useful, I honestly wondered why Visual Studio Code was even created. After using it though, my thoughts changed from “why?” to “this is amazing!”

To be able to view everything on a single screen is hard to do – some would say unnecessary or even Noise. One of the great things about VS Code is that it accomplishes the two feats of allowing a developer to quickly discover what they need during development without needing to wade through the noise. This is done by a simple tab-like interface including Explorer, Search, Git, Debug, and Extensions. The best part about this is the Integrated Terminal. It is very simple to get started, easily accessible, and easily ignored.

Integrated Terminals

vscintegratedterminal

My primary use for VS Code is front-end development. VS Code offers great tooling for creating high-quality user interfaces using the latest frameworks such as Angular 2 and React. Full-stack development can be done at once with a single language (JavaScript). With Integrated Terminals, Node.js operations can be performed quickly and easily.

With Extensions offering further integration, I find VS Code especially useful when developing with Node. Its Integrated Terminals allow an easy way of managing Node operations. When developing a MEAN stack application, each tier can get its own terminal for operations specific to that tier.

Dedicated terminals per tier are also beneficial because certain operations are long-running such as running MongoDB, Node and Angular. I tend to create a terminal per long-running operation. VSC makes it very easy to get these started – and to ignore them when they are not appropriate for the current task. For example, I can ignore the DB and Services when styling an Angular 2 component while still maintaining the benefit of them running so I can quickly test my work.

When writing front-end code, I would definitely recommend Visual Studio Code.

Commands

  • Ctrl+`
    • Toggle Integrated Terminal Panel
  • Ctrl+Shift+`
    • Create New Integrated Terminal Instance
  • Ctrl+Shift+P
    • Begin searching the Command Palette

User Interface

vscintegratedterminalpane

Interact with Integrated Terminals like you would a Command Prompt. Multiple instances can be created while being accessible by simply making a selection from the drop-down. From the small toolbar, instances can be removed, more instances can be created, and the down-arrow closes the entire panel.

Detecting Windows Store App Configuration Mode (Debug vs Release) in JavaScript

Windows Library for JavaScript (WinJS) is an amazing library. This along with the projected winmd libraries, developers have almost everything they would ever need to develop an average Windows Store App. One thing that is missing that I recently came across is the ability to detect which configuration mode the App is currently running in (Debug or Release).

I needed to enhance a few debugging capabilities if the App is in Debug mode. To detect the current mode in JavaScript I used the beauty of language projection. The following sections will examine this in more detail.

C#

First, I used a C# Windows Runtime Component to enable the capability of using the implementations in JavaScript. I then created what I called a ConfigurationManager. Below is the code:

namespace AppName.Utilities
{
  public sealed class ConfigurationManager
  {
    public static bool IsDebug {
      get {
        if DEBUG
          return true;
        else
          return false;
        endif
      }
    }
  }
}

The simplicity of this class cannot be overstated. It has a single static property called “IsDebug”. The key part of the implementation is the use of compiler directives #if and #else.

#if the DEBUG constant is defined, then the App is in Debug mode. #else (Otherwise), the App is in Release mode.

JS

After adding a reference to this component and rebuilding, I can now detect the current configuration mode in the JavaScript App:

var isDebug = AppName.Utilities.ConfigurationManager.IsDebug;
if(isDebug) {
  //debug-specific code.
} else {
  //release-specific code.
}

Please note that this depends on the compiler. There is one potential issue with this: the perceived configuration mode of the App is solely dependent on the configuration mode of the projected component.

There is a “Debug” object in JavaScript. This object does not contain abilities to determine the configuration mode but merely whether a debugger is attached (and various other debugger type mechanisms). This object also exists in both Debug and Release modes. The solution provided in this article shows one of the easiest ways of accomplishing the feat of determining whether the configuration mode is Debug or Release.