Setting up a Windows PC for web development

Short checklist of things to take care of

Photo by Artin Bakhan on Unsplash

I got my Lenovo ThinkPad P50 back after a long while. Given that I’m between jobs right now, I decided to set this machine up from scratch to play with it a bit. There are some things I always do when I set up a new Windows PC for web development, and there are things I always have to look up. This time, I decided to write things down so I can refer to my notes next time. Since I get asked about such a list by newbies, I decided to share it here as well.

Without further ado, here’s how I set up the machine.

TL;DR:

• Show file extensions and hidden files
• Configure Windows to open folders with Command Prompt
• Install Google Chrome (Brave) and Fiefox (LibreWolf)
• Install Web Developer and HeadingsMap extensions
• Install CLink
• Allow DOSKEY macros to be saved to and loaded from macros.txt
• Install an editor
• Install Git for Windows
• Configure Git user name and email
• Configure Git aliases
• Generate the SSH key
• Install NVM and NodeJS LTS version
• Install NVDA
• Install Docker
• Install Greenshot
• Install Zeal for offline documentation

Show file extensions and hidden files

In the File explorer, I like to have file extension and hidden files visible. This is done by enabling the relevant options in the “View” menu, “Show/hide” section of the ribbon.

This let’s me see the extension of the files and also reveals hidden folders that are frequently mentioned in various tips and documentation online.

Open folders with Command Prompt

I prefer Command Prompt over PowerShell, so I like to configure the system to open folders with Command Prompt as soon as I install the system. You don’t have to do this if you prefer PowerShell or Git Bash, of course.

Andrew Richards shared a little gem about including multiple options for opening the Command Prompt (and other programs) by right-clicking folders in the File explorer. The TL;DR is I copy the following code to a prompt.reg file:

Windows Registry Editor Version 5.00

; Command Prompt

[HKEY_CLASSES_ROOT\Directory\shell\01MenuCmd]
"MUIVerb"="Command Prompts"
"Icon"="cmd.exe"
"ExtendedSubCommandsKey"="Directory\\ContextMenus\\MenuCmd"

[HKEY_CLASSES_ROOT\Directory\background\shell\01MenuCmd]
"MUIVerb"="Command Prompts"
"Icon"="cmd.exe"
"ExtendedSubCommandsKey"="Directory\\ContextMenus\\MenuCmd"

[HKEY_CLASSES_ROOT\Directory\ContextMenus\MenuCmd\shell\open]
"MUIVerb"="Command Prompt"
"Icon"="cmd.exe"

[HKEY_CLASSES_ROOT\Directory\ContextMenus\MenuCmd\shell\open\command]
@="cmd.exe /s /k pushd \"%V\""

[HKEY_CLASSES_ROOT\Directory\ContextMenus\MenuCmd\shell\runas]
"MUIVerb"="Command Prompt Elevated"
"Icon"="cmd.exe"
"HasLUAShield"=""

[HKEY_CLASSES_ROOT\Directory\ContextMenus\MenuCmd\shell\runas\command]
@="cmd.exe /s /k pushd \"%V\""

Double-click the file and I’m done. This is the Command Prompt version, but the original article contains more, along with some great commentary on the discovery process.

This gives me a new entry when I right-click on a folder or the empty space inside a folder when no file is selected.

Browsers and extensions

There are currently three desktop browsers that we care about 99% of time. Google Chrome, Mozilla Firefox, and Apple Safari. You can’t have Safari on Windows, so it’s down to just Chrome and Firefox.

I don’t use either of those for privacy reasons. I install Brave and LibreWolf instead. Brave is a Chrome-compatible browser with privacy enhancements (also great for browsing the web without ads), while LibreWolf is a Firefox fork without privacy-compromising “features”. They both have the full set of developer tools, and render the pages exactly the same as the originals, but may be slightly behind the latest and greatest features. I’m usually not using the latest stuff anyway (there just isn’t a need for me), so it’s an excellent trade-off. All the important tools I need are fully supported in both browsers, and they are both compatible with the extension ecosystems of their respective originals.

In both browsers, I also install the Web Developer extension (Chrome version, Firefox version), and the HeadingsMap extension (Chrome version, Firefox version).

Among other things, the Web Developer toolbar gives me access to quick toggles for JavaScript, CSS, and other features, so I can test the behavior of the page under various non-standard conditions without digging through the menus. It’s really a swiss army knife for web developers with lots of other features.

HeadingsMap is an extension that gives me a tree view of all the headings in the page, and also flags inconsistencies in heading order and nesting. This extension is technically not needed in both browsers, as the result is going to be exactly the same regardless of the browser, but I find that the extension doesn’t always work in Brave in some exotic cases, so I keep it installed in LibreWolf as well.

I also thought it was quite hilarious that the MDN page about the heading of all the places on the Web has wrong heading order. 🤦‍♂️

Enhance the Command Prompt

I use CLink to enhance the Command Prompt. This little program starts when I open the Command Prompt, and gives me some useful shortcuts for working with the terminal, including Bash-like Ctrl+R for finding previously used commands, pasting with Ctrl+V, etc. It also gives me autocompletion of filesystem paths and many commands including Git. It is no longer maintained, but it has always worked well for me, so I continue to use it.

Neither Command Prompt nor CLink have built in command aliases. For that I use DOSKEY. When CLink is installed, it is configured to start automatically with the Command Prompt. This is defined in the registry. I edit the registry by starting the regedit program to change this. I press Win+R to open the Run dialog, and type regedit there.

I navigate to the HKEY_CURRENT_USER\SOFTWARE\Microsoft\Command Processor key (you can just copy that into the address bar in regedit), and edit the AutoRun key by double-clicking it. By default, it will say something like this:

"C:\Program Files (x86)\clink\0.4.9\clink.bat" inject --autorun --profile ~\clink 

To the end of this command, I add the following (with a blank before the & character):

& doskey /macrofile=%userprofile%\macros.txt

After saving this change, when I open the Command Prompt, DOSKEY will complain about the missing macros.txt, but that’s fine. As that’s the next thing I’m taking care of.

First, I will create a macro (command alias) that saves currently active macros to the said macros.txt file. I do this by running the following command:

doskey savemacros=doskey /macros $G %userprofile%\macros.txt

I will immediately run the created macro to save it. Macros are executed like any other command, so I just type savemacros and hit Enter. Then I verify that the macro file was created by typing:

type %userprofile%\macros.txt

Editor

I won’t talk about how I install and configure my editor, because every developer will have their own preference. If you don’t know which one to use, here are some suggestions:

• VSCodium — Open-source version of Visual Studio Code with telemetry and other non-open-source parts removed. It may not be compatible with some extensions, however. I myself have not had issues with it, though. YMMV.
• Vim — An old-school editor, fast and quite extensible, has the best Git and Markdown plugins on any editor. Also a steep learning curve, but rewarding editing experience once mastered. The way editing works in Vim can be replicated in most other editors using plugins, so it’s a widely applicable skill.
• SublimeText — A light and powerful editor. It’s nagware, so it will nag you until you pay up but otherwise let you use it in full. It’s the sweet spot between speed and feature-richness.
• JetBrains WebStorm — Powerful and extremely convenient. It’s a kitchen-sink-included IDE for web development and you (probably) won’t need much in the way of extensions (I only have one, IdeaVim). The flip side is that it is a paid product with a 30-day free trial only, and it’s also not as fast as the previous two.

I use the JetBrains WebStorm since it pays for itself after just a few hours of work in my case. Your mileage may differ. Since it’s a full-blown IDE, though, I also like to install a lightweight editor for quick edits.

Git & SSH

You can’t really work without Git these days. So, naturally, this is one of the things I must set up on my PC. I install the Windows version of the source code manager.

I will warn you that you probably want to stay away from graphical Git apps if you are new to Git. It may sound like the advice should be the other way around, but it’s not a typo. I’ve tried a few of these graphical interfaces for Git, but they just try too hard, and as a result, may put you in a very bad situation if you’re not careful and you or your team use a more “advanced” workflow like the rebase workflow. With the increased popularity of the rebase workflow, the tools may have improved, but the command line usage is really not that hard (you don’t even need an entire free book to get started), and the graphical tools are even more useful when you understand what they do behind the scenes.

During installation, the installer will prompt me for various options. I make sure that:

• I specify the preferred editor.
• I specify I want the line endings to be checked out “as is” (so if the remote repository contains Unix line endings, then Unix line endings will be on your computer when you check out a branch), and that I want them always committed as “Unix”.
• I specify that I want git pull to rebase current changes on top of the remote branch.

I change the rest of the option to taste.

When Git is installed, I create a macro so I can use it with a single letter command:

doskey g=git $*
savemacros

Next I set my user name and email:

g config --global user.name "Hajime Yamasaki Vukelic"
g config --global user.email "me@example.com"

(I do use a real email address in real life, of course.)

I will also set up a few aliases for the commands I use often.

g config --global alias.ci commit
g config --global alias.st status
g config --global alias.br branch
g config --global alias.co checkout
g config --global alias.rb rebase
g config --global alias.pu pull
g config --global alias.ps push
g config --global alias.ls "log --graph --oneline --decorate" 

With these aliases, I can get git status by typing g st, for example.

The last one will give me a summary of your current branch’s history in reverse chronological order, like so:

Although these days it’s not strictly necessary, I like to also have a SSH key to access my repositories. For each new machine, I generate a new key. First I create a folder called .ssh within my user folder:

md %userprofile%\ssh
cd %userprofile%\ssh

Within that folder, I use the ssh-keygen command with no arguments to generate the key. I simply press Enter on all prompts, and that’s it.

The public key is in the id_rsa.pub file, which I can list to get the contents:

type id_rsa.pub 

I will copy this to my GitHub and/or GitLab accounts so I can clone the repositories and push to them.

NVM & NodeJS

I like to install NodeJS using NVM. This is a program that lets me install multiple versions of NodeJS on the same machine and switch between them on the fly. The installer is found in the releases section of its repository.

Once installed, I install the LTS version to serve as the default:

nvm install lts

Next I activate this version:

nvm use lts

I can repeat the same process, replacing lts with a different version, if I need another version.

I then test whether the installation was successful by running the following commands:

node --version
npm --version

Next, I make sure npm is at the latest version, and install Yarn:

npm i -g npm yarn

Installing Yarn is optional, but since lots of projects use it, I think it doesn’t hurt to have it installed.

Screen reader

Although Windows has the Narrator program, the most popular (free) screen reader for Windows is NVDA. These days I always check things using NVDA, so that’s what I always install on my web development PC.

Since I’m not an actual NVDA user, and I just use it for testing purposes, I make sure all settings remain at their defaults. This is a good enough test setup.

Docker

Just like Git, it’s nowadays quite difficult to dodge Docker. I install the Windows version from the official website.

Once Docker is installed, the installer will ask me to reboot the machine. I always do this immediately, because the installer activates some Windows features that it needs in order to run correctly (e.g., WSL 2).

After the reboot, Docker will prompt me to accept the license terms, and also prompt me to install the WSL 2 kernel. The latter is a simple matter of following the instructions on the Microsoft’s website. When I’m done with the WSL 2 kernel, Docker should be ready… only it isn’t. It requires one more reboot before it will run correctly.

Screenshot tool

When I’m talking to other people about some issue in an application, I often share screenshots. Greenshot is the best screenshot tool for Windows that I know of. One of the best features it has is the ability to take a screenshot of a screen region. It’s not exactly a unique feature, but the way it does it is. As soon as I hit PrtScr Greenshot first takes the screenshot (with the cursor included, which is very useful!) and then it allows me to select a region. For time-critical screenshooting, this is amazing.

When I install it, I configure it to automatically save the files without prompting me, and also save a copy of the image in the clipboard so I can quickly paste it into Slack or other chat apps. This is set in the “Destination” tab in the settings:

Offline documentation with Zeal

I like to keep offline versions of the documentation handy for those rare occasions when Internet fails me. For this I use Zeal. It’s not perfect, but it gets the job done in a pinch.

Once Zeal is installed using the installer on the official site, I install the docsets by going into the Tools > Docsets menu, and installing the docsets I need from the “Available” tab.

All set

This is normally all I need to get my job done (or just hack for fun). I hope this has been useful to you.