changed 2 years ago  
Published Linked with GitHub

VSCode 必裝套件

tags: VSCode Extensions

VSCode 必裝套件 2021 年補充

Cascadia Code 字型

VSCode 安裝 Cascadia Code

Cascadia Code 微軟釋出免費等寬字型，開源更適合程式碼編輯器和終端機

Coding 用字體推薦：Fira Code、JetBrains Mono、Consolas、與 Input Sans
JetBrains Mono 更適合閱讀程式碼的等寬字型，內建四種字重斜體可商用

Material Icon Theme

好看的 icon 主題

Power Mode

打字有特效
Power Mode 打字特效設定
記得在 喜好設定 > 設定 搜尋 powermode.enabled
開啟後才有特效

Better Comments

註解變色功能
註解變色截圖

Better Comments

TODO Highlight

TODO: 與 FIXME: 提示變色
TODO Highlight 截圖
可以自行定義關鍵字
TODO Highlight 設定畫面

❤ Todo Tree

列出 TODO
Todo Tree
Todo Tree 截圖

❤ Bookmarks

書籤功能
Bookmarks
Bookmarks 截圖

shell-format

支援 shell script 格式
shell-format

YAML

支援 YAML
YAML

Python

支援 Python
Python

Live Server Preview

Live Server Preview 截圖

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

Chinese Lorem

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

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 截圖
這個也是我個人非常偏好的 VSCode 套件之一，最主要可以增加程式碼區塊的辨識度，否則程式碼越寫越長時，其實很難辨識這是哪一個區塊的程式碼

Auto Rename Tag

Auto Rename Tag
變更標籤時，結尾標籤自動修改

Image preview

Image preview
Image preview 截圖

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

indent-rainbow

indent-rainbow
indent-rainbow 截圖
語法編輯時，使用Tab空格時顯示顏色，表語法層次性

Path Intellisense

Path Intellisense
Path Intellisense
自動偵測可用的外部連結，僅限於HTML格式下作用。

AutoFileName

AutoFileName
AutoFileName 截圖

GitLens — Git supercharged

GitLens — Git supercharged
GitLens — Git supercharged 截圖
游標所在會顯示誰簽入、時間與說明

Git Graph

Git Graph

有美美的分枝圖可以看

＃region folding for VS Code

#region folding for VS Code
＃region folding for VS Code 截圖
類似 C# 的註解方式
折疊時可以看到我們寫的註解







/* #region Main */
public static void Main(string args[])
{
   //Your code goes here
}
/* #endregion */

與





<!-- #region Body -->
<body>
</body>
<!-- #endregion -->

都可以使用

  • 使用方法：
    滑鼠選取要註解的區域
    按住 Ctrl 不放
    依序再按住 M、R
    就可以註解了
    PS.可惜VSCodium目前還不能裝
    Ctrl + P 輸入ext install regionfolder
    一樣找不到

SVG Viewer

SVG Viewer
看 SVG 的工具
PS.可惜VSCodium目前還不能裝

JavaScript (ES6) code snippets

JavaScript (ES6) code snippets
可以縮寫打出長指令（查上表，如：clg -> console.log(object)）
其實很多語言都有支援

jQuery Code Snippets

jQuery Code Snippets
同上喔
專為 jQuery 提供語法輸入

filesize

filesize
點選檔案左下會出現檔案大小
PS.可惜VSCodium目前還不能裝

Highlight Matching Tag

Highlight Matching Tag
點選 tag 結尾的 tag 字體下面會有底線
方便你知道 tag 的範圍

Highlight Line

Highlight Line
下底線出現在目前游標的位置

CSS Peek

CSS Peek
CSS Peek 截圖
滑鼠點選 id 或 class 按下 F12 就能跳到 scss 的位置了

IntelliSense for CSS class names in HTML

IntelliSense for CSS class names in HTML
IntelliSense for CSS class names in HTML 截圖
可以在 class 中列出可選的 class

Prettier - Code formatter

Prettier - Code formatter
自動排版 scss

Auto Close Tag

Auto Close Tag
自動補上 </tag>

Trailing Spaces

Trailing Spaces
程式碼後面的空白會變成紅色

Markdown Table Prettifier

Markdown Table Prettifier
Markdown 整理 Table (VSCodium 沒辦法安裝)

Vim

Vim Logo 圖片
Vim
提供替代滑鼠編輯功能的工具
藉此提高打字編輯效率
可以參考我的 vim自學筆記

記憶體優化

search.followSymlinks 設為 false
截圖
git.enabled: false
git.autorefresh: false

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

效能優化

按下 Ctrl+, 進入「設定」
點擊右上圖示「開啟設定（JSON）」
打開 settings.json





// 不渲染字體
"editor.minimap.renderCharacters": false
// 關閉右邊小地圖
"editor.minimap.enabled": false

個人選「不渲染字體」反正字太小也看不到





// 關閉平滑滾動
"editor.smoothScrolling": false
// 關閉光標平滑滾動
"editor.cursorSmoothCaretAnimation": false

上面這些不太會影響到程式撰寫
參考下面網路文章還能做進階優化
如何加快VS Code的启动以及运行速度

參考資料

Visual Studio Code 必裝套件(extensions)
小克的 Visual Studio Code 必裝擴充套件（Extensions）私藏推薦
[Day00] 網頁設計師會用到的VSCODE與常用套件
Visual Studio Code Remote - WSL 安裝教學
【分享】每個 Web 開發者在 2021 年必須擁有 15 個 VSCode 擴充套件

強烈推薦

VSCode 安裝 Cascadia Code
vscode 調整整體字型大小
Settings Sync 同步 VSCode 擴充套件

Select a repo