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.
Oldest comments (13)
Thanks for the concise guide. I have been using WSL the standard way but wanted to try out the new Windows Terminal and the VSCode remote extension. I believe the main benefits for remoting are faster file operations and being able to edit Linux OS files with VSCode (like .bashrc, etc.), or are there any other key ones that I'm missing?
The above is correct, plus you will be working almost exclusively in a Linux environment. Plus you can navigate both file systems within VSCode and open Windows apps from within the WSL.
I thought I might be able to use WSL to get me to do basic things, but it's so limited that all I end up doing is shelling into a real computer instead.
I can do a lot from WSL.. but Linux is my daily. This was more of an experiment to help guys in my class.
Thank you for the guide. Do you have any suggestion regarding Git GUI tools inside WSL? I'm using Git Graph extension in VS Code but would like to see if there's any better alternative. I think using SourceTree or GitHub Desktop on Windows to access files inside WSL is kinda risky.
To be honest, I use the cli for 99% of my github use. I do sometimes cheat and use VSCode's integrations a little. But nothing beyond that.
In all reality I work in Linux most of the time. This Windows setup was more of an experiment.
I've been using Fork on Windows to manage a repo in WSL. For once I had an issue with file permission, and got it fixed by remounting my drive with the metadata flag. Except that, it works pretty well.
Great article.
I love this feature, I use it in python development all the time. thanks for telling all everyone!
You have to have a windows build greater 18917 in order to have wsl 2, and you have to be part of the insider fast ring to even see these previews. Got mine upgraded 2 weeks ago or so, fortunately didn't get the search bar error everyone's going crazy about.
Yes sir, i state you need to be in the fast ring early on.
Must have missed that 😅
Thanks sir. It's every useful for me 👍