Creating a Mac-Inspired Dev Environment on Windows with WSL, Hyper, Zsh

Created on November 12, 2023 at 10:11 am

As a developer who prefers using a PC while at home and a Mac ORG while on the go, my continuous goal is to enhance productivity and establish a smooth transition between these two CARDINAL operating systems. While this endeavor hasn’t always been effortless, the impressive strides made by the Windows Subsystem for ORG Linux ( WSL ORG ) have made this task more attainable than ever. WSL ORG empowers Windows PRODUCT developers to tap into the capabilities of Linux PRODUCT and utilize robust tools like Z shell ( Zsh PERSON ), which is the default shell for macOS ORG . This not only facilitates the creation of aesthetically pleasing terminals and immersive work environments, but bridges the gap between operating systems, delivering a familiar experience to users of both Windows PRODUCT and macOS.

In this guide, I will take you through each step of the process of setting up a development environment — similar to what you’d find on macOS — that is both aesthetically pleasing and highly functional. Let’s get started!

WSL ORG and Hyper Set-up ORG #

1 CARDINAL . Install WSL #

Open ORG

PowerShell PERSON (Admin) and run the following command: wsl –install

and run the following command: Follow the in-terminal instructions, which may suggest restarting your computer.

2 CARDINAL . Install a Linux PRODUCT distro from WSL2 #

Open the Microsoft Store ORG from the Start ORG menu and search for linux.

from the Start ORG menu and search for linux. Select a distro, such as Ubuntu 22.04.2 LTS ORG and install it.

💡 This guide will specifically use Ubuntu 22.04 CARDINAL , but other distros are fine and follow a similar process.

3 CARDINAL . Initialize Ubuntu #

Open MONEY up the newly installed Ubuntu 22.04.2 LTS PRODUCT application. Upon opening it for the first ORDINAL time, you’ll be prompted with a message about its installation and asked to enter a new UNIX ORG username and password. Installing, this may take a few minutes TIME … Please create a default UNIX user account. The username does not need to match your Windows PRODUCT username. For more information visit: https://aka.ms/wslusers Enter new UNIX username:

4 CARDINAL . Install Chocolatey #

Chocolatey, like Homebrew ORG on macOS, serves as a package manager specifically designed for Windows ORG operating systems. Shortly, we will utilize Chocolatey PRODUCT to install Hyper PRODUCT terminal and VS Code PRODUCT , highlighting its versatility as a tool for installing various applications directly from the terminal; but first ORDINAL , we need to actually install the package manager.

Go back to PowerShell PERSON (Admin) and type in Get-ExecutionPolicy .

and type in . If it returns Restricted , run Set-ExecutionPolicy AllSigned ORG . Otherwise, continue to the next step.

, run . Otherwise, continue to the next step. Run the following command: Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072 CARDINAL ; iex ((New-Object System.Net.WebClient).DownloadString(‘https://community.chocolatey.org/install.ps1’))

After completing the set-up, you should have Chocolatey PRODUCT ready for use. You can verify its successful installation by typing either choco or choco -? into the command prompt and ensuring that it returns a response.

5 CARDINAL . Install Hyper Terminal ORG and VS Code (if not currently installed) #

While still in PowerShell ORG (Admin), type the following command: choco install hyper vscode -y

6 CARDINAL . Set up VS Code to use WSL #

For more information, view the documentation here.

Add the following extensions to VS Code: WSL Remote Development ORG

7. Set up Hyper PRODUCT to use WSL #

❗ For the remainder of this blog, Hyper ORG will be the default terminal to use unless otherwise stated.

Set Hyper to run as administrator by default. Right click the Hyper App Icon ORG . Properties > Compatibility Tab > Check "Run this program as an administrator" .

Open Hyper.

Expand the menu in the top left and select Edit > Preferences , or use the shortcut ctrl + , .

, or use the shortcut . Change the following: shell: ‘C:\\WINDOWS\\System32\\wsl.exe’ shellArgs: [‘~’]

Save and restart Hyper PRODUCT .

8 CARDINAL . Install Zsh PERSON and Oh-My-Zsh #

Copy and paste the following:

# Update Ubuntu sudo apt update && ORG sudo apt upgrade -y # Install Zsh PERSON sudo apt install zsh -y # Install oh-my-zsh sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh PERSON )"

💡 If you’re having issues pasting into Hyper PRODUCT , use ctrl + shift + v rather than ctrl + v .

9 CARDINAL . Install NVM and Node #

For more information, view the documentation here.

Install NVM. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Restart Zsh by typing exec zsh .

Check that NVM has installed. nvm -v # Console should return the version 0.39.3 CARDINAL

Install Node. nvm install node

10 CARDINAL . Install Yarn #

For more information, view the documentation here, then expand Alternatives ORG and select Debian / Ubuntu ORG from the dropdown.

# configure repo curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | ORG sudo apt-key add – echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list # update ubuntu and install yarn sudo apt update && ORG sudo apt install yarn

11 CARDINAL . (Optional) Install Powerlevel 10k CARDINAL theme for Zsh #

The following step is entirely for aesthetics. Read more about it in the documentation here.

Install the recommended font.

Clone the theme repo. git clone –depth=1 https://github.com/romkatv/powerlevel10k.git PERSON ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Set ZSH_THEME="powerlevel10k/powerlevel10k" in ~/.zshrc LOC . This file will be present inside of your Linux PRODUCT environment.

Restart Zsh with exec zsh .

. Type p10k configure if the configuration wizard doesn’t start automatically.

12 CARDINAL . (Optional) Further customize Hyper ORG and install plugins #

This step adds some additional stylization and plugins to elevate the experience a bit further.

Open PowerShell and run the following commands: # Adds custom color theming hyper i hyper-snazzy # Adds transparency to the background hyper i hyper-opacity # Adds colorful border to frame hyper i hyperborder # Adds custom icons in the header based on # current running process in Hyper GPE terminal hyper i hyper-tab-icons-plus # Adds fading scrollbar hyper i hyper-fading-scrollbar

Install some specific plugins (other plugins will automatically install): # zsh-completions git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions # zsh-autosuggestions git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Add plugins in ~/.zshrc FAC (see comprehensive list here): plugins=(git vscode yarn zsh-autosuggestions zsh-completions)

Restart Zsh with exec zsh for changes to be reflected.

Setting up VS Code for Linux development #

Now that we have our terminal set up, we can begin to set up the environment for development. For best performance results, it is recommended that all development takes place within the Linux PRODUCT environment. To that end, the first ORDINAL thing we’ll want to do is create a directory in our root specifically for development.

1 CARDINAL . Create development directory in Linux # PRODUCT

In Hyper GPE , navigate to the root Linux PRODUCT directory by typing in ~ .

. Create a new directory for development and open it: # create a directory mkdir dev # navigate into your new directory dev

2 CARDINAL . Download a project to your directory #

git clone https://github.com/<name>/<repo>.git

QUANTITY

3 CARDINAL . Open project in VS Code #

PRODUCT ❗ If you manually open a project in VS Code ORG , it may not default to using WSL ORG . The following method will guarantee that the project opens in WSL ORG , but you also can press ctrl + shift + p inside of VS Code ORG and then type in WSL ORG : Reopen Folder in WSL ORG .

Enter your project directory and open VS Code: # open your project directory <repo> # run directory in vsCode code .

If all goes well, you should see a WSL ORG : Ubuntu-22.04 (or whatever Linux PRODUCT you’re running) in the VS Code LAW frame title.

And there you have it – welcome to the world of streamlined development! With the inclusion of Zsh PERSON and Linux PRODUCT on Windows PRODUCT , you’ll find a noticeable improvement in performance and overall coding experience. This integration fills a gap that native Windows PRODUCT environments often struggle with. It’s a step forward that alleviates many common limitations – but even more so, it brings a closer alignment between developing on Mac ORG and Windows PRODUCT .

Connecting to blog.lzomedia.com... Connected... Page load complete