bryanashley.dev

WSL, VSCode, and Gemini Setup Guide

Setting up a robust development environment is the first step toward a productive coding journey. For Windows users, the combination of WSL2 and VSCode offers a near-native Linux experience with the comfort of a familiar desktop. In this guide, I'll walk you through my personal setup process, including the installation of the Gemini CLI for AI-assisted development.

WSL, VSCode, and Gemini Setup Guide

This guide will walk you through setting up a development environment using Windows Subsystem for Linux (WSL), Visual Studio Code, and the Gemini CLI.

1. Install WSL with Ubuntu LTS

First, we'll install WSL with the latest Ubuntu LTS distribution.

  1. Open PowerShell as Administrator:

    • Press Win + X and select "Windows PowerShell (Admin)".

  2. Install WSL:

    • Run the following command to install WSL and the default Ubuntu distribution:
      wsl --install

  3. Restart Your Computer:

    • After the installation is complete, restart your computer to finalize the setup.

  4. Set Up Your Ubuntu User:

    • Once your computer has restarted, Ubuntu will start and prompt you to create a new user account and password. This will be your default user for the Linux environment.

2. Install Zsh, Oh My Zsh, and Plugins

Next, we'll replace the default Bash shell with Zsh and enhance it with Oh My Zsh.

  1. Update Your Package List:

    sudo apt update

  2. Install Zsh:

    sudo apt install zsh -y

  3. Install Oh My Zsh:

    • Install curl first if you don't have it:
      sudo apt install curl -y
    • Run the Oh My Zsh installation script:
      sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
    • If prompted, set Zsh as your default shell.

  4. Set the "gmzh" Theme:

    • Open your Zsh configuration file in a text editor like nano:
      nano ~/.zshrc
    • Find the line that starts with ZSH_THEME and change it to:
      ZSH_THEME="gmzh"
    • Save the file (Ctrl + O, Enter) and exit (Ctrl + X).

  5. Install the Autocomplete Plugin:

    • We'll use the zsh-autosuggestions plugin. Clone the repository into your Oh My Zsh plugins directory:
      git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
    • Open your .zshrc file again:
      nano ~/.zshrc
    • Find the plugins line and add zsh-autosuggestions to the list:
      plugins=(git zsh-autosuggestions)
    • Save and exit the file.

  6. Apply the Changes:

    • Restart your shell or run the following command to apply the changes:
      source ~/.zshrc

3. Install NVM, Node.js, and npm

Now, let's install Node.js and npm using the Node Version Manager (NVM).

  1. Install NVM:

    • Run the NVM installation script. Check the official NVM repository for the latest version number.
      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

  2. Update Your Shell Configuration for NVM:

    • Close and reopen your terminal, or run the following commands to add NVM to your shell's path:
      export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

  3. Install the Latest LTS Version of Node.js:

    • Run the following command to install the latest Long-Term Support (LTS) version of Node.js:
      nvm install --lts

  4. Verify the Installation:

    • Check that Node.js and npm are installed correctly:
      node -v
npm -v

4. Install the Gemini CLI

Finally, let's install the Gemini Command Line Interface (CLI).

  1. Install the Gemini CLI via npm:

    • Run the following npm command to install the Gemini CLI globally:
      npm install -g @google/gemini-cli

  2. Verify the Installation:

    • Check that the Gemini CLI is installed:
      gemini --version

Congratulations! You have successfully set up your development environment.