The ultimate starter setup
Tags: webdev, tutorial, linux, discuss
Published: 2022-05-01 23:29:42

TLDR; This guide will setup WSL2 Ubuntu web development environment with oh-my-posh customization.


## Prequesites

1. Install Windows Terminal
  * [Download](https://www.microsoft.com/store/productId/9N0DX20HK701)


2. Install the latest version of PowerShell
  * [Download](https://www.microsoft.com/store/productId/9MZ1SNWT0N5D)

3. Install VSCode
  * [Download](https://code.visualstudio.com/)

## Setup WSL2

1. Update to the latest version of Windows before proceeding


2. Navigate to '**Turn Windows features on or off**' 
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prba6j4qieaf002zqysu.png)



3. Enable '**Windows Subsystem for Linux**' and **Virtual Machine Platform**
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4ifixyr0fjz3mmb6u18.png)
  * Press '**ok**', then following the instructions on-screen and restart the system.


4. After the system reboots, Install the latest version of Ubuntu
  * [Ubuntu-20.04 Download](https://www.microsoft.com/store/productId/9N6SVWS3RX71)


5. Launch Windows Terminal, navigate to settings, and change the Default profile to 'PowerShell'
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3n6sw65ufls32fk9nzmu.png)
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijizuzlmg463ltzz8j91.png)


6. Open Ubuntu, setup a username and password
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehzi6jigtvsux6o8b6j2.png)

7. Switch back to PowerShell and enter the command:
    ```
wsl -l -v
```
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsgl3m52dblngc45l7p6.png) 
8. If Ubuntu is running on WSL version 1, you'll need to change to version '2', Enter the following command:
    ```
wsl --set-version Ubuntu-20.04 2
```
  * if you're not using another OS:
    ```
wsl --set-version <os-name> 2
```
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ckw5a33tvxu7p0o7o8d.png) 
  * WSL2 might require a kernel update, if so please follow the link and install. Then run this command again:
    ```
wsl --set-version Ubuntu-20.04 2
```
  * [Download Linux kernel update from MS](aka.ms/wsl2kernel)  
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tje8b6wr8whlzqdpx91d.png)
  * To make sure everything is running smoothly, restart windows Terminal and run the command: 
    ```
wsl -l -v
```
  * Now WSL2 is setup and you can run the linux kernel directly with:
    ```
wsl
```

## Customize PowerShell

1. Download Caskaydia Cove Nerd Font from nerdfonts.com
  * [Direct Download](https://github.com/ryanoasis/nerd-fonts/releases/download/v2.1.0/CascadiaCode.zip)
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42k9nsidst71misq4ax7.png)
  * Extract zip folder and install all fonts.
  * Then navigate to Windows Terminal Settings, Under profiles select 'Defaults' and change the font to 'CaskaydiaCove NF'
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od2t76cgazr4knrhby5t.png)
 


2. Install Oh My Posh and customize profile
  * [Oh My Posh Documentation](https://ohmyposh.dev)
  * In PowerShell enter: `winget install JanDeDobbeleer.OhMyPosh`
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lzwuoro4pdg5crwebsn.png)
3. Create PowerShell profile
    ```
echo $PROFILE
```
  * Most likely this folder and file does not exist, you will have to create a 'PowerShell' folder and a 'Microsoft.PowerShell_profile.ps1' file in that location.
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z848ipxp7d6txexk657v.png) 

    ```
#command to create a folder
mkdir PowerShell
```
  * change directory to insider the 'PowerShell' folder
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvdr3phb0ith52s3n0k4.png)
    ```
#creates file
echo $PROFILE >> Microsoft.PowerShell_profile.ps1
```
  * Open file in VS code
    ```
code .
```
  * Trust author and Install recommend extension
  * Replace text with:
    ```
oh-my-posh --init --shell pwsh --config ~/jandedobbeleer.omp.json | Invoke-Expression
```
  * save changes and restart shell.
  * **OR**
  * Install the theme I'm using from [Scott Hanselman's Guide](https://www.hanselman.com/blog/my-ultimate-powershell-prompt-with-oh-my-posh-and-the-windows-terminal)
  * [Download Zip](https://gist.github.com/shanselman/1f69b28bfcc4f7716e49eb5bb34d7b2c?WT.mc_id=-blog-scottha)
  * Extract zip
  * Locate oh-my-posh\themes. For example, my theme folder was found here:
    ```
C:\Users\Michael\AppData\Local\Programs\oh-my-posh\themes
```
  * Place ohmyposhv3-v2.json inside themes folder
  * Replace text inside Microsoft.PowerShell_profile.ps1 with:
    ```
oh-my-posh --init --shell pwsh --config <add file path to theme here> | Invoke-Expression
```
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ej71o6zzyl12v73cem8f.png)
 

  * Save file and restart shell. Your profile should look something like this:
  * ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2ukqieanajvuhnplyc9.png)

### Optional Plugins:

1. Terminal-Icons
  * Enter into PowerShell:
    ```
Install-Module -Name Terminal-Icons -Repository PSGallery
```
  * Then add the following to $profile
    ```
Import-Module -Name Terminal-Icons
```
2. PSReadLine
  * Enter into PowerShell
    ```
Install-Module PSReadLine -AllowPrerelease -Force
```
  * Then add the following to $profile
    ```
Import-Module PSReadLine
Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows
```

 
 

## Sources:
  * [Scott Hanselman's guide](https://www.hanselman.com/blog/my-ultimate-powershell-prompt-with-oh-my-posh-and-the-windows-terminal)
  * [Scott Hanselman's video guide](https://youtu.be/VT2L1SXFq9U)
  * [WSL2 MS doc](https://docs.microsoft.com/en-us/windows/wsl/install)
  * [WSL2 Tutorial](https://youtu.be/_fntjriRe48)
  * [Oh-My-Posh doc](https://ohmyposh.dev/)
  * [PSReadLine Doc](https://github.com/PowerShell/PSReadLine?WT.mc_id=-blog-scottha)