Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I use Bash on Ubuntu on Windows (WSL) for my VS Code terminal?

While other questions deal with how to use things like git-bash, giving the new WSL a spin as the terminal for VS Code is not the same: it gives you access to bash running on an actual Ubuntu Linux subsystem, instead of the git-bash terminal running on the Windows subsystem.

So how do we get it working as the VS Code terminal, and particularly how do we get it working as a functional dev environment terminal?

Unlike git-bash, this is unfortunately not as simple, because the Ubuntu Linux configuration in WSL can provide some gotchas, such as NPM trying (and failing) to run from your Windows Program Files directory due to the interaction between WSL and Windows itself in terms of pathing, and some packages such as Compass failing for what are not necessarily immediately obvious reasons to someone who is not used to developing on Linux. What's a simple way to have a reliable WSL terminal environment for VS Code where most frequently used tools will run when installed via apt-get or npm?

like image 316
taswyn Avatar asked Jun 09 '17 05:06

taswyn


People also ask

How do I run Bash in WSL?

1] Execute Shell Script file using WSLScroll to find WSL, check the box, and then install it. Once done, one has to reboot to finish installing the requested changes. Press Restart now. BASH will be available in the Command Prompt and PowerShell.

How do I open VS Code in Ubuntu WSL?

Alternatively, you can open a Remote WSL window directly from VS Code: Start VS Code. Press F1, select Remote-WSL: New Window for the default distro or Remote-WSL: New Window using Distro for a specific distro. Use the File menu to open your folder.


2 Answers

This answer seeks to help others avoid spending 1-2 hours troubleshooting and slowly finding disparate solutions for common problems when using WSL for the terminal in VS Code. It does not cover installing specific packages, but rather common ones that may not properly install as dependencies when installing things that do rely on their presence, and on fixing related common settings.

Summary of steps

  • WSL installed
  • VS Code (or other IDE) configured for terminal
  • NPM installed & path fix in .profile (may help with other tools)
  • build-essential installed (helps with any tools that use make/gcc/etc)
  • VS Code Tasks using WSL
  • Extras

Getting Started & Requirements

  • You must have WSL installed. (Which means you must be running 64 bit Windows 10, with the appropriate updates) Follow the install guide if not already installed. This will require some reboots.

VS Code Terminal Configuration

Either the CTRL+, keyboard shortcut, or FilePreferencesSettings

In the top right of the editing window, make sure you are working in the correct context for you: either User Settings or Workspace Settings.

enter image description here

In the settings search bar, type terminal.integrated.shell.windows (or whatever gets you far enough long)

Find the setting in the actual settings file, use Edit (mouse over the line, it will be on the left: on a touch screen without a mouse, you should be able to simply tap to the left of the line), and select Replace in Settings

enter image description here

In the right pane, modify the entry created in the modified json file: replace the previous setting with

"C:\\WINDOWS\\Sysnative\\bash.exe" 

enter image description here

Other IDEs: IntelliJ

Open Settings/Tools/Terminal and set the "Shell path" field to "C:\Users\USERNAME\AppData\Local\Microsoft\WindowsApps\ubuntu.exe"

Making your WSL Ubuntu Bash Terminal functional for dev

When you use CTRL+` to open the terminal, you should now have a bash terminal.

If this is the first time you have run bash.exe, you may be asked about installing Ubuntu. Do so. Once your installation is complete, choose your username and password to be used in WSL Ubuntu. These do not have to coincide with your current Windows account, and it's important to note that they will not change based on changes to your Windows account's password.

Once you are done, you will have a bash command prompt in your terminal.enter image description here

Note that unlike git-bash on Windows, this is a separate environment. While it can be used to launch Windows software outside of itself, you will need appropriate Ubuntu packages to run them within the actual terminal.

Currently, WSL does not come loaded with everything you might expect or be used to having, and some things can conflict with software you have loaded in Windows, based on default profile settings.

Updates & git

Note: I'm going to document these as sudo for people who simply need single pieces of this, but one option at the start is to instead sudo su and simply running the following commands without sudo.

Make sure your Ubuntu packages are up to date:

sudo apt-get -y update sudo apt-get -y upgrade sudo apt-get -y dist-upgrade sudo apt autoremove 

Install git:

sudo apt-get install git 

Node.js & NPM

If you already have Node or NPM loaded in Windows, running them in Ubuntu can get problematic due to path issues. So, you need to install the Ubuntu native versions and ensure that they are used instead.

First, install node.js with NPM. (alternate: install NVM and use it to install node.js)

After installing, running npm commands will probably fail: for example, npm -v will probably give you:

: not foundram Files/nodejs/npm: 3: /mnt/c/Program Files/nodejs/npm: : not foundram Files/nodejs/npm: 5: /mnt/c/Program Files/nodejs/npm: /mnt/c/Program Files/nodejs/npm: 6: /mnt/c/Program Files/nodejs/npm: Syntax error: word unexpected (expecting "in") 

This is due to a pathing issue with a fairly straightforward solution. Using your favorite CLI editor (such as nano, vim, emacs, cat and sed… etc), open your ~/.profile

nano ~/.profile 

Note: do NOT attempt to edit Linux files using Windows tools. (Thanks to @david-c-rankin's comment for the official link with the bold red text explaining this) If you don't want to use a CLI editor for this in the terminal, see the bottom of this post for a link on how to get a GUI one running.

Currently, the default bash PATH variable in WSL is

PATH="$HOME/bin:$HOME/.local/bin:$PATH" 

Which is injecting the windows path after the first two binary directories. Unfortunately, this doesn't result in /usr/bin being used before the windows installed npm, so add that before the final $PATH:

PATH="$HOME/bin:$HOME/.local/bin:/usr/bin:$PATH" 

Save out, and then either reload the terminal or just source the path file

source ~/.profile 

Build-essential

If you are using anything which requires compiling or otherwise uses make, it's almost guaranteed that you will need these installed; so if you did not install them while installing node.js, do so. It's much easier to simply use the build-essential package rather than try to install everything separately.

Note that packages such as Compass which rely on Ruby FFI will fail without these. If you are having trouble properly installing and running a tool, making sure you have gcc and make installed can be a good place to start.

sudo apt-get install -y build-essential 

Running Tasks using Ubuntu

Note that if you use VS Code's tasks.json to run build tasks, by default it will still run them using the Windows subsystem instead of the Ubuntu one. Sometimes this may be what you want, but if you've just finished installing grunt-cli in Ubuntu and not Windows, it's probably not.

VS Code recently had the 2017 May update to how Tasks work that allows it to set the task runner as the terminal. This is by far the easiest way to migrate tasks over.

Simply set

"runner": "terminal", 

in your tasks.json and you're done (assuming you have all of the appropriate tools you are trying to run now installed in WSL Ubuntu).enter image description here

This is very portable, ideally requiring no changes between systems which do or do not have WSL, or to other OSes, and is the method I would recommend.

As of the moment, this method spawns another TERMINAL tab instance (accessed from the drop down). You can still set up appropriate watchers, but it does mean that it's no longer sitting on the OUTPUT tab.

The old method is capable of invoking the WSL Ubunutu Bash shell and having it show up in OUTPUT, and involves either calling bash.exe with the -c argument or using a shell script. It unfortunately is not as semantic, since we are making bash our command and passing it what we want to run as an argument instead. This also means it is not as quickly portable to other systems.

You can use the same location you gave VS Code earlier for the terminal itself, C:\\WINDOWS\\Sysnative\\bash.exe as the value for commandenter image description here

Set the first element of the args array as -c and the second as the command you want to run (credit to the second half of this answer).

Alternatively, you can instead run a shell script as seen here.

Further helpful bits

Want to start VSCode in Windows from the WSL Bash command line?

Want to have a graphical interface for your WSL Ubuntu? (this will allow you to do things like use a Linux GUI editor for files within the Ubuntu system itself: do not edit them using Windows editing tools, see comments/note in section on npm)

Want to build (see the above portion on setting up VS Code Tasks properly for WSL) and debug entirely within WSL Ubuntu? (this shows how to do so using gdb, but the pipeTransport concept could be used with other debuggers) (credit to this answer, but the one before it also provides a method using local loopback that could prove useful)

like image 101
taswyn Avatar answered Sep 17 '22 15:09

taswyn


if you want to use zsh, find path of ubuntu1804.exe or ubuntu1604.exe.

in my case

"terminal.external.windowsExec": "C:\\Users\\asdf\\AppData\\Local\\Microsoft\\WindowsApps\\CanonicalGroupLimited.Ubuntu18.04onWindows_79rhkp1fndgsc\\ubuntu1804.exe", "terminal.integrated.shell.windows": "C:\\Users\\asdf\\AppData\\Local\\Microsoft\\WindowsApps\\CanonicalGroupLimited.Ubuntu18.04onWindows_79rhkp1fndgsc\\ubuntu1804.exe", 
like image 37
Hyeon ki Hong Avatar answered Sep 20 '22 15:09

Hyeon ki Hong