---
# System prepended metadata

title: ⌨ VSCode 必裝套件
tags: [VSCode, Extensions]

---

VSCode 必裝套件  
===
###### tags: `VSCode` `Extensions`

---

[VSCode 必裝套件 2021 年補充](https://hackmd.io/@sam-liaw/Ska733lHK)

---


# Cascadia Code 字型  
[VSCode 安裝 Cascadia Code](https://hackmd.io/@sam-liaw/rJl6tLfQI)

[Cascadia Code 微軟釋出免費等寬字型，開源更適合程式碼編輯器和終端機](https://free.com.tw/cascadia-code/)

---

[Coding 用字體推薦：Fira Code、JetBrains Mono、Consolas、與 Input Sans](https://zhung.com.tw/article/coding-font-fira-code-jetbrains-mono-consolas-input-sans/)
[JetBrains Mono 更適合閱讀程式碼的等寬字型，內建四種字重斜體可商用](https://free.com.tw/jetbrains-mono/)


---

# Material Icon Theme
好看的 icon 主題  

---

# Power Mode  
打字有特效  
![Power Mode 打字特效設定](https://i.imgur.com/4IP5r11.png)
記得在 喜好設定 > 設定 搜尋 `powermode.enabled`  
開啟後才有特效  

---

# Better Comments
註解變色功能  
![註解變色截圖](https://i.imgur.com/vv7XXjf.png)

---

[Better Comments](https://marketplace.visualstudio.com/items?itemName=OmarRwemi.BetterComments)

---

# TODO Highlight
TODO: 與 FIXME: 提示變色  
![ TODO Highlight 截圖](https://i.imgur.com/V1QHQRw.png)
可以自行定義關鍵字  
![ TODO Highlight 設定畫面](https://i.imgur.com/yQIHqRB.png)

---

# ❤ Todo Tree
列出 TODO  
[Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
![Todo Tree 截圖](https://raw.githubusercontent.com/Gruntfuggly/todo-tree/master/resources/screenshot.png)

---

# ❤ Bookmarks
書籤功能  
[Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
![Bookmarks 截圖](https://i.imgur.com/BobLqhn.png =500x)

---

# shell-format
支援 shell script 格式  
[shell-format](https://marketplace.visualstudio.com/items?itemName=foxundermoon.shell-format)

---

# YAML
支援 YAML  
[YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)

---

# Python
支援 Python  
[Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)

---

# Live Server Preview
![Live Server Preview 截圖](https://i.imgur.com/EmVqc8l.png)

右邊直接彈出視窗顯示 html 網頁內容

---

# Chinese Lorem
由於 VSCode 內建有假字生成器(Lorem)，但是有時候我們會希望生成中文的假字那麼就可以使用這個套件，使用方法也很簡單，將原本的 lorem 改成 ctlorem + tab 就可以了。

---

# Bracket Pair Colorizer 2
![Bracket Pair Colorizer 2 截圖](https://i.imgur.com/QNdMspH.png =500x)
這個也是我個人非常偏好的 VSCode 套件之一，最主要可以增加程式碼區塊的辨識度，否則程式碼越寫越長時，其實很難辨識這是哪一個區塊的程式碼

---

# Auto Rename Tag
[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
變更標籤時，結尾標籤自動修改

---

# Image preview
[Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)
![Image preview 截圖](https://i.imgur.com/L6Bmxze.png =500x)

語法編輯時，圖片顯示預覽

---

# indent-rainbow
[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
![indent-rainbow 截圖](https://i.imgur.com/pGJCPEQ.png =500x)
語法編輯時，使用Tab空格時顯示顏色，表語法層次性

---

# Path Intellisense
[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
![Path Intellisense](https://i.giphy.com/iaHeUiDeTUZuo.gif)
自動偵測可用的外部連結，僅限於HTML格式下作用。

---

# AutoFileName
[AutoFileName](https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename)
![AutoFileName 截圖](https://trello-attachments.s3.amazonaws.com/56c86fd76bf599f4fa62ee7f/1152x720/4b439177b0fb1c04af133aa733ba2a09/Untitled.gif =500x)

---

# GitLens — Git supercharged
[GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
![GitLens — Git supercharged 截圖](https://i.imgur.com/bYrCRKg.png =500x)
游標所在會顯示誰簽入、時間與說明

---

# Git Graph
[Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
![](https://i.imgur.com/t3xnrXO.gif)
有美美的分枝圖可以看

---

# ＃region folding for VS Code
[#region folding for VS Code](https://marketplace.visualstudio.com/items?itemName=maptz.regionfolder)
![＃region folding for VS Code 截圖](https://i.imgur.com/CBZ389a.gif)
類似 C# 的註解方式
折疊時可以看到我們寫的註解
```csharp=
/* #region Main */
public static void Main(string args[])
{
   //Your code goes here
}
/* #endregion */
```
與
```htmlmixed=
<!-- #region Body -->
<body>
</body>
<!-- #endregion -->
```
都可以使用
* 使用方法：
滑鼠選取要註解的區域
按住 Ctrl 不放
依序再按住 M、R
就可以註解了
PS.可惜VSCodium目前還不能裝
Ctrl + P 輸入ext install regionfolder
一樣找不到

---

# SVG Viewer
[SVG Viewer](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer)
看 SVG 的工具
PS.可惜VSCodium目前還不能裝

---

# JavaScript (ES6) code snippets
[JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
可以縮寫打出長指令（查上表，如：clg -> console.log(object)）
其實很多語言都有支援

---

# jQuery Code Snippets
[jQuery Code Snippets](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)
同上喔
專為 jQuery 提供語法輸入

---

# filesize
[filesize](https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize)
點選檔案左下會出現檔案大小
PS.可惜VSCodium目前還不能裝

---

# Highlight Matching Tag
[Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)
點選 tag 結尾的 tag 字體下面會有底線
方便你知道 tag 的範圍

---

# Highlight Line
[Highlight Line](https://marketplace.visualstudio.com/items?itemName=cliffordfajardo.highlight-line-vscode)
下底線出現在目前游標的位置

---

# CSS Peek
[CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
![CSS Peek 截圖](https://i.imgur.com/MIstc8V.gif)
滑鼠點選 id 或 class 按下 F12 就能跳到 scss 的位置了

---

# IntelliSense for CSS class names in HTML
[IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
![IntelliSense for CSS class names in HTML 截圖](https://i.imgur.com/EoxuLG4.gif)
可以在 class 中列出可選的 class 

---

# Prettier - Code formatter
[Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
自動排版 scss

---

# Auto Close Tag
[Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
自動補上 `</tag>`

---

# Trailing Spaces
[Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
程式碼後面的空白會變成紅色

---

# Markdown Table Prettifier
[Markdown Table Prettifier](https://marketplace.visualstudio.com/items?itemName=darkriszty.markdown-table-prettify)
Markdown 整理 Table (VSCodium 沒辦法安裝)

---

# Vim
![Vim Logo 圖片](https://vscodevim.gallerycdn.vsassets.io/extensions/vscodevim/vim/1.16.0/1595264896849/Microsoft.VisualStudio.Services.Icons.Default =100x)
[Vim](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)
提供替代滑鼠編輯功能的工具
藉此提高打字編輯效率
可以參考我的 [vim自學筆記](https://hackmd.io/@chiisen/By5goBrbv)

---



---

# 記憶體優化

search.followSymlinks 設為 false
![截圖](https://i.imgur.com/U143cxH.png)
git.enabled: false
git.autorefresh: false

---

:::info
禁用
Gulp Tasks、**CSS Peek**(有安裝但停用了)、**HTML CSS Support**(有安裝但停用了)
這三個插件
:::

---

# 效能優化
按下 Ctrl+, 進入「設定」
點擊右上圖示「開啟設定（JSON）」
打開 settings.json 
```json=
// 不渲染字體
"editor.minimap.renderCharacters": false
// 關閉右邊小地圖
"editor.minimap.enabled": false
```
個人選「不渲染字體」反正字太小也看不到
```json=
// 關閉平滑滾動
"editor.smoothScrolling": false
// 關閉光標平滑滾動
"editor.cursorSmoothCaretAnimation": false
```
上面這些不太會影響到程式撰寫
參考下面網路文章還能做進階優化
[如何加快VS Code的启动以及运行速度](https://jw1.dev/2019/11/14/a02.html)

---

# 參考資料  
[Visual Studio Code 必裝套件(extensions)](https://blog.typeart.cc/visual-studio-code-recommend-extensions/)
[小克的 Visual Studio Code 必裝擴充套件（Extensions）私藏推薦](https://blog.goodjack.tw/2018/03/visual-studio-code-extensions.html)
[[Day00] 網頁設計師會用到的VSCODE與常用套件](http://blog.lokiui.com/2019/10/day0-vscode.html)
[Visual Studio Code Remote - WSL 安裝教學](https://blog.jaycetyle.com/2019/07/vscode-remote-wsl/)
[【分享】每個 Web 開發者在 2021 年必須擁有 15 個 VSCode 擴充套件](https://www.it145.com/9/79042.html)

---

# 強烈推薦
[VSCode 安裝 Cascadia Code](https://hackmd.io/@sam-liaw/rJl6tLfQI)
[vscode 調整整體字型大小](https://hackmd.io/@chiisen/Sy2BXZ4j8)
[Settings Sync 同步 VSCode 擴充套件](https://hackmd.io/@chiisen/BkSDGYriI)
