{"id":24334,"date":"2023-09-22T05:00:00","date_gmt":"2023-09-22T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=24334"},"modified":"2024-07-22T14:34:05","modified_gmt":"2024-07-22T12:34:05","slug":"windows-subsystem-for-linux-wsl-2-part-2-dev-tools-configuration","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/windows-subsystem-for-linux-wsl-2-part-2-dev-tools-configuration\/","title":{"rendered":"Windows Subsystem for Linux (WSL 2) Part 2: Dev tools configuration"},"content":{"rendered":"\n

In the previous article<\/a>, I have described what WSL is, the main differences between the two versions, and how to install and configure the tool. Now, it is time to demonstrate how this feature can be leveraged from a development point of view. In this article, I will show you how to configure development tools like Visual Studio Code and IntelliJ IDEA to work with WSL.<\/strong><\/p>\n\n\n\n

Before setting up development tools, I need to explain the overall development process scenario with WSL. There are a few rules that should be followed in order to achieve the best file system performance and avoid problems in the future.<\/p>\n\n\n\n

General approach<\/strong><\/h2>\n\n\n\n

First, you need to understand how WSL can be incorporated into daily development work and what its role is. To begin with, source code (also repository configurations), Docker containers, databases, and application servers, among other things, will be stored or run under a WSL Linux distribution.<\/p>\n\n\n\n

On the other hand, on the Windows OS, development tools like IDEs, code editors, and web browsers are installed. The key point here is that these tools will connect with the WSL Linux distribution, enabling \u201cremote\u201d work on the code (edition and debugging).<\/p>\n\n\n\n

In order to maintain the best performance across file systems (since Windows and Linux use completely different ones), it is strongly advised<\/a> to store all the project files within one specific operating system.<\/p>\n\n\n\n

Dev tools configuration<\/strong><\/h2>\n\n\n\n

Having explained the general approach to the development process and file storage, let\u2019s configure tools like Visual Studio Code<\/em> and IntelliJ IDEA<\/em>. As I mentioned earlier, those tools need to be installed on Windows OS first, so for the next steps, I will assume that this has already been done as it is a completely standard procedure.<\/p>\n\n\n\n

Remember to check<\/a> the Add to PATH<\/em> option while installing Visual Studio Code<\/em> to easily open a folder in WSL using the code <\/em>command.<\/p>\n\n\n\n

Visual Studio Code configuration<\/strong><\/h2>\n\n\n\n

Integration of Visual Studio Code with WSL is straightforward. After the installation process, the Remote Development<\/em><\/a> plugin needs to be installed.<\/p>\n\n\n\n

For some Linux distributions, it may also be necessary to install wget<\/em> and ca-certificates<\/em>. This is not the case in Ubuntu, but if you chose a different distribution, in your WSL Linux OS, execute the following commands (assuming it is a Debian, or Debian-based distribution; if not, use the appropriate package manager):<\/p>\n\n\n\n

sudo apt update && sudo apt install -y wget ca-certificates<\/pre>\n\n\n\n
Opening a project<\/strong><\/h2>\n\n\n\n
To open a project stored in a WSL Linux distribution, you can use Windows Terminal<\/em> to navigate to the project location and open the whole directory in Visual Studio Code<\/em> by executing the following command:<\/p>\n\n\n\n
code .<\/pre>\n\n\n\n
Alternatively, you can open Visual Studio Code<\/em> on your Windows OS first and use the command palette (ctrl+shift+p) to type wsl<\/em> to open a directory in WSL. Once the directory is opened, you can work with it as you would with any usual files on Windows. Please note that in the lower-left corner, you will have an indicator showing that you are connected to WSL:<\/p>\n\n\n\n
\"An<\/a>
Fig. 1 An indicator in the lower-left corner<\/figcaption><\/figure>\n\n\n\n
Troubleshooting \u2013 VS Code seems to be blurry<\/strong><\/h2>\n\n\n\n
I believe it is not a WSL issue itself, but for sure it is worth mentioning. Some users may encounter a strange problem with VS Code, where it appears as a blurry image. If this is
the case, check which graphics processor is being used for this program. If it is Nvidia, you may need to disable FXAA for this application. Check this thread<\/a> on Stack Overflow for more information.<\/p>\n\n\n\n
Extensions<\/strong><\/h2>\n\n\n\n
Some extensions need to be installed only on the Windows OS, while others require installation both on Windows and in the WSL Linux distribution. You can easily identify the latter in Extensions explorer panel  as they are marked with the comment Install in WSL<\/em>, like the ones below:<\/p>\n\n\n\n
\"\u201cInstall<\/a>
Fig. 2 \u201cInstall in WSL\u201d<\/figcaption><\/figure>\n\n\n\n
Simply click the blue Install in WSL<\/em> button for those extensions, and from that point on, the extension should also work for source code in WSL.<\/p>\n\n\n\n
Documentation<\/strong><\/h2>\n\n\n\n
In general, Visual Studio Code<\/em> is now configured, at least in a basic sense, and can be used with WSL. Traditionally, I would recommend to at least take a brief look at official documentation available here<\/a>.<\/p>\n\n\n\n
IntelliJ IDEA configuration<\/strong><\/h2>\n\n\n\n
Unlike Visual Studio Code<\/em>, no extensions are needed to work with WSL. Once IntelliJ is installed, you can create a new project in the WSL Linux distribution, and it is also possible to open an existing project from WSL.<\/p>\n\n\n\n
For the steps described below, I assume that Java SDK and Maven are already installed in the WSL Linux distribution. If not, I would recommend using a tool called SDKMAN! \u2013 you can visit the project page<\/a> for installation and usage instructions.<\/p>\n\n\n\n
Creating a new project in WSL<\/strong><\/h2>\n\n\n\n
To create a new project in the WSL, open IntelliJ and click on New Project<\/em>. Let\u2019s create an empty Maven Java 17 project. To do so, you can check the following parameters:<\/p>\n\n\n\n
\"Parameters<\/a>
Fig. 3 Parameters for a new project<\/figcaption><\/figure>\n\n\n\n
Take a look at Location<\/em> and JDK<\/em>. Location<\/em> starts with:<\/p>\n\n\n\n
\\\\wsl$\\Ubuntu-22.04\\<\/pre>\n\n\n\n
This path points to the WSL Linux file system.<\/p>\n\n\n\n
\\home\\mwrobel\\test-project-2<\/pre>\n\n\n\n
This is a standard Linux path, where:<\/p>\n\n\n\n