---
# System prepended metadata

title: VSCode 實用插件

---


[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）

