---
title: 美化 VS Code
tags: 網頁組
---

# 美化 VS Code - 前言

[上一篇教學](/-jez-zG5QE-5B577WxVm6Q)中，我們安裝了 VS Code 以及一些實用的插件，這篇教學將會分享我自己使用了那些插件來美化 VS Code。

VS Code 作為一個開發工具，時常都會用到，當然是長得越好看越好❤。

# 本節目標

- 把 VS Code 變得更順眼

# 主題

## [Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)

安裝完成後，可以在在套件頁面點選 Set Color Theme，也可以透過左下角的齒輪開啟選單，點選 Color Theme (色彩佈景主題)或是使用快捷鍵 Ctrl + K + T 打開
打開後可透過鍵盤的上下鍵，或是使用滑鼠點擊，即可更換主題

假如不喜歡我的這款主題，你也可以自己尋找其他主題安裝，更換方式就跟上面一樣

# ICON

## [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

安裝完成後，可以在在套件頁面點選 Set File Icon Theme，或是可以透過左下角的齒輪打開選單，點選 File Icon Theme 更換，

# 額外推薦

## [background](https://marketplace.visualstudio.com/items?itemName=shalldie.background)
- 可以在背景設定一張或多張喜歡的圖片

### 設定
點選齒輪後，點選 Extension Settings 會進到設定頁面

此處可進行簡單的設定，假如要進行詳細設定的話，可以點選 Edit in settings.json

在官網也有詳細的介紹

範例 in settings.json

"background.useDefault": false,
"background.customImages": [
  "放入你的圖片的網址或是位置"
],
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"width": "100%",
"height": "100%",
"z-index": "99999",
"background.repeat": "no-repeat",
"background-size": "100%,100%", 
"opacity": 0.15
},
"background.useFront": true,

| Name | Type | Description |
| -------- | -------- | -------- |
| background.enabled | Boolean | 插件是否啟用</br>Enable or disable this plugin |
| background.useDefault | Boolean | 是否使用默認圖片</br>Whether or not to use default images |
| background.customImages | Array<String> | 自定義圖片</br>Add your custom images |
| background.style | Object | 自定義樣式</br>Customize style |
| background.styles | Array<Object>| 每個圖片的自定義樣式</br>Add custom Style for individual image. |
| background.useFront | Boolean | 前景圖/背景圖(在程式碼上方還是下方)</br>Set the image to front or back of your code |
| background.loop | Boolean | 是否循環(重複顯示圖片)</br>loop mode, may repeat your images |

---

這篇的內容就這樣，只是簡單介紹一下我自己有裝的插件，你也能夠在網路上尋找其他的設定，讓自己的 VS Code 更好看，畢竟作為一款生產工具，讓他更賞心悅目一點，一定不是壞事。