DEV Community 👩‍💻👨‍💻

mnmartinelli
mnmartinelli

Posted on

The ultimate starter setup

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

Prequesites

  1. Install Windows Terminal

  2. Install the latest version of PowerShell

  3. Install VSCode

Setup WSL2

  1. Update to the latest version of Windows before proceeding

  2. Navigate to 'Turn Windows features on or off'

    • Image description
  3. Enable 'Windows Subsystem for Linux' and Virtual Machine Platform

    • Image description
    • Press 'ok', then following the instructions on-screen and restart the system.
  4. After the system reboots, Install the latest version of Ubuntu

  5. Launch Windows Terminal, navigate to settings, and change the Default profile to 'PowerShell'

    • Image description
    • Image description
  6. Open Ubuntu, setup a username and password

    • Image description
  7. Switch back to PowerShell and enter the command:

    wsl -l -v
    
  • Image description

    1. 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

  • 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

  • Image description

  • 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
    • Image description
    • 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
  2. Install Oh My Posh and customize profile

  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

    #command to create a folder
    mkdir PowerShell
    
  • change directory to insider the 'PowerShell' folder
    Image description

    #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

  • Download Zip

  • 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

  • Save file and restart shell. Your profile should look something like this:

  • Image description

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
    
  1. 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:

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.