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)