昨天介紹了 VS code 的下載與 VS code 的簡打，那今天就來好好介紹一下前端套件吧

為什麼需要「套件」?

可以看到我們上方的圖片當我們選擇 App.vue 檔案時，可以看到在 VS code 中並無任何的語法突出顯示，且系統也將他視為純文字，所以這時候就非常需要安裝一些前端好用的 Vue 套件，接下來就讓我來為各位介紹一下吧！

首先，我們需要先打開 VS code ，並點選下圖箭頭所指示的地方

在搜尋欄中直接搜尋套件並點選安裝，等待個幾秒鐘，即可下載完成呦 (≧▽≦)/以下就是我覺得適合前端又好用的套件拉 ~~~~ 就讓我們馬上來看看吧

Vetur 是 Vue 的一個工具包，不僅讓 Vue 的語法可以突出顯示，也提供了 Vue.js 的語言功能(例如：語法高亮、智慧感知、片段、格式)，讓我們在撰寫時可以更便利輕鬆。

而 Vetur 在維護上也處理得很好，甚至連 Vue3 Typescript 都有支援。非常推薦各位可以下載來使用！

建立即時更新的本機 server，就能在存檔後即時更新網頁，不需要反覆重整

啟動方法：首先在　Visual Studio Code　中建立一個基本的簡單頁面，並儲存成 html 檔

而第一種方法是在右下角的功能列，選取 Go Live

第二種方法則是在頁面的空白處右鍵，選擇 Open with Live Server

如果點右鍵沒反應的話，同時左下角也沒有出現 Go Live 時，有可能是尚未設定資料夾(或稱作工作區)，這時請點選左方的開啟資料夾，並設為自己放置 html 檔案的資料夾。這樣就可以操作我們剛剛介紹的方法拉!

此套件可是強迫症的救星呢 ! 不僅網頁要美美的，程式碼也要排列整齊可以透過按 shift + alt + F 的方式，讓整個程式碼重新排版，也能省去手動對齊的麻煩

中文版的 VS code，讓你英文不好也不怕！此為國際知名大廠微軟所開發的套件，有各式各樣的語系提供使用者下載使用但語系並非直接附加在檔案上，而是需要透過套件的形式進行另外安裝

接下來呢 ~ 跟各位介紹這款可以用來拯救英文單字時常拼錯友人，絕對適合你們的套件：Code Spell Checker ，可以針對程式碼主動進行英文偵測喔！

例如這樣！！！是不是非常實用呢 (*≧ω≦)

非常推薦喜歡五顏六色的各位們使用這款套件，能夠在註解上加入不同的顏色並依據自己的喜好將關鍵字進行 Highlight ，讓你的註解讓人更容易被辨識喔！

喜歡上一個套件的各位也別錯過這個，同時這也是強迫症的救星在寫結構複雜的情況下，常常對應的縮排開始亂糟糟，搞不清楚ㄌ這時候 indent-rainbow 就可以上場了!!!專門為 VS Code 的縮排補上夢幻彩虹般的色彩讓你各位可以省下找尋程式碼的時間，輕鬆幫你的程式碼配對

當我們寫到需要用多層級時，是不是時常找不到結尾的括弧？登愣！救星來惹，這時後直接去 download 我們的 Bracket Pair Colorizer他可以讓我們所有的大、中、小括弧 ( { }、[ ]、( ) ) 加上各自獨立的顏色讓我們在寫程式時也能省下找括弧的時間

但如果！安裝完此套件後還是找不到結尾的話，那可能就是你的程式碼真的是太凌亂了

在 VS Code 中是可以直接複製 workspace 下檔案的絕對路徑，但如果你需要的是相對路徑時，可以安裝此款套件，只需要在寫 code 時按下「/」就會出現資料夾或檔案讓你選擇，並且按下 Tab 後就會自動出現你選擇的資料夾或檔案，是不是相當方便呢。

寫網頁時，常常最需要的就是靈感，當你想不出文案時，先不要去蹲廁所這邊有夠非常實用的工具提供給各位，來了，就是這個！「亂數產生器」只要你按下 Ctrl +Shift + p 或 F1 後，輸入 orem ，再選擇是要單行文字還是段落按下 Enter ，就可以幫你產生隨機的文章喔，接下來只需要排版了，非常的實用呢 (*≧ω≦)

這是一款可以改變 VS Code 的主題，接下來就來看看該怎麼操作！

更換主題的方式有兩種，可以按 F1 或是 Ctrl + Shift + P之後輸入 icon 選擇「喜好設定:檔案圖示佈景主題」，就會出現有安裝過的所有佈景主題之後就能依據自己的喜好去做選擇，這樣就大功告成拉~~~ 接下來就讓大家看看成品吧

這樣是不是就可以滿足想要網頁和打 Code 時都要美美的心願呢

最後要來推薦的就是此套件拉　(｡･ω･｡)ﾉ 推薦指數 4 顆星的再寫專案的時候，光找檔案就要花一大半的時間了，這時後就，登愣 ~ favorites 出場了他可以將專案中特定的檔案或資料夾新增到我的最愛，就不用一層又一層的找到瘋掉

這邊也讓我補充一下， cmd + p 也可以快速切換到指定檔案但如果你跟我一樣金魚腦記不住全名時，就可以安裝這個套件喔，非常方便實用

那今天對於前端好用套件，就到這邊告一段落拉，感謝大家的觀看如果有好用的套件也請各位大大不吝嗇補充給小妹我！明天就會跟大家一起進入 Vue 了！再請各位敬請期待了 ~ 掰掰，那我們明天見囉