Vscode + SSH --- 直接編輯遠端電腦內的檔案

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

歡迎各位贊助喔 👍👍👍


簡介

Vscode 很方便,它是可以直接連到遠端電腦的,也就是說你可以用你的電腦直接編輯、編譯、執行遠端電腦的程式檔,很方便唷 😍



安裝必要的 Extension

點 "View" -> "Extensions",如下圖

raw-image

接著左邊就會出現 Extensions 的欄位,在搜尋欄輸入 "SSH","Remote - SSH" 就是我們要安裝的 Extension,右下角有 "install" 按鈕,點它就能安裝,因為我的已經安裝過了,所以我的 "install" 按鈕變成了 "齒輪",如下圖

raw-image

等進度條跑完就安裝好了 🎉🎉🎉



連線到遠端電腦

先點左下角的藍色按鈕,接著就會出現一個小視窗,如下圖,接著點 "Connect to Host ..." 或是 "Connect Current Window to Host ..." 都可以,差別只在於前者會另開一個 vscode 視窗,而後者會直接用目前的視窗連到遠端

raw-image

再來點 "Add New SSH Host",如下圖

raw-image

再來在打字欄中打上你遠端電腦的 user name 和 網路的IP,然後按 Enter,可參考下圖,格式是:

使用者名稱@IP
raw-image

再來就會問你要將新的遠端電腦的 IP 存在哪個 config 檔案裡,任意選一個就行了,選完後 vscode 會顯示「添加成功了」,接著再點一次 "Connect to Host" ,你就會看到剛剛新增的 "遠端電腦的 IP" 出現在清單中了,如圖

raw-image

就直接點它吧,接著 vscode 就會嘗試連接到遠端電腦,連到後就 ok 了,第一次連接會較久唷,稍微等一下吧 😄


結語

這功能真的好用,我用過覺得讚

留言
avatar-img
留言分享你的想法!
愛看電視的小上進-avatar-img
發文者
2023/12/15
vscode 連線到遠端電腦中的 Docker提及了這篇文章,趕快過去看看吧!
avatar-img
愛看電視的小上進的沙龍
7會員
47內容數
每個房間都是一個有趣的主題喔
2023/12/15
教大家讓 vscode 連上遠端電腦中的 docker 環境之中,步驟詳細且附圖
Thumbnail
2023/12/15
教大家讓 vscode 連上遠端電腦中的 docker 環境之中,步驟詳細且附圖
Thumbnail
2023/12/07
切換終端機、更改預設的終端機,詳細且附圖
Thumbnail
2023/12/07
切換終端機、更改預設的終端機,詳細且附圖
Thumbnail
2023/12/06
教大家如何把多個檔案顯示在多個 vscode 的視窗
Thumbnail
2023/12/06
教大家如何把多個檔案顯示在多個 vscode 的視窗
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
本篇將分享VSCode工作區的設定與功能,包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo,提高工作效率。
Thumbnail
本篇將分享VSCode工作區的設定與功能,包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo,提高工作效率。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News