Many times, especially when using open source project code or when you need to install some development environment, a Linux environment is much more convenient than a Windows environment. But sometimes we need a Windows Office environment, such as Office, Outlook and so on, so we can not stay in the Linux environment for a long time. Therefore, we hope to have a converged environment, which can use the Linux environment to develop, and can use various software under the Windows environment. It can be done. Windows 10 is compatible with the Linux kernel. For details, see the Windows WSL documentation.

Here, we install WSL 2 on Windows 10, then VS Code on Windows 10, I’ll show you how to remotely develop and debug a JavaScript program on the Windows WSL using VS Code’s Remote Development plug-in. JavaScript is just an example, we can develop Python, C/C++, PHP, Java in a similar way… And so on.

Install the WSL

To install WSL in Windows 10, refer to the official Microsoft installation documentation. WSL 2 is recommended. Before referring to the official documentation, we need to know some details that are not covered by the official documentation.

The CPU virtualization function is enabled

To install WSL, CPU virtualization needs to be enabled. We first need to confirm that CPU virtualization is enabled.

First go to Windows Task Manager



Then click the Performance TAB in Task Manager and click the CPU bar to view CPU status. CPU virtualization must be enabled.



If CPU virtualization is not turned on or displayed, you need to turn on CPU virtualization Settings on the motherboard of your computer if you are using a physical machine. The BIOS Settings vary depending on the mainboard brand. For details, see the BIOS help manual of the mainboard. Here is an example of a BIOS setup:





​

If Windows VMS are used, enable Allow virtual nesting or a similar option for Windows VMS. The options vary depending on the VM used. For details, see the VM help guide. Here is an example of a virtual machine option:

Testing after WSL installation

With the Linux distribution installed, let’s test the WSL to see if there are no problems. The test method is to access the WSL from a TCP service in Windows. After the Linux distribution of WSL is installed, WSL virtualizes a network on Windows, and this network IP can be obtained from PowerShell commands.

wsl hostname -I
Copy the code

As you can see, the IP of the WSL for the example is 172.19.74.91



In the WSL shell, open a TCP service with netcat and listen on port 9999.

nc -l -p 9999
Copy the code

On Windows, find a tool called “TCP/UDP Debugger” in the App Store and install it.





After the installation is complete, open the application and connect to the TCP service that was opened in the WSL at the IP of the WSL. If the connection is successful and data is sent, the WSL installation is ok.

In VS Code’s plug-in marketplace, search for remote Development plug-ins and install them.



After installing the Remote Development plug-in successfully, click the REMOTE Development icon in the left navigation bar of VS Code and select WSL.



If the Remote Development plug-in and WSL are working properly, Distro Linux already installed on Windows will appear in the VS Code workspace.



Right click On Linux Distro and select ‘Connect to WSL’.



VS Code will start installing VS Code Server in WSL, wait for VS Code setup to succeed, and then open VS Code Terminal.



In a moment, you can see that we are already using the WSL shell.

Install the NodeJS environment

Install NVM in WSL, refer to the NVM documentation for details. In VS Code Terminal, enter the following Shell command:

The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bashCopy the code

When the installation is complete, close VS Code Terminal, and then open VS Code Terminal again to enable the NVM initialization script. Then execute the following command to install Node.js

 nvm install --lts
Copy the code

If the installation is successful, go to

nvm ls
Copy the code

Displays the current nodeJS version and status.



run

node -v
Copy the code

You can check to see if nodeJS is working properly.

Open directory

Start by creating a workspace working directory under the root directory. Execute in VS Code Terminal

 mkdir workspace
Copy the code

Then click the “Open Folder” button to the left of VS Code and select the Workspace directory





In workspace, create the test.js file with the following contents:

const person = {
  tittle: "Mr.".name: {
    first: "Sake".last: "Pan",}};console.log("person: ", person);

while (true) {}

Copy the code

Click “Run and Debug” in the left navigation bar of VS Code and click “Create a launch.json file”.



Select the Node. Js

Run and debug programs

Break points in test.js



Then click “Run and Debug”, then click “Start Debugging”



To start debugging, you can view console.log information in the Debug Console window or observe variables and stack in the left pane of VS Code