[TOC] ## **美化** ## ### [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)｜icon ### 從資料夾到檔案都有不同的icon替換 ![Material Icon Theme](https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/images/fileIcons.png) ### [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)｜icon ### 比Material Icon還要簡潔一點 ![vscode-icons](https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/images/screenshot.gif) ### [vscode-pets](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets)｜小寵物 ### 可以在VSCode養小寵物XD ![vscode-pets](https://github.com/tonybaloney/vscode-pets/raw/master/docs/source/_static/screenshot.gif) ## **效率** ## ### [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)｜AI預判補齊 ### 插件可以預判接下來可能要輸入的程式碼，加快開發的速度 ![Tabnine](https://raw.githubusercontent.com/codota/tabnine-vscode/master/assets/completions-main.gif) ### [IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)｜預判補齊 ### 跟Tabnine可以預判接下來要輸入的程式碼，但是目前只支持Python、JavaScript等部分語言(沒有PHP) ![IntelliCode](https://aka.ms/IntelliCodeUsageExamplesv2) ### Code Spell Checker｜檢查拼字 ### 拼字錯誤時會有提示 ![Code Spell Checker](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/main/images/suggestions.gif) ### [Better Comment](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)｜註解 ### 給註解上色 ![Better Comment](https://github.com/aaron-bond/better-comments/raw/HEAD/images/better-comments.PNG) ### [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)｜即時運行程式碼 ### 可以直接在vscode裡運行程式碼，支援多種語言 ![Code Runner](https://github.com/formulahendry/vscode-code-runner/raw/HEAD/images/usage.gif) ## **其他** ## ### [Excel Viewer](https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer)｜預覽EXCEL檔案 ### 在VSCode裡打開EXCEL檔案 ![Excel Viewer](https://github.com/wijmo/gc-excelviewer/raw/HEAD/img/csv-preview-4.gif) ### [codesnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)｜程式碼截圖 ### 另一個截圖程式碼的插件Polacode已經沒有再更新，因此選擇了codesnap 方便的是這個插件除了存成圖片還可以直接複製 ![codesnap](https://raw.githubusercontent.com/kufii/CodeSnap/master/examples/monokai_fira-code.png) ## **HTML** ## ### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)｜自動調整標籤名稱 ### 更改html標籤的時候會自動更改尾籤 ![Auto Rename Tag](https://github.com/formulahendry/vscode-auto-rename-tag/raw/HEAD/images/usage.gif) ### [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)｜即時預覽 ### 可以直接在vscode裡預覽網頁 ![Live Server](https://github.com/ritwickdey/vscode-live-server/raw/HEAD/images/Screenshot/vscode-live-server-animated-demo.gif) ## **JavaScript** ## ### [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)｜格式化程式碼 ### 針對部分前端語言做格式化 快捷鍵 Option + Shift + F（Mac）或者 Alt + Shift + F（Windows） ## **PHP** ## ### [PHP DocBlocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker)｜註解 ### 自動完成DocBlocker（Tabnine也可做到） ### [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)｜格式化程式碼 ### 快捷鍵 Option + Shift + F（Mac）或者 Alt + Shift + F（Windows）