愛看電視的小上進的沙龍

用 Vscode 連線至 WSL

愛看電視的小上進-avatar-img
愛看電視的小上進
發佈於WSL --- 在 Windows 使用 Linux 吧 等 個房間
更新於 發佈於 閱讀時間約 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 了吧 😄






愛看電視的小上進的沙龍WSL --- 在 Windows 使用 Linux 吧愛看電視的小上進的沙龍Vscode --- 我超愛用的程式編輯器
avatar-img
愛看電視的小上進的沙龍
7會員
47內容數
每個房間都是一個有趣的主題喔
留言0
查看全部
avatar-img
發表第一個留言支持創作者！
愛看電視的小上進的沙龍 的其他內容
Mobaxterm --- 超級好用的免費終端連線工具
使用 Mobaxterm 連線到 WSL
#WSL#mobaxterm#連線終端機
WSL --- 在 Windows 上的好用 Linux 虛擬環境
1. WSL 的安裝流程 2. WSL 的使用 3. 取得 WSL 的檔案 以上皆有附圖
#Windows#WSL#安裝
Mobaxterm --- 超級好用的免費終端連線工具
使用 Mobaxterm 連線到 WSL
#WSL#mobaxterm#連線終端機
WSL --- 在 Windows 上的好用 Linux 虛擬環境
1. WSL 的安裝流程 2. WSL 的使用 3. 取得 WSL 的檔案 以上皆有附圖
#Windows#WSL#安裝
你可能也想看
Google News 追蹤
avatar-avatar
筱涵｜Hannah的沙龍
Thumbnail
【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學
嘿，大家新年快樂~ 新年大家都在做什麼呢？ 跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
#互動設計#文化體驗#慈母籤
avatar-avatar
前端轉職經驗談
[前端自學轉職攻略] 9. 決定了 side project 的題目後，要怎麼開始？
安裝程式 → 下載範本 → 列出專案的功能清單 → 開始開發
#自學#前端#前端工程師
avatar-avatar
螃蟹_crab的沙龍
Thumbnail
[Python]一次安裝wheel 套件包
在離線環境需要安裝Python套件時就相當的麻煩，需要先下載好套件包，在打指令安裝，若套件數量一多時就會相當麻煩。 本文將介紹如何利用兩行指令快速的安裝整個資料夾的套件。
#Python#wheel套件#快速安裝python套件
avatar-avatar
郭欣玫的沙龍
vscode的設定和相關插件
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來，接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json，就可以開始你的設定拉(主要是依照個人的喜好設定
avatar-avatar
Yuna
Thumbnail
快速上手 Linux：10分鐘學會基本指令
本文將介紹一些常用的 Linux 指令，幫助新手快速上手。主要內容包括文件和目錄管理（如 ls、cd、mkdir）、檔案操作（如 cp、mv、rm）。通過這些指令的學習，使用者可以更快速地操作 Linux 系統。
#Linux指令#Linux新手#Linux常用
avatar-avatar
Arthur的沙龍
Thumbnail
Visual Studio Code網頁設計新手推薦！
VS code是什麼？ Visual Studio Code（通常縮寫為VS Code）是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言，提供了一系列先進功能和插件，讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
#VSCode#vscode#VisualStudioCode
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
Thumbnail
Nuxt 安裝流程
Nuxt 的安裝流程，一起來試試看吧
#程式#程式筆記#前端
avatar-avatar
iBonnie_愛邦尼
Thumbnail
Ubuntu 24.04|22.04|20.04|18.04 Desktop(一般桌面版) 安裝VNC
sudo apt-get update sudo apt-get upgrade sudo apt install lightdm sudo dpkg-reconfigure lightdm(option選項，如需要切換可以依據需求執行，參考畫面如下) 安裝 x11VNC sudo apt-
avatar-avatar
iBonnie_愛邦尼
Thumbnail
在vCenter中新增網路和VMkernel介面的操作步驟
這篇文章將介紹在vCenter中新增網路和VMkernel介面的操作步驟，包括進入設定、新增標準交換器群組、命名交換器、觀察狀態、新增VMkernel介面、命名和啟用服務等。
#新增#命名#Switch
avatar-avatar
iBonnie_愛邦尼
Thumbnail
VCENTER 8 (VCSA) 安裝_Install
本文將介紹如何在ESXI 8上安裝vCenter Server以及相關設定步驟，包括ISO光碟檔下載、掛載ISO、填入安裝目標、設定網域以及管理者密碼等。
#安裝
avatar-avatar
頓小大人的沙龍
Thumbnail
喜愛使用Linux作業系統？這12個免費軟體絕對不能錯過
這篇文章分享了在Linux作業系統中常用且推薦的電腦軟體，包括文字閱覽編輯、程式碼編輯、繪製流程圖、PDF英翻中、螢幕截圖錄影、影音播放器、通訊軟體、以及虛擬機等方面的軟體。推薦的軟體在各個領域提供了詳細的資訊和相關連結。
#Linux系統#Linux好用軟體#FreeSoftware
avatar-avatar
筱涵｜Hannah的沙龍
Thumbnail
【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學
嘿，大家新年快樂~ 新年大家都在做什麼呢？ 跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
#互動設計#文化體驗#慈母籤
avatar-avatar
前端轉職經驗談
[前端自學轉職攻略] 9. 決定了 side project 的題目後，要怎麼開始？
安裝程式 → 下載範本 → 列出專案的功能清單 → 開始開發
#自學#前端#前端工程師
avatar-avatar
螃蟹_crab的沙龍
Thumbnail
[Python]一次安裝wheel 套件包
在離線環境需要安裝Python套件時就相當的麻煩，需要先下載好套件包，在打指令安裝，若套件數量一多時就會相當麻煩。 本文將介紹如何利用兩行指令快速的安裝整個資料夾的套件。
#Python#wheel套件#快速安裝python套件
avatar-avatar
郭欣玫的沙龍
vscode的設定和相關插件
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來，接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json，就可以開始你的設定拉(主要是依照個人的喜好設定
avatar-avatar
Yuna
Thumbnail
快速上手 Linux：10分鐘學會基本指令
本文將介紹一些常用的 Linux 指令，幫助新手快速上手。主要內容包括文件和目錄管理（如 ls、cd、mkdir）、檔案操作（如 cp、mv、rm）。通過這些指令的學習，使用者可以更快速地操作 Linux 系統。
#Linux指令#Linux新手#Linux常用
avatar-avatar
Arthur的沙龍
Thumbnail
Visual Studio Code網頁設計新手推薦！
VS code是什麼？ Visual Studio Code（通常縮寫為VS Code）是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言，提供了一系列先進功能和插件，讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
#VSCode#vscode#VisualStudioCode
avatar-avatar
阿榮 | 前端 ~ 互動藝術程式
Thumbnail
Nuxt 安裝流程
Nuxt 的安裝流程，一起來試試看吧
#程式#程式筆記#前端
avatar-avatar
iBonnie_愛邦尼
Thumbnail
Ubuntu 24.04|22.04|20.04|18.04 Desktop(一般桌面版) 安裝VNC
sudo apt-get update sudo apt-get upgrade sudo apt install lightdm sudo dpkg-reconfigure lightdm(option選項，如需要切換可以依據需求執行，參考畫面如下) 安裝 x11VNC sudo apt-
avatar-avatar
iBonnie_愛邦尼
Thumbnail
在vCenter中新增網路和VMkernel介面的操作步驟
這篇文章將介紹在vCenter中新增網路和VMkernel介面的操作步驟，包括進入設定、新增標準交換器群組、命名交換器、觀察狀態、新增VMkernel介面、命名和啟用服務等。
#新增#命名#Switch
avatar-avatar
iBonnie_愛邦尼
Thumbnail
VCENTER 8 (VCSA) 安裝_Install
本文將介紹如何在ESXI 8上安裝vCenter Server以及相關設定步驟，包括ISO光碟檔下載、掛載ISO、填入安裝目標、設定網域以及管理者密碼等。
#安裝
avatar-avatar
頓小大人的沙龍
Thumbnail
喜愛使用Linux作業系統？這12個免費軟體絕對不能錯過
這篇文章分享了在Linux作業系統中常用且推薦的電腦軟體，包括文字閱覽編輯、程式碼編輯、繪製流程圖、PDF英翻中、螢幕截圖錄影、影音播放器、通訊軟體、以及虛擬機等方面的軟體。推薦的軟體在各個領域提供了詳細的資訊和相關連結。
#Linux系統#Linux好用軟體#FreeSoftware