iT邦幫忙

2022 iThome 鐵人賽

DAY 23
0
自我挑戰組

掌握 Master CSS 優化開發體驗系列 第 23

Day 23 - 官方 VSCode 套件 - Master CSS Language Service

  • 分享至 

  • xImage
  •  

開發者工具

Master CSS 團隊有開發屬於自己的官方 VSCode 套件 - Master CSS Language Service,不僅能優化開發體驗,更能提高生產力。

類名自動完成

舉個例子,假設想要使用 text-align: center; 這個 CSS 屬性,只要在 class 輸入 t,就會自動跳出關鍵字,此時按下 enter 就會帶入冒號 :

https://ithelp.ithome.com.tw/upload/images/20221005/20103817BEtvKrR7cO.jpg

這時候就會顯示可以應用的屬性,因此開發者不需要熟記所有的語法。

https://ithelp.ithome.com.tw/upload/images/20221005/20103817yX7qdTqpLE.jpg

非常快速的就完成了類名的編寫。

https://ithelp.ithome.com.tw/upload/images/20221005/20103817hdHPOVKM7V.jpg

類名突出顯示

這邊使用的是 Dracula Official 這款 VSCode 主題,能夠清楚地閱讀和分辨 CSS 屬性。

https://ithelp.ithome.com.tw/upload/images/20221005/20103817LVhoxniEva.jpg

預覽類名生成的 CSS 規則

將屬標懸停在類名上,可以預覽 Master CSS 生成的 CSS 規則。

https://ithelp.ithome.com.tw/upload/images/20221005/20103817cWbNpVqnIA.jpg

總結

官方推出的 VSCode 套件 - Master CSS Language Service,具有以下特色:

  • 類名自動完成
  • 類名突出顯示
  • 預覽類名生成的 CSS 規則

參考


上一篇
Day 22 - 自定義 CSS 語意類名
下一篇
Day 24 -【實戰演練】台灣旅遊景點 - 導覽列
系列文
掌握 Master CSS 優化開發體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言