[](https://hackmd.io/qVhu44l1SSK-kj_AoednLg)
###### tags: `2023鐵人賽` `qiita` `VSCode`
# [2023 15th鐵人賽] Day19 - 使用 Visual Studio Code 時絕對要安裝的擴充套件 Top20【2022 年最新版】

> 原文連結：[Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】 - Qiita](https://qiita.com/yamaguchi2000/items/76060c08764ce4c704f9)

這篇是 VSCode 系列，整理 2022 年擴充套件排行，本來是想比較看看是否有使用比較不一樣的工具，結果好像大部分還是有使用過XD

但還是決定當作記錄（說不定哪天要重新安裝 VSCode 用得上），也把安裝數和平均星數延續統計到 2023 年，稍微觀察變化作為參考。

那麼，以下正文開始！

---

本文是 [Nuco Advent Calendar 2022](https://qiita.com/advent-calendar/2022/nuco) 第十四天的文章。
內容將介紹 20 個 VSCode 必備的擴充套件，包括安裝數量與平均星數（*更新截至 2023 年 10 月）。

擴充套件列表如下：

- [Japanese Language Pack for Visual Studio Code](#Japanese-Language-Pack-for-Visual-Studio-Code)
- [Chinese (Traditional) Language Pack for Visual Studio Code](#Chinese-Traditional-Language-Pack-for-Visual-Studio-Code)
- [vscode-icons](#vscode-icons)
- [Code Spell Checker](#code-spell-checker)
- [zenkaku](#zenkaku)
- [Path Autocomplete](#path-autocomplete)
- [Prettier - Code formatter](#prettier---code-formatter)
- [indent-rainbow](#indent-rainbow)
- [GitLens](#gitlens)
- [Git History](#git-history)
- [HTML CSS Support](#html-css-support)
- [Output Colorizer](#output-colorizer)
- [TODO Highlight](#todo-highlight)
- [vscode-random](#vscode-random)
- [Atom One Dark Theme](#atom-one-dark-theme)
- [Trailing Spaces](#trailing-spaces)
- [REST Client](#rest-client)
- [Live Server](#live-server)
- [Jupyter](#jupyter)
- [Dev Container](#dev-container)
- [Rainbow CSV](#rainbow-csv)

## [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
**2022 → 2023**
**安裝數：約 470 → 670 萬　評價：☆4.5 → 4.5**

對日本語使用者來說，絕對是不可或缺的擴充功能。
可以將 VSCode 的語言界面轉換為日本語。


### [Chinese (Traditional) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant)

**安裝數：約 180 萬　評價：☆4.9**

這裡附上轉換為繁體中文的版本。


## [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
**2022 → 2023**
**安裝數：約 1250 → 1560 萬　評價：☆5.0 → 4.8**

這個套件能根據資料夾和檔案的種類，新增易於辨識的圖示。
是有助於提升工作效率的工具。


即使是結構複雜的資料夾，也能夠一目瞭然！
vscode-icons 真的很厲害！


## [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
**2022 → 2023**
**安裝數：約 560 → 830 萬　評價：☆4.5 → 4.5**

這個功能可以指出英文單詞等的拼寫錯誤。
對像我這樣經常拼寫錯誤的人來說非常方便。


當拼寫錯誤時，會像這樣以藍色底線標示。


## [zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)
**2022 → 2023**
**安裝數：約 29 → 40 萬　評價：☆4.5 → 4.5**

可以清楚地顯示全角和半角空格的區別。


像這樣全形空格會用黃底 Highlight，很容易識別！


## [Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)
**2022 → 2023**
**安裝數：約 124 → 150 萬　評價：☆4.5 → 4.7**

在輸入路徑時，這個套件可以自動補完路徑。
保證能夠提高工作效率。


像這樣預測可能的 Path。


## [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
**2022 → 2023**
**安裝數：約 2643 → 3687 萬　評價：☆4.0 → 3.6**

能夠協助整理 HTML、JavaScript、Markdown 等內容的排版。


即使是雜亂的 Markdown，


也能像這樣自動調整。真方便！


## [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
**2022 → 2023**
**安裝數：約 419 → 600 萬　評價：☆5.0 → 4.8**

可以為縮排部分添加顏色，使其更容易閱讀。
特別適用於 Python 和 HTML 等程式語言。


有效提升縮排的識別度。


## [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
**2022 → 2023**
**安裝數：約 1866 → 2632 萬　評價：☆4.0 → 3.9**

在使用 git 進行共同開發時，能夠得知每行程式碼是由哪位開發者所撰寫的。


透過這種方式，可以清楚查看是誰、在何時、在什麼地方進行修改，以及留下什麼 Commit Message。


## [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
**2022 → 2023**
**安裝數：約 717 → 948 萬　評價：☆4.5 → 4.4**

可以依檔案為單位，輕鬆查看 git 的 Log。


可以方便搜尋 Commit 歷史記錄，並列出檔案的更新歷史記錄。


## [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
**2022 → 2023**
**2023 安裝數：約 1236 → 1680 萬　評價：☆3.5 → 3.4**

可以根據 CSS 的定義，自動補完 HTML 輸入內容。


像這樣參考 CSS 來預測 class 內容，也有助於防止拼寫錯誤！


## [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)
**2022 → 2023**
**安裝數：約 63 → 87 萬　評價：☆5.0 → 4.9**

將 VSCode 的輸出內容上色，以便於理解。


錯誤訊息也能更容易閱讀！


## [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
**2022 → 2023**
**安裝數：約 301 → 389 萬　評價：☆4.5 → 4.5**

當有內容需要稍後處理，但怕會忘記時，這項功能非常有用。


TODO 的部分會上色，非常容易識別！


## [vscode-random](https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random)
**2022 → 2023**
**安裝數：約 4.5 → 6.4 萬　評價：☆5.0 → 4.9**

能夠自動產生隨機數字和名稱。
對於建立虛擬資料（dummy data）非常有用。


例如，希望隨機輸入國家名稱的情況：


只要在指令面板選擇 Random: Country name：


即可自動隨機生成國家名稱，方便！


## [Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)
**2022 → 2023**
**安裝數：約 375 → 473 萬　評價：☆5.0 → 4.8**

這個擴充功能，能夠套用看起來舒服的配色。


## [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
**2022 → 2023**
**安裝數：約 119 → 163 萬　評價：☆5.0 → 4.8**

能夠清楚識別程式碼末端不必要的空格。


像這樣以紅底 Highlight 顯示，能稍微減輕編碼時的壓力。


## [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
**2022 → 2023**
**安裝數：約 288 → 382 萬　評價：☆5.0 → 4.9**

能夠在 VSCode 發送 http request 的擴充功能。


並且清楚顯示 request 結果！


## [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
**2022 → 2023**
**安裝數：約 2815 → 3977 萬　評價：☆4.5 → 4.4**

能夠在 Localhost 啟動 Server，並上傳 HTML 檔案進行逐一檢查。


可以同時修改和預覽程式碼。


## [Jupyter](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter)
**2022 → 2023**
**安裝數：約 5137 → 7073 萬　評價：☆2.5 → 2.7**

能夠在 VSCode 上開啟 Jupyter Notebook。


不需啟動瀏覽器，也能無壓力使用 Notebook。


## [Dev Container](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
**2022 → 2023**
**安裝數：約 1559 → 2039 萬　評價：☆4.5 → 4.5**

能透過擴充 VSCode 指令面板，來新增 Docker 的指令。
這是使用 Docker 進行遠端開發的必備擴充功能。


透過新增的指令，可以輕鬆建立遠端容器。
也可以在 devcontainer 環境中，使用 VSCode 的其他擴充功能。


## [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
**2022 → 2023**
**安裝數：約 230 → 355 萬　評價：☆5.0 → 4.8**

透過將 CSV 檔案內容上色，可以更清楚辨識每個元素屬於哪一列。


即使是雜亂到難以理解的 CSV 檔案：


也能透過顏色編碼，使內容更容易理解！


## 最後

敝公司 Nuco 正在招募社員與實習生，不論經驗有無，
若有興趣請[點這裡]((https://www.recruit.nuco.co.jp/))。