昨天介紹了 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 了！再請各位敬請期待了 ~ 掰掰，那我們明天見囉
iThome鐵人賽
看影片追技術