Beautify your Linux Terminal: Ohmyzsh+wsl+Hyper.js!
Do you like the comfort of Windows, but also want to use a cool Linux terminal 💻 ? In this article, we will explore the steps to configure Hyper.js to use Ohmyzsh! with Spaceship theme using wsl on Windows. 😉
The popularity of Linux among developers, and the fact, that majority of servers on internet use some version of Linux, pushed Microsoft to come up with “wsl- Windows Subsystem for Linux”. With WSL, you can have a minimal version of Linux kernel on your windows OS, even without installing any virtual machine or a dual-boot system.
Our goal: A 🆒 Linux Terminal shell with auto-completion and auto-suggestion features along with all the awesomeness Linux has to offer.
Requirements: Windows Operating System with VSCode Editor installed.
Let’s get started ! (PLease keep patience, when some libraries take time to install 😛)
Note: Everything between 🏃xyz123🏃 is the code that has to be copied and run on your terminal.
& Everything that is between 📋xyz123📋 has to be copied and then added/replaced as mentioned in the respective step.
Step 1: Enable wsl on Windows : Use WindowsKey+ X to run Powershell in elevated mode and paste the following command:
🏃 dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart 🏃
Step 2: Restart Your Machine.
Step 3: Install a linux distribution form Microsoft App Store : I prefer Ubuntu (my version is 20.04) and then Launch it.
Create a username and password for this OS.
Step 4: Update package manager and libraries:
🏃 sudo apt-get update 🏃
🏃 sudo apt-get upgrade 🏃
Step 5: Now install zsh
🏃 sudo apt-get install zsh 🏃
🏃 zsh 🏃
Select the option to create an empty .zshrc file by pressing 0 and hitting Enter.
Step 6: Install Oh My Zsh: we will use curl to install it. So, make sure curl is installed first. Most probably curl and Git got already installed as we upgraded our libraries .
🏃 sudo apt-get install curl 🏃
🏃 sh -c “$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 🏃
When prompted select y to set zsh as your default shell and click Enter.
Step 7: Install spaceship theme for prompt
🏃git clone https://github.com/denysdovhan/spaceship-prompt.git “$ZSH_CUSTOM/themes/spaceship-prompt” 🏃
Then, Symlink, spaceship.zsh-theme to your oh-my-zsh custom themes directory
🏃 ln -s “$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme” “$ZSH_CUSTOM/themes/spaceship.zsh-theme” 🏃
Step 8: Edit configuration file for zsh
🏃 code ~/.zshrc🏃
Add the below code at the end of the file.
📋 set ZSH_THEME=”spaceship”
SPACESHIP_PROMPT_ORDER=(
user # Username section
dir # Current directory section
host # Hostname section
git # Git section (git_branch + git_status)
hg # Mercurial section (hg_branch + hg_status)
exec_time # Execution time
line_sep # Line break
vi_mode # Vi-mode indicator
jobs # Background jobs indicator
exit_code # Exit code section
char # Prompt character
)
SPACESHIP_USER_SHOW=always
SPACESHIP_PROMPT_ADD_NEWLINE=false
SPACESHIP_CHAR_SYMBOL=”❯”
SPACESHIP_CHAR_SUFFIX=” “ 📋
Step 9: Install Fira Code Font on your system.
https://github.com/tonsky/FiraCode. Download the zip file and extract it. Open the tty folder and click on each font file and click install. Select all the fonts on the folder one by one without missing any file.
Restart the shell.
Step 10: Now install Hyper terminal and configure it :https://hyper.is/. Press ctrl + ,
This will open hyper.js configuration file. Replace the following code if it exists or create it: Do not forget to replace the username in shell path with your username, your shell path will be different than mine, do change it!
📋 fontFamily: ‘“Fira Code”, Menlo, “DejaVu Sans Mono”, “Lucida Console”, monospace’,
shell: ‘C:\\Users\\devqu\\AppData\\Local\\Microsoft\\WindowsApps\\ubuntu2004.exe’,
shellArgs: [],
plugins: [‘hyper-dracula’], 📋
Restart the hyper terminal.
Step 11: Install Plugins: zsh-completions, zsh-autosuggestions and fast-syntax-highlighting:
🏃 sh -c “$(curl -fsSL https://raw.githubusercontent.com/zdharma/zinit/master/doc/install.sh)"🏃
Step 12: Configure the zshrc file
🏃 code ~/.zshrc🏃
Add the following lines at the end of it:
📋zinit light zdharma/fast-syntax-highlighting
zinit light zsh-users/zsh-autosuggestions
zinit light zsh-users/zsh-completions📋
Step 13: Install wsl remote extension for vscode, it will update the terminal for VS Code automatically!😃
Optionally, you can change the default terminal for local window file system as well :
Open vscode config: ctrl + shift +p and add this line to JSON settings file for user
📋“terminal.integrated.shell.windows”: “C:\\Users\\devqu\\AppData\\Local\\Microsoft\\WindowsApps\\ubuntu2004.exe”,📋
Step 14: Installing node on our new ubuntu container, as it can’t access the node installed on windows.
First install basic build tools for node-gyp that complies native add-on tools for node:
🏃 sudo apt-get install build-essential🏃
Then , install node version manager (nvm):
🏃 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash 🏃
Step 15: Configure the zshrc file
🏃 code ~/.zshrc🏃
Add the followings line at the end of the file and save it.
📋export NVM_DIR=”$HOME/.nvm”
[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh”📋
Step 16: Install node:
🏃 source ~/.zshrc🏃
🏃 nvm install — lts🏃
🏃 nvm use — lts🏃
Check the version of node installed by running the command:
🏃 node — version🏃
Congratulations 🍷 for configuring your terminal successfully!
Optionally, you may also want to remove your username from prompt. To do that edit the zshrc config file :
🏃 code ~/.zshrc🏃
And comment out the user from spaceship prompt order.
