{"id":22863,"date":"2023-10-28T08:48:10","date_gmt":"2023-10-28T08:48:10","guid":{"rendered":"https:\/\/linuxways.net\/?p=22863"},"modified":"2023-10-28T08:48:52","modified_gmt":"2023-10-28T08:48:52","slug":"working-with-visual-studio-code-on-ubuntu-on-wsl2","status":"publish","type":"post","link":"https:\/\/linuxways.net\/de\/ubuntu\/working-with-visual-studio-code-on-ubuntu-on-wsl2\/","title":{"rendered":"Working with Visual Studio Code on Ubuntu on WSL2"},"content":{"rendered":"

The Windows Subsystem for Linux or WSL makes cross-OS use more comfortable. It is also useful for Developers using Visual Studio Code. With WSL, developers can use Visual Studio Code both as a Server and a Client Interface. The Visual Studio Code running remotely on WSL acts as a server whereas the Visual Studio Code running on Windows acts as the Client.<\/p>\n

This article discusses the working of Visual Studio Code on Ubuntu using WSL.<\/p>\n

Working With Visual Studio Code on Ubuntu on WSL2<\/strong><\/h2>\n

Working with Visual Studio Code on Ubuntu using WSL plays a vital role for developers as they can edit their Project Files in the WSL instead of editing the files in their actual Visual Studio Code Project. Also, with the Visual Studio Code on WSL, developers do not need to worry about cross-OS problems. The following steps will guide you about working with Visual Studio Code on Ubuntu using WSL.<\/p>\n

Step 1: Install Visual Studio Code on Windows<\/strong><\/h3>\n

To work with Visual Studio Code on Ubuntu with WSL2, you need to install Visual Studio Code first on your Windows Operating System. To install Visual Studio Code, open the Microsoft Store and then click on the Search Box. In the Search Box, type \u201cVisual Studio Code\u201d. The Visual Studio Code Application will appear. Click on the Application:<\/p>\n

<\/p>\n

In the Application Menu, Click on the \u201cInstall\u201d button to download the Visual Studio Code from the Microsoft Store:<\/p>\n

<\/p>\n

Step 2: Add the Remote Development Extension in VS Code<\/strong><\/h3>\n

Once the Visual Studio Code is downloaded, you can use it by searching for it through the Windows Search Option. Click on Search from the Task Bar and type \u201cVisual Studio Code\u201d. Click on the Visual Studio Code Application to start it:<\/p>\n

<\/p>\n

Once you click on the desired app, the Visual Studio Code default dashboard will appear:<\/p>\n

<\/p>\n

In the left navigation bar of Visual Studio Code, click on the Extensions Option to Add the Remote Development Extension:<\/p>\n

<\/p>\n

Once you click on the Extensions Option, all the installed and recommended extensions will appear. Click on the Extension Search Bar at the top to search for extensions: <\/p>\n

In the Extension Search Box, search for \u201cRemote Development<\/strong>\u201d. The Remote Development extension is used to connect the Visual Studio Code on Windows with Ubuntu. The Extensions will be filtered and click on the Remote Development Extension by Microsoft:<\/p>\n

<\/p>\n

In the Remote Development Extension Menu, click on the \u201cInstall\u201d button which will start adding the extension to your Visual Studio Code Workspace:<\/p>\n

<\/p>\n

Step 3: Create a Project in WSL2<\/strong><\/h3>\n

Now for the Visual Studio Code to work through WSL, open Visual Studio Code and click on the \u201cRemote Window<\/strong>\u201d Option located at the bottom-left of the Visual Studio Code Screen:<\/p>\n

<\/p>\n

Clicking on the Remote Window option will open the Visual Studio Project Dashboard Search Bar:<\/p>\n

<\/p>\n

As you want to use Visual Studio Code Remotely through WSL, click on the \u201cConnect to WSL using Distro\u2026<\/strong>\u201d:<\/p>\n

<\/p>\n

The available distros will be listed. Considering our case, we have the Ubuntu 20.04 Installed:<\/p>\n

<\/p>\n

Clicking on the available distro will start opening Visual Studio Code in WSL:<\/p>\n

<\/p>\n

Once opened, you will see the Visual Studio Code will be running remotely through WSL:<\/p>\n

<\/p>\n

Now you can run Ubuntu Commands in the Visual Studio Code Terminal:<\/p>\n

<\/p>\n

To create a new NodeJS project, NodeJS must be installed first on Visual Studio Code running on WSL. Before installing NodeJS, ensure that the existing packages are up to date. Update the packages with the \u201csudo apt\u201d command:<\/p>\n

sudo<\/span> apt update &&<\/span> sudo<\/span> apt upgrade<\/div><\/div>\n

The Visual Studio Code Terminal in WSL will start looking for any packages that require an upgrade:<\/p>\n

<\/p>\n

Once the existing packages are updated, you can now install the Node Package Manager (npm). To install \u201cnpm\u201d, the \u201csudo apt\u201d command will be executed as follows:<\/p>\n

sudo<\/span> apt install<\/span> npm<\/div><\/div>\n

The Visual Studio Code Terminal in WSL will start installing the necessary \u201cnpm\u201d packages. In our case, \u201cnpm\u201d is already the newest version:<\/p>\n

<\/p>\n

NodeJS is a Back-end JavaScript environment and the NodeJS installed on your Windows Visual Studio Code will not be the same as the NodeJS running on Ubuntu. Thus, you need to install NodeJS on your Visual Studio Code running on WSL. Once \u201cnpm\u201d installs, you can now install NodeJS with the \u201capt-get\u201d command:<\/p>\n

sudo<\/span> apt-get install<\/span> nodejs<\/div><\/div>\n

In our case, NodeJS is already installed:<\/p>\n

<\/p>\n

After installing both the NPM and NodeJS, you can now make your own NodeJS project. To make a new NodeJS project, create a new directory. The \u201cmkdir\u201d command in Ubuntu is useful for new Directory creation. In our case, we created the \u201cWSLproj\u201d directory using the \u201cmkdir\u201d command:<\/p>\n

mkdir<\/span> WSLproj<\/div><\/div>\n

By using the \u201cls\u201d command you can verify the directory\u2019s creation:<\/p>\n

<\/p>\n

Navigate to the newly created \u201cWSLproj\u201d Directory using the \u201ccd\u201d command. Let\u2019s add our new project to the \u201cWSLproj\u201d directory:<\/p>\n

cd<\/span> WSLproj<\/div><\/div>\n

<\/p>\n

Now, In the Left Navigation Bar of your Visual Studio Code in WSL, look for the Explorer Icon and click on it:<\/p>\n

<\/p>\n

Once the Explorer opens, click on the \u201cOpen Folder<\/strong>\u201d button to Connect Remotely through the WSL to the Ubuntu Directories:<\/p>\n

<\/p>\n

When asked to choose a Directory, click on the \u201cWSLproj\u201d directory which we created earlier:<\/p>\n

<\/p>\n

The \u201cWSLproj\u201d directory will open in the WSL Visual Studio Code:<\/p>\n

<\/p>\n

Now, create a new file in the directory by clicking on the \u201cNew File\u201d icon:<\/p>\n

<\/p>\n

The VS Code will ask for the name of the file. Name the file \u201cpackage.json\u201d as we will add JSON data in it:<\/p>\n

<\/p>\n

Add the code below in the \u201cpackage.json\u201d file:<\/p>\n

{<\/span>
\n"name"<\/span>: "wsl-proj"<\/span>,
\n"version"<\/span>: "1.0.0"<\/span>,
\n"description"<\/span>: "wsl-proj project."<\/span>,
\n"scripts"<\/span>: {<\/span>
\n"lite"<\/span>: "lite-server --port 10006"<\/span>,
\n"start"<\/span>: "npm run lite"<\/span>
\n}<\/span>,
\n"author"<\/span>: ""<\/span>,
\n"license"<\/span>: "ISC"<\/span>,
\n"devDependencies"<\/span>: {<\/span>
\n"lite-server"<\/span>: "^1.3.1"<\/span>
\n}<\/span>
\n}<\/span><\/div><\/div>\n

Once you add the code to the \u201cpackage.json\u201d file, save the file. Now, create a new \u201chtml\u201d file. Use the similar \u201cNew File\u201d icon again, and name your file \u201cindex.html\u201d. Once created, add the HTML code below:<\/p>\n

LinuxWays<\/div><\/div>\n

Save the file once you add the HTML Code:<\/p>\n

<\/p>\n

Step 4: Run the Project<\/strong><\/p>\n

After you add both files in the Visual Studio Code, open the WSL Ubuntu Terminal again. In the WSL Ubuntu Terminal use the \u201cnpm install\u201d command which will install the necessary dependencies for the Project:<\/p>\n

npm install<\/span><\/div><\/div>\n

Wait for the NPM to add the packages:<\/p>\n

<\/p>\n

After the NPM adds the dependencies, you can now run your Project. Use the \u201cnpm start\u201d command to launch the NodeJS Web Server:<\/p>\n

npm start<\/div><\/div>\n

The WSL Ubuntu Terminal will start initializing the project:<\/p>\n

<\/p>\n

Once the Project Starts, it will open the default Web Browser and display the HTML Page on the local host:<\/p>\n

<\/p>\n

This is how you can use the GUI Power of Windows and the Commands of Ubuntu to create and start a Visual Studio Code project on Ubuntu using WSL2.<\/p>\n

Conclusion <\/strong><\/h2>\n

To use Visual Studio Code on Ubuntu using WSL, install Visual Studio Code first, then add the Remote Development Extension, and finally create a project in Visual Studio Code which can be run through the Ubuntu Terminal on WSL. This article explained each working step in detail.<\/p>","protected":false},"excerpt":{"rendered":"

Use Visual Studio Code using WSL by installing Visual Studio Code, adding the Remote Development Extension, and then running the project from Ubuntu Terminal. <\/p>","protected":false},"author":110,"featured_media":22869,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-22863","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ubuntu"],"_links":{"self":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/22863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/users\/110"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/comments?post=22863"}],"version-history":[{"count":0,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/22863\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media\/22869"}],"wp:attachment":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media?parent=22863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/categories?post=22863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/tags?post=22863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}