# [VS Code] Extensions

###### tags: `Visual Studio Code`

## 外觀樣式
* [Chinese (Traditional) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant)：VS Code 的中文 (繁體) 語言套件
* [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)：主題樣式
* [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)：資料夾、檔案的 icon
* [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)：色碼文字的背景顯示該色碼的顏色

## 檢查
* [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)：檢查英文拼字
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## 假資料
* [Chinese Lorem](https://marketplace.visualstudio.com/items?itemName=KevinYang.ctlorem)：產生繁體中文 lorem ipsum
* [Fake Image Snippet Collection](https://marketplace.visualstudio.com/items?itemName=yoyoys.fake-img-snippet-collection)：產生假圖

## Vue
* [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite)
* [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)：原名為 "Volar Language Features (Volar)"，[2.0.0 (2024/3/2) 改名](https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md#200-202432)
* [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)：Vue 2。開發 Vue 3 專案時記得停用
* [~~TypeScript Vue Plugin (Volar)~~](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)：[2.0.0 (2024/3/2) deprecated](https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md#200-202432)

## Bootstrap
* [Bootstrap 5 Quick Snippets](https://marketplace.visualstudio.com/items?itemName=AnbuselvanRocky.bootstrap5-vscode)
* [Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets](https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode)
* [Bootstrap 3 Snippets](https://marketplace.visualstudio.com/items?itemName=wcwhitehead.bootstrap-3-snippets)

## 檢視畫面、檔案
* [Browse Lite](https://marketplace.visualstudio.com/items?itemName=antfu.browse-lite)：VS Code 中的嵌入瀏覽器
* [Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)：在 VS Code 中看 Figma 設計稿
* [Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)：預覽圖檔

## 其他
* [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
* [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)：即時檢視網頁
* [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)：自動帶出路徑、檔案名稱
* [Sass (.sass only)](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)：支援 Sass 語法
* [i18n Ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)：多語系，顯示對應的語言的內容
* [jQuery Code Snippets](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)
* [Autoprefixer](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer)

---

:::info
建立日期：2020-11-12
更新日期：2024-03-16
:::