Setting up a Linux Javascript Dev Environment on Windows

This article has been made obsolete by some updates to WSL and Windows. The newer version is at https://dev.to/vetswhocode/windows-js-dev-in-wsl-redux-33d5

By default I am usually a Linux user. But recently I have started a cohort with Vets Who Code and we have some Windows users in there. Windows does a lot of things well; setting up development environments isn't always one of them. So I thought I would install Windows and see how close I can get to making it Linuxy and a little easier to manage for the average JavaScript dev. These are the steps I took; a lot of it came from this post from Burke Holland. And then some comes from me.

Getting Linux going on Windows.

You will need to be a Windows insider on the Fast ring for now to make all this happen. Just a note, the insider channels are beta software so do this at your own risk. You can read more about the Insider Program here.

After you are on your Insider build and all updated we have to get the Linux Subsystem for Windows (WSL). To turn on the Subsystem, press your Win key and start typing "features". You should see an option for "Turn Windows Features on or Off". Select that and make sure "Windows Subsystem for Linux" and "Windows Virtual Machine Platform" are selected as shown.

You're going to have to reboot after this.

Next you can install your Linux distro if you haven't already. I recommend just going with "Ubuntu-18.04".

You can see a list of distros you have installed already by typing the following command.

wsl -l
You should see something like this ..

PS C:\Users\timap> wsl -l
Windows Subsystem for Linux Distributions:
Ubuntu-18.04 (Default)
kali-linux
openSUSE-Leap-15-1

Next we need to convert our existing installs to WLS 2. There are big performance differences between 1 and 2 so we want to be on 2, this we do with the following. I will use my Kali install as the example.

wsl --set-version kali-linux 2

Do this for each distro installed.

To avoid doing this every time we can set WSL 2 as our default using the command. This will make sure every distro install hereafter uses WSL 2 by default.

wsl --set-default-version 2

Finally if you want to verify your all set up you can run the following.

wsl -l -v

This will get you somthing similiar to this showing distros and the wsl version.

PS C:\Users\timap> wsl -l -v
  NAME                  STATE           VERSION
* Ubuntu-18.04          Stopped         2
  kali-linux            Running         2
  openSUSE-Leap-15-1    Stopped         2

Ok, Lets get a decent terminal!

This part is actually easy. Windows has made a pretty nice new Terminal, it's in beta, but as an insider it's in the store and you can install it. Just search "Windows Terminal" in the store.

We need to edit a few things to set our environment up. First we want our default profile when opening the terminal to be Linux. Open Terminal's settings by pressing the down arrow and selecting settings. This will open your config file.

To set the main profile to Linux we need to find our chosen profiles GUID and copy it into the default profile entry. Profiles will be found below the keyboard shortcuts and the default is all the way at the top.

(Close your terminal now if it isn't and open again. Make sure the Linux instance is running.)

Now we are going to install "Zsh". We can operate just fine in bash if you really want, but zsh has a plugin system and theming which we make pretty good use of through the rest of the tutorial. With the following command in the Linux terminal we will get zsh installed.

sudo apt install zsh

After that we add oh-my-zsh which allows for some nice preset tweaks to the shell and makes some configuration easier. Install oh-my-zsh with the command below.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

And now we need to edit our zsh config. I will use nano for this from the command line. Open the config from the terminal with the command...

nano ~/.zshrc

First I change my theme to "cloud". You can explore more themes in the future with oh-my-zsh.

Now we will add the following two lines to the very bottom of the .zshrc

• One is and alias that says, when I type "whome" it will goto my Windows home directory. You just have to change the "timap" part to whatever your user is.
• Second is "cd" which makes it open it my Linux home directory by default every time the terminal session is open.

Press ctrl-o to save your changes in nano.
Press ctrl+x to exit nano.

Then for this and any other change you make in the future to .zshrc you can reload your config in the terminal with the command..
source ~/.zshrc

Next we are going to set up auto suggestions. This allows zsh to recommend commands and such by using your past history. It's very handy. Just type the following command within the terminal. Remember, every time we open the terminal it should be Linux by default now.

git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

Then we add the plugin to our zshrc file, nano ~/.zshrc and add the plugin name zsh-autosuggestions.

Press ctrl-o to save your changes in nano.
Press ctrl+x to exit nano.

That's it for the terminal now, it's pretty efficient now and all Linuxy.

Install Node.js

So if you are familiar with Linux, you would traditionally sudo apt install node to get node. But this is an LTS version of Ubuntu so the version most likely is a tad behind. We are going to use NVM to keep things current.

First we clone the zsh-nvm plugin repo into our zsh plugins folder. Remember, we're doing this from the terminal on the Linux side.

git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

Next we go into our zsh config one more time to add the plugin..
nano ~/.zshrc

Now remember to ..
source ~/.zshrc
to reload your config.

We can install node with the following command in the terminal.
nvm install --lts

In the future we can upgrade it with..
nvm upgrade

Finally, VSCode

I am assuming you have VSCode installed and have used it a little. First lets install the plugin "Remote WSL"

Now we can open a Remote WSL session. Mind you, it's not remote in the out on the web sense. It's the fact that WSL is a VM in all reality and you're remoting into it, even though it's on your machine. There is a lot to learn about WSL itself, to much for this post.

Next we can press ctrl-shift-p from within VSCode and select "Remote-WSL: New Window" and it will open up vscode within the subsystem. If you open the terminal within the session you will get your shiny new zsh prompt and all its goodness.

If in you're in the working directory of one of your projects in Terminal you can type code . and it will open up VScode in that location.

Here is a picture of my setup now...

After this...

There is a ton of additional tweaking you can do at this point if you want,and many rabbit holes to follow. But those are all topics for future posts. I hope this helps, feel free to hit me up on Twitter with questions.