昨天介紹了 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 了!再請各位敬請期待了 ~ 掰掰,那我們明天見囉