## 從0開始製作VScode主題
**難度:⭐⭐&複雜度:⭐⭐⭐⭐**

只要你是VScode愛用者一定會有類似的煩惱，找不到喜歡的主題，或是覺得現在使用的主題有些設定怪怪的，沒關係，我也是這樣覺得的，所以一起來製作一個自己覺得完美的主題吧 !

### Step 1 : 開始調色

* 首先打開VScode新建一個json檔案...好吧不逗大家，一個一個對照API文件打真的會瘋掉，而且也不容易調色，所以我們今天選擇使用Theme Studio-[主題創建UI](https://themes.vscode.one/)
* 就是這個網站，然後你選擇新建主題。(會讓你選擇亮主題或按主題作為初始背景，然後就可以放心調色)
* 選擇自己要下載的主題，點選上方的雲，比方說以下是我要下載的主題(下載後會是一個json檔)。
* 接著以VScode開啟這個json檔
* 然後這個步驟就先到一段落，先處理下一步驟吧

### Step 2 : 安裝yo code
* 這邊強烈建議英文好的朋友可以參考[這個影片](https://www.youtube.com/watch?v=pGzssFNtWXw)裡面會教你安裝主題所需的文件，如果英文不好就跟我慢慢來吧，請先打開終端機，**一般會使用powershell安裝，但我當時在這邊被卡住，所以用Git bash**(只要能安裝都可以)

* 輸入指令

npm install -g yo generator-code

* 然後就讓他執行，執行完後呢輸入以下指令

yo code

* 如果你安裝成功，應該會出現以下的可愛小人
* 你可以開始回答問題了，結束問題後他會幫你創建你需要的文件

### Step 3 :編輯你的文件

* 把第一步驟的json檔案替換進他幫你生成的檔案中，請注意文件位置一定要一樣喔(檔名也要注意)，**如果真的不放心，就複製貼上，** 接著你可以按F5開始進行主題調適
* 就看到自己的主題啦，其實做到這步驟就是可以自己使用的主題了，但如果你想給朋友一起用，就繼續看下去吧。

### Step 4 :上架前奏曲
* 接著我們參考[這是VScode的官方文件](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)
* **主要分成三個部分(安裝、註冊、註冊)**

安裝vsce(一樣終端機安裝)

npm install -g @vscode/vsce

註冊[Vscode令牌](https://learn.microsoft.com/zh-tw/azure/devops/?view=azure-devops)，你會進入到這個畫面

* 確保你跟上面的選項相同，這非常重要;當然名字可以不一樣沒關係，然後記得組織一定要選擇全部，下面的選項勾Marketplace就好。
* 複製你的Taken(他會在你按Create之後出現，這步驟很重要複製好，因為它不會再出現了)

接下來，請註冊[VScode擴充管理系統](https://marketplace.visualstudio.com/)請用相同的帳號去註冊喔，然後進入以下畫面。(你們還沒有新增應該是空的)
* 點按Create publisher。

* ID比較重要，因為等一下就要使用到

### Strp 5: 打包上架

* 先用剛剛的ID登入

vsce login <publisher id>

* 接著輸入token，那一長串英文亂碼，基本上到這一步你就成功了，可以使用他的自動發布，輸入以下指令

vsce publish

* 然後你會在你的VScode管理商店頁面看到這個畫面

### ✨恭喜你完成啦✨
* 不過也有一種可能，你無法使用自動發布，那這時你可以選擇手動發布，手動發布就是將publish改成package
看到DONE就是成功打包啦
點按上方Visual Studio Code上傳你打包後生成的檔案就完成。這個方法不容易產生錯誤，我個人覺得手動的更好。

--
[桃子森林主題](https://github.com/weiting53/peachforest)

### 使用網站
[主題創建UI](https://themes.vscode.one/)
[Token獲取](https://azure.microsoft.com/zh-tw/products/devops)
[擴展商店身份註冊](https://marketplace.visualstudio.com/)

### 參考資料
[創建主題流程](https://thehelpfultipper.com/create-a-custom-visual-studio-code-theme/)
[創作主題流程影片](https://www.youtube.com/watch?v=pGzssFNtWXw)
[粉熊貓主題](https://github.com/thehelpfultipper/pink_panda_vsctheme/tree/main/.vscode)
[主題API資料](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)
[發布擴展流程](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)