# VSCode 外掛 Plugin

#### 1.Preview on Web Server yuichinukiyama

方便在VSCode 上查看網頁。

&#x20;開啟 html 後點選 ctrl+shift+v

![](https://2356031413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0u4DAqfidGmTt67qrG%2F-MK8jcwdn5w3QUEXPHns%2F-MKIAVBpX2Jp9P1cVH1G%2F%E6%88%AA%E5%9C%96%202020-10-23%20%E4%B8%8A%E5%8D%889.58.24.png?alt=media\&token=26c0763f-6492-4c52-a044-2444525a4915)

#### 2. GitLens

查看相關 GIt 記錄，並且會直接顯示在行旁邊。

#### 3. Hex Editor

方便查看 binary 的檔案

#### 4. Path Intellisense

輸入路徑時會自動建議

#### 5. Vscode Google Translate

選取後快速翻譯，點選 plugin setting 設定要翻譯哪個語言

選擇字後按 shift+option+t

#### 6. Remote ssh

![](https://2356031413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0u4DAqfidGmTt67qrG%2Fuploads%2FXioDmw0cnKQROOag9W5I%2F%E6%88%AA%E5%9C%96%202022-10-18%20%E4%B8%8A%E5%8D%8810.16.24.png?alt=media\&token=35c1c1bd-653a-4407-8c3c-9c8f39404753)

編輯 .ssh/config 檔案後會自動出現在列表中

![](https://2356031413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0u4DAqfidGmTt67qrG%2Fuploads%2FmKFDJ9CpkKzyytbYAGAM%2Ffdsfsdfsdf.png?alt=media\&token=9930f6f7-e2b6-48c7-b290-e3123d612b6d)

#### 7. 使用瀏覽器 ssh 進機器並且為 VSCode 介面

Github: [https://github.com/coder/code-server](https://github.com/coder/code-server)

Docker hub: [https://hub.docker.com/r/codercom/code-server](https://hub.docker.com/r/codercom/code-server)

docker-compose 範例：

```yaml
version: "2.1"
services:
  code-server:
    image: codercom/code-server:latest
    container_name: code-server
    user: root
    environment:
      - PASSWORD=password #optional
      - HASHED_PASSWORD= #optional
      - SUDO_PASSWORD=password #optional
      - SUDO_PASSWORD_HASH= #optional
    volumes:
      - ~/.config:/config
      - ~/project:/home/user/project
    ports:
      - 8080:8080
    restart: unless-stopped
```

其他 environment config 可參考：

{% embed url="https://github.com/coder/deploy-code-server/tree/main/deploy-container#environment-variables" %}

#### 8. VsCode MongoDB playground

類似 mongoDB compass, 並且可以在上面快速的更新資料，與使用 playground 測試 query

{% embed url="https://code.visualstudio.com/docs/azure/mongodb" %}

#### 9. VsCode 進入 Docker&#x20;

![](https://2356031413-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0u4DAqfidGmTt67qrG%2Fuploads%2FHeq1XPrty87WIakTqMmO%2F%E6%88%AA%E5%9C%96%202022-11-03%20%E4%B8%8B%E5%8D%886.10.49.png?alt=media\&token=7aeddbba-fabd-4bd6-a7eb-cc849230ec68)

選擇 Containers 之後下面選一個 container，點選 Attach to container ，即可進入該 docker ，快速方便的改 container 內檔案

[https://code.visualstudio.com/blogs/2019/10/31/inspecting-containers](https://code.visualstudio.com/blogs/2019/10/31/inspecting-containers)
