iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

不用去柬埔寨也能活摘 Vue系列 第 3

[Vue] Day3 工具:VS Code 前端套件介紹

  • 分享至 

  • xImage
  •  

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

套件

為什麼需要「套件」?

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

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

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


Vetur

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

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

Live Server

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

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

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

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

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

Prettier

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

Chinese (Traditional) Language Pack for Visual Studio Code

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

Code Spell Checker

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

例如這樣!!!

是不是非常實用呢 (*≧ω≦)

Better Comment

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

indent-rainbow

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

Bracket Pair Colorizer

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

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

Path Intellisense

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

Lorem ipsum

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

vscode-icons

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

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

這樣是不是就可以滿足想要網頁和打 Code 時都要美美的心願呢
/images/emoticon/emoticon07.gif

favorites

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

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


那今天對於前端好用套件,就到這邊告一段落拉,感謝大家的觀看
如果有好用的套件也請各位大大不吝嗇補充給小妹我!

明天就會跟大家一起進入 Vue 了!再請各位敬請期待了 ~ 掰掰,那我們明天見囉
/images/emoticon/emoticon29.gif


上一篇
[Vue] Day2 工具:VS Code 安裝及簡打
下一篇
[Vue] Day4 前端框架介紹
系列文
不用去柬埔寨也能活摘 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言