---
# System prepended metadata

title: VS Code 遠端開發設置教學

---

VS Code 遠端開發設置教學
===

## 前言
這次VS Code大神更新至1.35.0版本
支援了**VS Code Remote**套件

方便平常使用遠端機的開發者可以套過VS Code直接連線到遠端寫code，不要再透過sftp的方式拉檔案推檔案了，也可以解決開發多人專案時，在遠端git pull 忘記拉檔案到本地端的問題，除此之外，VS Code Remote 還可以針對遠端開發區獨立裝套件，相當的方便！

![](https://i.imgur.com/gIQnrO7.png)

**Visual Studio Code Remote** 允許開發者將容器，遠端機，或Windows Subsystem for Linux (WSL) 作為完整的開發環境。你可以：

1. 在部署相同的操作系統上進行開發，或者使用更大或更專業的硬件。

2. 把開發環境作為沙盒，以避免影響本地電腦配置。

3. 讓新手輕鬆上手，讓每個人都保持一致的開發環境。

4. 使用原本在本地環境不可用的工具或運行時，或者管理它們的多個版本。

5. 在WSL 裡開發Linux 應用。

6. 從多台不同的電腦訪問現有的開發環境。

7. 調試在其他位置（比如客戶網站或雲端）運行的應用程序。

8. 所有以上的功能，並不需要在你的本地開發環境有源代碼。通過VS Code Remote，輕鬆連接上遠程環境，在本地進行開發。

**Remote Development extension pack** 包括三個擴展：

1. Remote - SSH  -通過使用SSH打開遠端機或者VM上的文件夾，來連接到任何位置。

2. Remote - Containers  –把Docker作為你的開發容器。

3. Remote - WSL  -在Windows Subsystem for Linux中，獲得Linux般的開發體驗。
## ssh連線設置教學

首先請先確認自己的VS Code是最新版本

![](https://i.imgur.com/nfR4xUg.png =200x)


到套件市集![](https://i.imgur.com/ybHnDzu.png =35x)搜尋**Remote Development** 點擊安裝

![](https://i.imgur.com/YzHKUHh.png)

安裝完左邊工具列會多了一個![](https://i.imgur.com/ACvFfv6.png =35x)的icon

按下![](https://i.imgur.com/ACvFfv6.png =35x)會看到下面這個畫面

![](https://i.imgur.com/sZ705Qs.png =300x)

點擊 **Configure** 或者 齒輪![](https://i.imgur.com/0qrFF6a.png)

會跳出選單 要我們選ssh的config設定檔
![](https://i.imgur.com/FtmbbEl.png)

打開設定檔編輯

```
# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host 輸入連線名稱
    HostName 輸入遠端機ip
    User 輸入遠端機使用者帳號
    IdentityFile 私鑰的路徑
```

按下存檔 就可以看到下面這個畫面 會顯示你的連線名稱

![](https://i.imgur.com/84G7KUF.png =300x)

點擊 ![](https://i.imgur.com/JRc1NVc.png)VS Code會另開一個視窗 連線至您的遠端機 

就會看到下方狀態列多了ssh的圖示

![](https://i.imgur.com/HSw1GST.png)

點它會出現remote-ssh相關的設定選單

![](https://i.imgur.com/wc3mq5b.png)

接著按開啟資料夾

![](https://i.imgur.com/gFqGSCM.png =300x)

就可以選取您遠端機的資料夾囉

![](https://i.imgur.com/413nLhw.png)

就能體驗立即編輯遠端檔案的快感囉！

![](https://i.imgur.com/iW3K6Ho.png)