用 Vscode 連線至 WSL

更新於 發佈於 閱讀時間約 2 分鐘

歡迎各位贊助喔 👍👍👍


前言

  • 必要: WSL、Vscode
  • 非必要: Mobaxterm


可參考文章

  • WSL 的安裝可參考:

WSL --- 在 Windows 上的好用 Linux 虛擬環境


  • Vscode 的安裝可參考:

Vscode --- 初探篇


  • Mobaxterm 的安裝可參考:

Mobaxterm --- 超級好用的免費終端連線工具



安裝必要的 Extension

先打開 "Vscode" 吧! 打開後會看到如下圖

raw-image

然後點擊 View -> Extensions,如下圖;View 按鈕可能會在左欄或是上欄的 "3 個點" 中,大家記得找找看唷 😁

raw-image

點開 Extensions 後就會看到下圖,"installed" 區塊就是你已經下載過的 Extensions,因為我已經下載了一些 Extension,所以 "installed" 區塊不是空的

raw-image

接下來就要來安裝要連到 WSL 所需的 Extension 拉,在搜尋欄打上 "WSL",就會顯示需要的 Extension 了,如下圖紅框,因為我已經安裝過 "WSL" 這個 Extension 了,所以我的右下角是顯示齒輪,還沒安裝的 Extension 的右下角會是 "install" 的按鈕,點擊 install 進行安裝吧 !!!

raw-image

等進度條跑完後就安裝完成囉 🎉🎉🎉



連線到 WSL

很簡單,跟著我操作吧 😎

點擊左下角的藍色按鈕,看下圖

raw-image

點擊後你會看到以下,選擇 "Connect to WSL using Distro",如果你只有一個 WSL 的虛擬環境在你的電腦的話,你只要選 "Connect to WSL" 就可以囉,因為我的 WSL 有多個,所以用 "Connect to WSL using Distro" 當作範例

raw-image

選擇你要連到的 WSL 環境並點擊它,如下圖,我要連的是 Ubuntu-20.04

raw-image

連線成功後,左下角的藍色按鈕會顯示你連到的 WSL 環境名稱,如圖

raw-image


取消連線到 WSL

Vscode 可以連到 WSL 當然也可以取消連線囉,只要再次點擊左下角的藍色按鈕就行了,再來就會出現如下圖的視窗,選擇 "Close Remote Connection" 就可以了

raw-image


結語

謝謝各位的觀看,大家應該都學會使用 Vscode 連線到 WSL 了吧 😄






每個房間都是一個有趣的主題喔
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
1. WSL 的安裝流程 2. WSL 的使用 3. 取得 WSL 的檔案 以上皆有附圖
1. WSL 的安裝流程 2. WSL 的使用 3. 取得 WSL 的檔案 以上皆有附圖
你可能也想看
Google News 追蹤
Thumbnail
2025 年,從分享精彩的 #Myvocus2024 年度回顧開始! #Myvocus2024 年度回顧通知已送達 vocus 的 2024 有超過 12 萬筆訂單、35 萬則以上的內容、16 萬以上的新會員、4 千+ 筆數位商品訂單,5 萬 + 則貼文! 曬曬你的 2024 vocus 吧!
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在離線環境需要安裝Python套件時就相當的麻煩,需要先下載好套件包,在打指令安裝,若套件數量一多時就會相當麻煩。 本文將介紹如何利用兩行指令快速的安裝整個資料夾的套件。
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
Thumbnail
本文將介紹一些常用的 Linux 指令,幫助新手快速上手。主要內容包括文件和目錄管理(如 ls、cd、mkdir)、檔案操作(如 cp、mv、rm)。通過這些指令的學習,使用者可以更快速地操作 Linux 系統。
Thumbnail
VS code是什麼? Visual Studio Code(通常縮寫為VS Code)是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言,提供了一系列先進功能和插件,讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
Thumbnail
sudo apt-get update sudo apt-get upgrade sudo apt install lightdm sudo dpkg-reconfigure lightdm(option選項,如需要切換可以依據需求執行,參考畫面如下) 安裝 x11VNC sudo apt-
Thumbnail
這篇文章將介紹在vCenter中新增網路和VMkernel介面的操作步驟,包括進入設定、新增標準交換器群組、命名交換器、觀察狀態、新增VMkernel介面、命名和啟用服務等。
Thumbnail
本文將介紹如何在ESXI 8上安裝vCenter Server以及相關設定步驟,包括ISO光碟檔下載、掛載ISO、填入安裝目標、設定網域以及管理者密碼等。
Thumbnail
這篇文章分享了在Linux作業系統中常用且推薦的電腦軟體,包括文字閱覽編輯、程式碼編輯、繪製流程圖、PDF英翻中、螢幕截圖錄影、影音播放器、通訊軟體、以及虛擬機等方面的軟體。推薦的軟體在各個領域提供了詳細的資訊和相關連結。
Thumbnail
2025 年,從分享精彩的 #Myvocus2024 年度回顧開始! #Myvocus2024 年度回顧通知已送達 vocus 的 2024 有超過 12 萬筆訂單、35 萬則以上的內容、16 萬以上的新會員、4 千+ 筆數位商品訂單,5 萬 + 則貼文! 曬曬你的 2024 vocus 吧!
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在離線環境需要安裝Python套件時就相當的麻煩,需要先下載好套件包,在打指令安裝,若套件數量一多時就會相當麻煩。 本文將介紹如何利用兩行指令快速的安裝整個資料夾的套件。
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
Thumbnail
本文將介紹一些常用的 Linux 指令,幫助新手快速上手。主要內容包括文件和目錄管理(如 ls、cd、mkdir)、檔案操作(如 cp、mv、rm)。通過這些指令的學習,使用者可以更快速地操作 Linux 系統。
Thumbnail
VS code是什麼? Visual Studio Code(通常縮寫為VS Code)是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言,提供了一系列先進功能和插件,讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
Thumbnail
sudo apt-get update sudo apt-get upgrade sudo apt install lightdm sudo dpkg-reconfigure lightdm(option選項,如需要切換可以依據需求執行,參考畫面如下) 安裝 x11VNC sudo apt-
Thumbnail
這篇文章將介紹在vCenter中新增網路和VMkernel介面的操作步驟,包括進入設定、新增標準交換器群組、命名交換器、觀察狀態、新增VMkernel介面、命名和啟用服務等。
Thumbnail
本文將介紹如何在ESXI 8上安裝vCenter Server以及相關設定步驟,包括ISO光碟檔下載、掛載ISO、填入安裝目標、設定網域以及管理者密碼等。
Thumbnail
這篇文章分享了在Linux作業系統中常用且推薦的電腦軟體,包括文字閱覽編輯、程式碼編輯、繪製流程圖、PDF英翻中、螢幕截圖錄影、影音播放器、通訊軟體、以及虛擬機等方面的軟體。推薦的軟體在各個領域提供了詳細的資訊和相關連結。