{"id":4877,"date":"2019-07-22T16:29:47","date_gmt":"2019-07-22T23:29:47","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/commandline\/?p=4877"},"modified":"2019-08-14T15:41:46","modified_gmt":"2019-08-14T22:41:46","slug":"an-in-depth-tutorial-on-linux-development-on-windows-with-wsl-and-visual-studio-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/commandline\/an-in-depth-tutorial-on-linux-development-on-windows-with-wsl-and-visual-studio-code\/","title":{"rendered":"An In Depth Tutorial on Linux Development on Windows with WSL and Visual Studio Code"},"content":{"rendered":"

In an earlier blog post, Take your Linux development experience in Windows to the next level with the Windows Subsystem for Linux (WSL) and Visual Studio Code Remote<\/a>, we introduced an overview of the VS Code Remote – WSL extension<\/a>, which simplifies Linux development on Windows Subsystem on Linux (WSL). Put on your SCUBA gear, because in this follow up we’ll give you a deep dive tutorial on how to setup WSL and VS Code for Python development by creating a Python “Hello World” application.<\/p>\n

Windows: A great platform for building Linux Apps<\/h2>\n

Windows is the most popular operating system in the world, with almost 50% of developers<\/a> using it every day. At the same time, many of these developers are building applications that are deployed to Linux-based<\/a> servers running in the cloud or on-premises.<\/p>\n

With WSL and VS Code, you can now seamlessly develop Linux-based applications on Windows. WSL lets you run a full Linux distro on Windows, where you can install platform-specific toolchains, utilities, and runtimes.<\/p>\n

VS Code and the WSL extension let you develop in the context of the Linux environment, using those tools and runtimes, from the comfort of Windows. All of your VS Code settings are maintained across Windows and Linux, making it easy to switch back and forth. Commands and workspace extensions are run directly in Linux, so you don’t have to worry about pathing issues, binary compatibility, or other cross-OS challenges. You’re able to use VS Code in WSL just as you would from Windows. One tool, two operating systems.<\/p>\n

If it sounds magical, that’s because it is! But, don’t take our word for it. Let’s get our hands dirty and build a simple Python3 application so you can experience the magic for yourself.<\/p>\n

Install and set up WSL<\/h2>\n

You install WSL from the Microsoft Store. You can search for “Linux” in the Microsoft store to see a sub section of distributions in the store. Choose the Linux distribution you want to install and follow the prompts. You can also search for distributions in the search bar.<\/p>\n

\"Selecting<\/p>\n

Select Install<\/strong>.<\/p>\n

\"Installing<\/p>\n

And when done, select Launch<\/strong> to get started. This will open a Linux terminal and complete the installation. You’ll need to create a user ID and password since we’re setting up a full Linux instance, but once that’s done, boom! You are running Linux on Windows.<\/p>\n

\"The<\/p>\n

Python development<\/h2>\n

If you don’t have Python already installed, run the following commands to install Python3 and pip, the package manager for Python, into your Linux installation.<\/p>\n

sudo apt update\nsudo apt install python3 python3-pip<\/code><\/pre>\n
And to verify, run:<\/p>\n
python3 \u2013version<\/code><\/pre>\n
This isn’t intended to be a Python tutorial, so we’ll do the canonical “Hello World” app. Create a new folder called “helloWorld” and then add a Python file that will print a message when run:<\/p>\n
mkdir helloWorld && cd helloWorld\necho 'print(\"hello from python running in Linux on windows!\")' >> hello.py\npython3 hello.py<\/code><\/pre>\n
Clearly, echo isn’t a great way to do development. In a remote Linux environment (this WSL distro is technically another machine without UI, that just happens to be running locally on your computer), your development tools and experiences are pretty limited. You can run Vim<\/a> in the terminal to edit your file or you can edit the sources on the Windows side through the \\\\wsl$<\/code> mount:<\/p>\n
\"The<\/p>\n
The problem with this model is that the Python runtime, pip, or any conda packages for that matter, are not installed on Windows.<\/p>\n
\"An<\/p>\n
Remember, Python is installed in the Linux distro, which means if we’re editing Python files on the Windows side, we can’t run or debug them unless we install the same Python development stack on Windows. And that defeats the purpose of having an isolated Linux instance set up with all our Python tools and runtimes!<\/p>\n
What can we do? That’s where Visual Studio Code and the Remote \u2013 WSL extension comes to the rescue.<\/p>\n
Visual Studio Code<\/h2>\n
VS Code is a lightweight, cross platform source code editor, built on open source. It comes with built-in support for modern web development with JavaScript, TypeScript, Node.js, CSS, etc. It also has a rich ecosystem of extensions (10K+) providing support for 100s of languages and frameworks, such as Python, Go, PHP, Java, C++, and C#.<\/p>\n
If you don’t already have VS Code, download it now<\/a>. It’s about 50 MB to download on Windows and sets up in less than a minute.<\/p>\n
Now we just need the magic, and that is the Remote \u2013 WSL extension<\/a>. Open the Extensions view in VS Code (Ctrl+Shift+X) and search for “wsl”. Choose the Remote \u2013 WSL<\/strong> extension as seen below (it should be at the top of the list) and press Install<\/strong>.<\/p>\n
\"The<\/p>\n
Once installed, head back over the WSL terminal, make sure you are in the helloWorld folder, and type in “code .” to launch VS Code (the “.” tells VS Code to open the current folder).<\/p>\n
\"Launching<\/p>\n
The first thing you’ll see is a message about “Installing VS Code Server” (the c7d83e57\u2026 number is the version of the VS Code Server that matches the client-side tools you just installed). VS Code is installing a small server on the Linux side that the desktop VS Code will then talk to.<\/p>\n
\"The<\/p>\n
That server will then install and host extensions in WSL, so that they run in the context of the tools and frameworks installed in WSL. In other words, your Python extension will run against the Python installed in WSL, not against what is installed on the Windows side, as it should for the proper development experience.<\/p>\n
The next thing that happens is VS Code will start and open the helloWorld folder. You may see a quick notification telling you that VS Code is connecting to WSL, and you may be prompted to allow access to the Node.js-based server.<\/p>\n
\"Installing<\/p>\n
Now, when we hover over hello.py, we get the proper Linux path.<\/p>\n
\"The<\/p>\n
Integrated Terminal<\/h2>\n
If that doesn’t convince you we’re connected to the Linux subsystem, run Terminal<\/strong> > New Terminal<\/strong> (Ctrl+`) to open a new terminal instance.<\/p>\n
\"The<\/p>\n
You’ll start a new instance of the bash shell in WSL, again from VS Code running on Windows.<\/p>\n
Tip<\/strong>: In the lower left corner of the Status Bar, you can see that we’re connected to our WSL: Ubuntu<\/strong> instance.<\/p>\n
\"VSCode's<\/p>\n
Click on it to bring up a set of Remote – WSL extension commands.<\/p>\n
\"The<\/p>\n
Installing the Python extension (and additional tools)<\/h2>\n
Click on hello.py to open it for editing. We are prompted with what we call an “Important” extension recommendation, in this case to install the Python extension, which will give us rich editing and debugging experiences. Go ahead and select Install<\/strong> and reload if prompted.<\/p>\n
\"The<\/p>\n
To prove that the extension is installed in WSL, open the Extensions view again (Ctrl+Shift+X). You will see a section titled WSL \u2013 Installed<\/strong> and you can see any extensions that are installed on the WSL side.<\/p>\n
\"The<\/p>\n
Upon reload, you’ll also get prompted telling you that the pylint linter is not installed. Linters are used to give us errors and warnings in our source code. Go ahead and select Install<\/strong>.<\/p>\n
\"VSCode<\/p>\n
Now, when you edit your code, you get rich colorization and completions.<\/p>\n
\"The<\/p>\n
And when you save your file (Ctrl+S), you’ll get linting errors and warnings on the file.<\/p>\n
\"VSCode<\/p>\n
Debugging<\/h2>\n
With our tools set up, let’s take this one step further. Set a breakpoint on line 1 of hello.py by clicking in the gutter to the left of the line number or by putting the cursor on the line and pressing F9.<\/p>\n
\"Setting<\/p>\n
Now, press F5 to run your application. You will be asked how to run the application, and since this is a simple file, just choose Python File<\/strong>.<\/p>\n
\"Selecting<\/p>\n
The app will start, and you’ll hit the breakpoint. You can inspect variables, create watches, and navigate the call stack.<\/p>\n
Press F10 to step and you’ll see the output of the print statement in the debug console.<\/p>\n
\"The<\/p>\n
You get the full development experience of Visual Studio Code, using the Linux instance installed in WSL.<\/p>\n
If you want to open another folder in WSL, open the File<\/strong> menu and choose Open Folder<\/strong>. You’ll get a minimal file and folder navigator for the Linux file system, not the Windows file system.<\/p>\n
\"Opening<\/p>\n
If you want to switch back to the Windows, select the Show Local<\/strong> option and you’ll get the standard Windows File Open dialog.<\/p>\n
In conclusion<\/h2>\n
\"Shia Source<\/a><\/em><\/p>\n
More information<\/h2>\n
With WSL, VS Code and the Remote \u2013 WSL extension, your Windows machine becomes an awesome box for developing Linux applications. Your tools run on Windows while your application runs where it will be deployed, on Linux.<\/p>\n
Linux development is not limited to WSL. Using the Remote \u2013 SSH extension<\/a>, you can develop against remote SSH hosts with the same fidelity as shown here, all from your Windows desktop.<\/p>\n
For more information, check out the following resources:<\/p>\n