iT邦幫忙

2021 iThome 鐵人賽

DAY 30
1
Modern Web

SASS 基礎初學三十天系列 第 30

DAY 30 好用的套件

推薦擴充套件

Color Highlight

Untitled

這邊跟大家推薦 Color Highlight 這個擴充套件,也是我在實作的時候才發現他的實用之處,當你設置關於顏色的 variable ,他在套用到 style 的地方也會同步顯示,當你要檢查顏色相關的 property 就會方便很多囉~

Untitled

h1 color 的配置也會有顏色顯示!這樣檢視修改就方便很多,不用回到原本設置 primaryColor 的那一行去看顏色

Auto Close Tag

可以自動幫你閉合 html tag,在快速寫扣的時候有個小幫手的感覺,可以加速不少!

Auto Close Tag - Visual Studio Marketplace

Auto Rename Tag

當 tag 的名稱有變時,前後的 tag 會一起幫你變動,就不用改兩次了,也是好用小幫手!

Auto Rename Tag - Visual Studio Marketplace

Bracket Pair Colorizer 2

當程式碼寫了很多行後,有時候會搞不清楚哪個 div 對應在哪個 close tag 上的情況發生,當你安裝這個套件後,就可以用顏色去區分對應的 div 區間在哪,快速找到相應的內容!

Bracket Pair Colorizer 2 - Visual Studio Marketplace

Tabnine - Code Faster with the All-Language ......

就是一款 AI 幫你寫扣的套件!

它內建的 ai 會依照你的習慣以及語法來偵測你下一行可能要寫什麼,有時候在 import 內容或是選擇 variable 的內容時挺方便的!上面的兩個 tag 系列也是他們家出的~

Tabnine - Code Faster with the All-Language AI Assistant for Code Completion, autocomplete JavaScript, Python, TypeScript, PHP, Go, Java, node.js, Ruby, C/C++, HTML/CSS, C#, Rust, SQL, Bash, Kotlin, R - Visual Studio Marketplace

以上是我覺得在編寫前端 or SASS 的套件們,大家如果也有其他不錯的套件想分享給我也可以在下方留言~

完賽感言

終於完成實作的部分,很抱歉後面越寫越大塊,前面 header 拆分的節奏感覺還不錯,但是沒想到還是塞不完後半部QQ,如果下次有再參賽會在注意節奏的!而剩下的內容我會再做調整,歡迎關注我的 GitHub <3

最後,感謝 47 找我寫鐵人賽,感謝大家有乖乖寫完,真的是太熱血了,整整一個月回家都沒在看小說而是寫扣(好累⋯⋯,呼,我現在只想回家看小說啦QQ


上一篇
DAY 29 真的是 Footer 了
系列文
SASS 基礎初學三十天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言