Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save codeitbhanu/954a7d986c9ec10c68fc8602d030e5ef to your computer and use it in GitHub Desktop.

Select an option

Save codeitbhanu/954a7d986c9ec10c68fc8602d030e5ef to your computer and use it in GitHub Desktop.
PowerShell, Cmder / ConEmu, Posh-Git, Oh-My-Posh, Powerline Customization

Nice Front-End / Node Development Environment on Windows 10 Setup with VS Code, Cmder, PowerShell, Posh-Git, Oh-My-Posh, and Powerline Fonts

Backstory (TLDR)

I work as a full stack developer at work. We are a Windows & Azure shop, so we are using Windows as our development platform, hence this customization.

For my console needs, I am using Cmder which is based on ConEmu with PowerShell as my shell of choice.

Yes, yes, I know nowadays you can use the Linux subsystem on Windows 10 which allow you to run Ubuntu on Windows. If you are looking for customization of the Ubuntu bash shell, check out this article by Scott Hanselman.

For source control, I use git for my spikes since our main source control at work is still using hosted TFS on Visual Studio Team Services.

My editor of choice nowadays is VS Code which is lightweight, customizable and all around a good environment to do development for AngularJS, Angular, NodeJS and other spikings in general. I've also done some .NET Core developments on the editor which is supported quite well including debugging if you follow that style of development. VS Code customization is a large topic by itself, so I won't be writing about it here... Perhaps some other time...

For now, we'll focus on customizing Cmder, Powershell with git, posh-git, oh-my-posh and the Powerline fonts, specifically on how I setup mine which will net you something like the figure below.

Customized Cmder PowerShell with Oh-My-Posh agnoster theme

A lot of people has written up about customizing PowerShell but I can only find bits and pieces. This article hopefully will combine those bits and pieces into a more coherent end-to-end story.

Prerequisite: Install PowerShellGet

If you are already on Windows 10, you can skip this section.

If not, you will need to make sure you have PowerShellGet installed. We will use it to pull PS Modules from PS Gallery. Instruction on how to get PowerShellGet can be found here.

Upgrading to PowerShell v5 is preferable since it comes with PowerShellGet. The Get WMF 5 route from the link above will do this for you. Just make sure to download the right version for you OS. I.e. if you are on Win2K8R2, choose Win8.1AndW2K12R2-KB3134758-x64.msu from the Download list, etc.

You can check your PowerShell version by typing the following from within PowerShell.

$host.Version

Installing Chocolatey

Start PowerShell using Run As Administrator option. We might need it until we get everything installed.

I use Chocolatey as my install manager. To install Chocolatey, do the following from within PowerShell:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Force

PowerShell might complain. If so, you probably need to change RemoteSigned to ByPass or Unrestricted. Running Get-ExecutionPolicy from inside PowerShell will tell you what to change it to.

Afterward, run the following and wait for it to finish:

iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex

Installing Git using Chocolatey

If you already have git installed, you can skip this part.

If you do not know if git has been installed or not, you can check by typing the following into PowerShell:

git --version

If you have it installed, you should see the version of git that has been installed on your system.

If it is not installed, run the following to install Git from PowerShell via Chocolatey:

cinst git.install -y

Installing Cmder using Chocolatey

If you already have Cmder installed, you can skip this part.

Otherwise, run the following to install Cmder from PowerShell:

cinst cmder -y

Install Powerline Fonts

Clone the powerline repository from GitHub.

git clone https://github.com/powerline/fonts.git

afterward, do the following:

cd fonts
.\install.ps1

Wait for all the fonts to be installed.

From this point onward, you can switch to Cmder and do the rest from there.

Cmder Customization

Powerline Font Setup

Open up Cmder Settings dialog (Win+Alt+P when Cmder window is active) and ensure that one of the Powerline font is used for both Main console font and Alternative font as shown below. The Alternative font is needed for showing the correct icons for git on the PowerShell prompt.

Here I am using the Meslo LG M for Powerline font which I think look quite nice. I tried using Ubuntu Mono for Powerline, but for some reason, it messed up my icons.

Try different fonts yourself and see which one you like. Just remember that you will need to choose the font that has been patched for Powerline, otherwise you Git icons might not show correctly.

Setting Up Fonts in Cmder

Pay attention that I also highlighted the ConEmu.xml location in the Storage field. You will need this location later when we customize the ConEmu Theme. It's not necessary but it's a nice to have. Also, yours might be located on a different directory than mine since I installed Cmder manually previously.

Quake Style Setup

Another thing that you might want to customize is to put Cmder into Quake style where you can show and hide it using Ctrl+~ key. To do that set the Quake mode setting to something like this:

Quake style setting

I like the animation speed set to 150 milliseconds since it is a bit snappier than the default 300 milliseconds.

PowerShell as Default Task Setup

To set PowerShell as your default task whn you open Cmder, ensure that it is set as Specified named task as per figure below.

PowerShell as default task

Take note of the profile.ps1 location above inside the Selected contents section. I already changed this to the $PROFILE variable from inside PowerShell. By default, Cmder is pointing to its own profile.ps1 location. If you don't change this, your PowerShell profile customization that we will do later will not be loaded automatically upon launching Cmder or any new PowerShell task tab inside Cmder.

To check where your own PowerShell profile location, you can type $PROFILE inside PowerShell.

$PROFILE location

If you are not familiar with Windows, %USERPROFILE% is equivalent to C:\Users\username (which is the default user profile location in Windows, unless you have moved it somewhere else).

Also, you might have this file already or not. It does not matter. We'll create one or edit existing one later. The important thing here is that you need to point the PowerShell task to the right location or your profile customization will not load automatically and you will have to load it manually by typing the following into PowerShell:

. $PROFILE

_It's the equivalent of source .bashrc or source .zshrc, etc. if you are familiar with Linux.

In any case, it is a nice thing to remember when you further customize your $PROFILE.

To customize your profile you can run ise $PROFILE from PowerShell. Again, we will do this later, don't bother with it now.

To change that selected task contents, you can do it from the Tasks tab like the figure below. Ensure that you change both PowerShell and PowerShell as Admin.

PowerShell Tasks

Install Posh-Git and Oh-My-Posh

Posh-Git (PowerShell Git) will provide you with additional information on your PowerShell prompt when you are in a directory that has been designated as a local git repository.

To install it, run the following from PowerShell:

Install-Module -Name 'posh-git'

Oh-My-Posh will let you theme your PowerShell prompt

Set-Theme agnoster

How to test if Powerline is correctly installed in Cmder / ConEmu:

  1. Add the following function (stole from Michael Naumov) to your powerline $PROFILE. To edit your $PROFILE, just run ise $PROFILE from within PowerShell:
function U
{
    param
    (
        [int] $Code
    )
 
    if ((0 -le $Code) -and ($Code -le 0xFFFF))
    {
        return [char] $Code
    }
 
    if ((0x10000 -le $Code) -and ($Code -le 0x10FFFF))
    {
        return [char]::ConvertFromUtf32($Code)
    }
 
    throw "Invalid character code $Code"
}
  1. Run the following script inside PowerShell:
Write-Host "$(U 0xE0B0) $(U 0x00B1) $(U 0xE0A0) $(U 0x27A6) $(U 0x2718) $(U 0x26A1) $(U 0x2699)"

You should see something like the second line in the figure below: Git Symbols

If you don't see the symbols, please make sure you did the Powerline font installation and Cmder customization as described in section 2.

References

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment