In the previous post, we saw how to install and setup WSL2. In this post we will setup WSL2 with Git, VSCode, Hyper and NodeJS.
Initial Setup
You can skip this section if you haven't used LXrunoffline WSL management tool for installing a distro, but rather directly from MS Store
In powershell
wsl
This will open the default WSL distro's terminal inside Powershell. Follow the steps,
Create a new user
sudo adduser <username>
id -u <username>
Remember the ID.
Give root permissions to the newly added user.
usermod -aG sudo <username>
exit
Now, we have to change the default user for WSL. To do this open powershell and run
wsl --shutdown
lxrunoffline su -n Ubuntu-20.04 -v <id>
where <id> is the ID of the user you just added.
Replace Ubuntu-20.04 with your default distro's name.
Now, this will set the newly added user as default user for the mentioned distro.
Install Hyper
Install Hyper from here.
Hyper is a Cross Platform terminal app built with ElectronJS. You can install plugins directly with NPM. Do check out this repo.
Now, if you open up hyper, you will see that it is opening windows' cmd prompt by default. We have to change default shell to our default WSL distro's shell.
To do so, open preferences. Shortcut - ctrl + ,
It will open a .hyper JS file. In that file scroll down to this section
// PowerShell on Windows
// -Example:`C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe`
shell: '',
// for setting shell arguments (i.e. for using interactive shellArgs: `['-i']`)
// by default `['--login']` will be used
shellArgs: ['--login'],
It is the config file for Hyper and it IS JavaScript.
Change shell and shellArgs values to,
shell: 'C:\\Windows\\System32\\wsl.exe',
shellArgs: ['~'],
Now relaunch Hyper. It will open your default WSL distro's shell.
sudo apt update && sudo apt upgrade -y
Replace apt with your distro's pkg manger.
Install Node
First install NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
Install LTS version of Node
nvm install --lts
Check version
node -v && npm -v
Install Git
WSL requires git to be installed on both Windows and your distro, and both should be same version.(I am not sure about the version thing)
Most of the distros comes pre-installed with git. To check,
git --version
If not available install,
sudo apt install git
Setup VSCode
You don't have to install VSCode for your distro. Just install latest version of VSCode for windows and you are good to go.
However, you have to install this extension for usage with WSL.
To demonstrate the usage with VSCode, we will test a react app as an example.
cd ~
mkdir demo
npx create-react-app test
cd test
code .
This will open VSCode in our windows environment.
While loading VSCode for the first time from WSL, it will take some time, but it is a one time process.
Now if you open VSCode's integrated terminal, you can see that it is opening the bash shell of our distro and not windows' shell. The same applies to the VSCode's integrated git feature as well.
Now if you move to the extensions tab in VSCode, you can see it requires us to install some extensions separately for WSL. Go ahead and install them and reload VSCode.
Now from VSCode's integrated terminal, run
npm start
This will start our development server at localhost:3000, and it will automatically open the app in browser. Here it will open in windows' default browser with same localhost and same port. How cool is that. Two OS share the same localhost.
Now the procedure is pretty much the same for express or other Node based applications.
Bonus
One nice and neat trick, in your distro's terminal, in any directory, run
explorer.exe .
Don't forget the dot. Dot means open the mentioned program with the current working directory as the path for that program. Without dot, it will simply open the program's default window
This will open the current working directory in windows explorer. Just like with nautilus or with any other linux file manager, when you have used linux with a GUI desktop env.
Top comments (0)