Web Development Tools That Will Increase Your Efficiency Part 2

In Part 1 of my Web Development Tools series I wrote about two tools I use nearly every day to help me get my work done. Whereas those tools serve very different purposes, today I want to discuss how to set up a tool chain.

I am a back-end (server side) web developer working in Windows writing C# and SQL code for ASP.NET web sites running on the Kentco CMS. But I’m also an AngularJS architect and front-end (browser/client side) developer writing javascript and using tools like node.js, npm and Git liberally.

I need my set of tools to be as flexible as the role I fill at work and as varied as the problems I have to solve each day. The way I approach this is to use multiple tools designed for a specific purpose instead of a complex, all-encompassing behemoth as a one-stop-shop. When a set of tools works well together, becoming an amalgam, it’s called a tool chain and I’m going to show, step by step, how to replicate my tool chain of ConEmu, Git for Windows, node.js and npm. We will look at ConEmu and Git for Windows today and I’ll discuss Node.js and npm in a later entry in this series.

Git for WIndows

Git for Windows is the Windows port of the Git version control system’s command line tools for Linux (Git and the open source Git management system Gitlab was covered in a previous post by our head of IT Operations, Ryan). Git for Windows comes with a Bash shell emulation referred to as Git Bash which allows a Windows user to run a subset of often used Linux commands and get a very similar command line experience to what Mac and Linux users know and enjoy. The Git GUIs that are available for Windows like Github Desktop, SourceTree and GitKraken are beautiful and feature rich applications but I feel they abstract away too many details and can become cumbersome for the simple and common commands that can be run at the command line. In addition, if you are already working at the command line with tools like npm and node.js, switching back and forth between your shell and a GUI will slow you down.

To begin, download and install Git for Windows. The default installation options will work fine - if you don’t know what an option is just leave it be.

Note: Git should install to C:\Program Files\Git.

ConEmu

ConEmu is a terminal for Windows which can run shells of the user’s choice while providing features missing in the default Windows terminal + shell combo (also known as cmd.exe). There are other very nice replacements for cmd.exe like mintty, console2 and even Powershell, but I feel that ConEmu provides the options I need (multiple pre-defined shell configurations) and the options I want (multiple tabs, view splitting, colored text, custom hotkeys).

Note: cmd.exe was slightly improved in Windows 10 but it’s still not a very nice user experience if you are typing at the command line often.

Download and install ConEmu with the default options.

When you run ConEmu for the first time you will be asked to confirm some default settings. Something you will quickly notice is just how many settings there are for ConEmu, which I consider to be one of its strengths as these do not all require customization, only the ones you wish to modify.

Note: ConEmu will install to C:\Program Files\ConEmu.

One section we will be customizing is the Tasks list. Press Win+Alt+T or go to the options button in the top right of the screen -> Settings -> Startup -> Tasks to open up the Tasks list. Tasks are the different pre-defined shell configurations you can create. Having multiple configurations defined could allow you to open Git Bash in your home directory in one tab and then open a Powershell and an Administrator cmd.exe session at your drive root in two additional tabs just by clicking items in an easy to access menu.

Once you have the tasks list open there will be one Task in particular we wish to modify. Look for the Task named {Bash::Git bash} and view its settings. Check the boxes for “Default task for new console” and “Default shell”. Set the Task Parameters to /icon %PROGRAMFILES%\Git\mingw64\share\git\git-for-windows.ico /dir "C:\path\to\somewhere" where C:\path\to\somewhere is the directory in which you want your shell to start. And set the Commands %PROGRAMFILES%\Git\bin\sh.exe --login -i -new_console

Now select Startup from the left hand options list and set the Startup task from the Specified Named Task dropdown to {Bash:Git bash}. Go ahead and save your settings, close ConEmu and then run it again.

If you have Git for Windows installed and you copy-pasta’d like a pro you should now see a Bash shell in your ConEmu terminal emulator with commands like ls and git config -l available (Git Bash means it’s a Bash shell with Git added to your PATH environment variable).

Git and Bash configuration

You are going to want to setup a couple of configuration files for your tools which I will link to below with short descriptions. These files are all typically located in your home directory on Windows (C:\users\youruser\) which you can get to at the command line using the shortcut cd ~

.gitconfig - This is the configuration for your Git environment and it contains various defaults and customizations related to you and your preferences when working with Git.

[user]
	name = Your Name
	email = [email protected]
[core]
	autocrlf = true
	excludesfile = c:/path/to/your/repos/global.gitignore
	
	# The default editor used when git needs one for you to interact with (ie 'git commit' without a message)
	editor = 'C:/path/to/editor/of/choice/editor.exe' -options -for -editor
[gui]
    # Git GUI recent repo
	recentrepo = c:/path/to/a/recent/repo
[alias]
    # A pretty log that displays a commit graph with details about the commits
    # *  ad49s0 - (HEAD, origin/master, master) Commit message here (x minutes ago) <User Name>
	hist = log --graph --pretty=format:'%Cred%h%Creset -%C(auto)%d%Creset %s %Cgreen(%cr) %C(cyan)<%an>%Creset' --abbrev-commit --date=relative
	
	# Tells you what files were changed in a commit
	# git committed 7fd80b
    # A       index.html
	committed = diff-tree --no-commit-id --name-status --root -r
[push]
    # When 'git push' is entered git will only push if the branc being pushed is tracking a remote upstream branch
    # http://stackoverflow.com/a/23918418/939634
    # This prevents pushing to upstream branches accidentally
	default = simple

.bashrc - This is the configuration for your Bash environment which can contain many customizations for your shell, like what shortcuts (aliases) for commands you have available, custom shell scripts, UI tweaks and much more.

# Filesystem aliases
alias ls='ls -F --color=auto --show-control-chars'
alias ll='ls -alh'
alias size='du -sh *'

# Git aliases
alias gs='git status '
alias ga='git add '
alias gb='git branch '
alias gc='git commit'
alias gd='git diff'
alias go='git checkout '
alias gh='git hist'
alias gk='gitk --all&'
alias gx='gitx --all'

alias got='git '
alias get='git '

# App aliases
alias npp='notepad++.exe $*'

# Functions

# splits Conemu's screen in half, with Notepad++ below if `split npp` and Git Bash below if `split bash`
split() {
	case $1 in
		npp )
			notepad++ $2 -new_console:sV50 ;;
		bash )
			/c/Program\ Files/Git/bin/sh.exe --login -i -new_console:sV50 ;;
	esac
}

# opens up first .sln file found in directory for quick visual studio launching
vs() {
	FILES_LIST="$(ls *.sln 2>/dev/null)"
	for file in $FILES_LIST; do
	start $file
	done
}

# makes dir and cd's into it
mkdir() {
	command mkdir $1 && cd $1
}

# ConEmu Customization
PROMPT_COMMAND='ConEmuC -StoreCWD' # See http://conemu.github.io/en/ShellWorkDir.html#bash_and_other_cygwin_shells

# SSH Init
SSH_ENV=$HOME/.ssh/environment

# start the ssh-agent
function start_agent {
    echo "Initializing new SSH agent..."
    # spawn ssh-agent
    /usr/bin/ssh-agent | sed 's/^echo/#echo/' > ${SSH_ENV}
    echo succeeded
    chmod 600 ${SSH_ENV}
    . ${SSH_ENV} > /dev/null
    /usr/bin/ssh-add
}

if [ -f "${SSH_ENV}" ]; then
     . ${SSH_ENV} > /dev/null
     ps -ef | grep ${SSH_AGENT_PID} | grep ssh-agent$ > /dev/null || {
        start_agent;
    }
else
    start_agent;
fi

.bash_profile - Another shell configuration file where non-shell specific customizations can be kept. There are many resources available to explain the differences between .bashrc, .bash_profile, .profile, ect… so I will defer to them. I keep my PS1 (shell prompt) definition, which customizes its look, feel and functionality, in my .bash_profile

if [ -f ~/.bashrc ]; then
   source ~/.bashrc
fi

# Sets the Prompt string to look something like user@PC /c/dev/projects/programming-authentication (master)
PS1='\[\033]0;$MSYSTEM:${PWD//[^[:ascii:]]/?}\007\]' # set window title
PS1="$PS1"'\n'                 # new line
PS1="$PS1"'\[\033[32m\]'       # change to green
PS1="$PS1"'\u@\h '             # user@host<space>
PS1="$PS1"'\[\033[35m\]'       # change to purple
# PS1="$PS1"'$MSYSTEM '          # show MSYSTEM
PS1="$PS1"'\[\033[33m\]'       # change to brownish yellow
PS1="$PS1"'\w'                 # current working directory
if test -z "$WINELOADERNOEXEC"
then
	GIT_EXEC_PATH="$(git --exec-path 2>/dev/null)"
	COMPLETION_PATH="${GIT_EXEC_PATH%/libexec/git-core}"
	COMPLETION_PATH="${COMPLETION_PATH%/lib/git-core}"
	COMPLETION_PATH="$COMPLETION_PATH/share/git/completion"
	if test -f "$COMPLETION_PATH/git-prompt.sh"
	then
		. "$COMPLETION_PATH/git-completion.bash"
		. "$COMPLETION_PATH/git-prompt.sh"
		PS1="$PS1"'\[\033[36m\]'  # change color to cyan
		PS1="$PS1"'`__git_ps1`'   # bash function
	fi
fi
PS1="$PS1"'\[\033[0m\]'        # change color
PS1="$PS1"'\n'                 # new line
PS1="$PS1"'$ '                 # prompt: always $

Hopefully after all this installation and configuration you will end up with a nicely configured ConEmu setup.

We will pause here for now and pick up next time with ssh configuration to connect Git and your Bash shell to sites like Github.com by allowing your shell commands to be authenticated. We will also cover node.js, npm and configuring your environment PATH to make your shell even more powerful.

Fortunately there is a lot of documentation covering ConEmu and Git for Windows if you wish to continue reading or need help solving a problem and you can always feel free to drop us a comment if you have any questions.