iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
1
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 3

[蛻變事實/D03] 設計師勇闖前端城-(必備工具1-1:VSCode 擴充品收集)

上一篇分享我用過的網頁編輯器歷史,
有提到目前我最熱愛使用的是「VSCode
在之前安裝擴充時也收集了各派人馬的擴充好物文,
琳瑯滿目要多少有多少~~~有些後端、有些前端.......
更有一堆有看沒懂看不懂是做什麼用的.......(呵呵)

而這篇就來分享我這隻菜鳥等級
設計闖前端的「初階者」到底是先裝了哪些好用擴充品呢?!


《HTML & CSS & SASS & SCSS 相關》

Emmet

【功能】:HTML、CSS 快速開發神器! 這已內鍵是不用裝的喔!

CSS Peek

【功能】:在HTML畫面上點擊即可轉跳至CSS設定的樣式

IntelliSense for CSS class names in HTML

【功能】:編寫HTML就忘了CSS設定的名稱? 那這款"健忘+懶人"必備工具就一定要裝啦!

Beautify

【功能】:再亂的程式碼,一鍵就變美!(格式化代码)

Live Server

【功能】:網頁存檔立即更新畫面,所見即所得唷

Live Sass Compiler(玩SASS & SCSS必裝)

【功能】:如果要玩就要裝一下這個來編譯成CSS

《視覺輔助》

VSCode Great Icons

【功能】:檔案格式前有小ICON,一看就知道是什麼檔案格式


以上,大約先分享一些擴充,
如果很有興趣可以連進我上一篇分享的文章裡,點進最下面影片聽聽別人的討論及分享,

還有一定要花時間看一下這份文件「VS Code 的常用快捷鍵
必竟熟悉了快速鍵凡事都省時很多~~~~
快速鍵有多重要???
我想設計出身的人一定非常有心得!
AI/PS,這二款工具至今我說不出快速鍵是什麼,
但手一放上鍵盤就會操作了...(好希望程式也能如此嚇人)
當你熟悉一件事,它就會化在血液裡,怎麼也忘不了一樣~~~


上一篇
[蛻變事實/D02] 設計師勇闖前端城-(必備工具1:編輯器)
下一篇
[蛻變事實/D04] 設計師勇闖前端城-(必備工具2:善用學習平台)
系列文
蛻變事實-UI設計師勇闖前端城35

尚未有邦友留言

立即登入留言