WSL on Windows 10

Windows Subsystem for Linux (WSL) has been getting better over time. 2019’s May (formally April) update, version 1903, brings some new goodies to the table. The official dev blog post from Microsoft is a good writeup of all the details, but I’ll just say that I was most interested in the I/O speed boosts and the fact that they fixed all the problems with interacting with the Linux files from Windows applications or explorer.exe. Those were the main things holding me back from the normal web development workflow that I’m used to on my Linux machine. So it was time for me to give it another shot. Why didn’t I just dual-boot Ubuntu on my laptop as most people do? I’ll go into that in another blog post. This one will be about setting up for WSL as of Spring 2019.

First, follow Microsoft’s guide to enabling WSL if it isn’t already set up. Then use the Microsoft store app in Windows to install the official Ubuntu (or any other distro). Note, there is the general Ubuntu app that will install the latest LTS version, and then there are separate “Release”-specific apps.

If you had already done all that ages ago and let WSL sit around collecting dust, then jump into Bash for Windows (or Ubuntu Terminal) and run do-release-upgrade to bring your installation up to 18.04 as of this post. This isn’t a precursor to anything, but it’s generally good to be on the latest LTS unless you have a reason not to be.

Now the fun stuff! The Ubuntu Terminal app is pretty terrible, so I highly recommend downloading Hyper by Zeit. It’s an Electron app, so it’ll be heavy on the disk usage and hopefully your laptop is loaded. And make sure you download the Windows version, obviously.

Getting the config right for WSL used to be a little confusing, but there is now a wsl.exe that will drop you into bash from PowerShell. Launch Hyper and hit Ctrl-, to open up your .hyper.js config file. Here’s my minimal config file for reference:

module.exports = {
  config: {
    updateChannel: "stable",
    cursorShape: "BEAM",
    cursorBlink: true,
    padding: "3px 4px",
    shell: "C:\\Windows\\System32\\wsl.exe",
    shellArgs: ["~"],
    env: {},
    bell: "SOUND",
    copyOnSelect: false,
    defaultSSHApp: true,
    quickEdit: false,
    webGLRenderer: true,
    verminal: {
      fontSize: 14
    }
  },
  plugins: ["verminal"],
  localPlugins: [],
  keymaps: {}
};

shell and shellArgs will make Hyper always start up with wsl and put you into ~/ by default. There’s some additional customization in there. verminal is my new favorite color theme. Smaller padding means I can fit more text on the screen at a readable font size. You can look up the rest!

Lastly, there’s always been a weird thing with text background coloring in bash when listing directories. With verminal, it’s a super unreadable blue text on lime-green background. Paste the following at the end of your ~/.bashrc in WSL:

LS_COLORS='ow=01;36;40'
export LS_COLORS

This will give you a nice cyan color for your directories.

That’s all I’ve got for now. VSCode, Hyper + WSL, and Brave browser together make a pretty decent web development environment on Windows 10. Have fun!