Day 16 | vscode html排版
前言延續昨天的主題,今天將介紹第二篇語言的應用,那當然要找HTML的好夥伴囉:CSS。IntelliSense是的,基本上使用VSCode開發任何語言,一定會有這個功能。而CSS跟HTML一樣,支援是內建的,不用下載語言包。Emmet是的,Emmet支援CSS的部分,vscode完美地實踐。這邊舉幾個例子:/*輸入*/d:f/*轉化成*/display:flex;其他語法,請參照官方文件(連結[1])。排版,FormattingCSS的部分vscode沒有預設排版的功能,如果按下排版的快捷鍵(Windows:Ctrl+K,Ctrl+F;macOS:⌘K,⌘F),會告知沒有對應的功能:因此需要Extension的幫忙,這邊推薦一...
前言延續昨天的主題,今天將介紹第二篇語言的應用,那當然要找 HTML 的好夥伴囉:CSS。
IntelliSense是的,基本上使用 VS Code 開發任何語言,一定會有這個功能。而 CSS 跟 HTML 一樣,支援是內建的,不用下載語言包。
Emmet是的,Emmet 支援 CSS 的部分,vs code 完美地實踐。這邊舉幾個例子:
/* 輸入 */ d:f /* 轉化成 */ display: flex;其他語法,請參照官方文件(連結[1])。
排版,FormattingCSS 的部分 vs code 沒有預設排版的功能,如果按下排版的快捷鍵(Windows: Ctrl + K, Ctrl + F;macOS: ⌘K, ⌘F),會告知沒有對應的功能:
因此需要 Extension 的幫忙,這邊推薦一個擁有不錯下載數的 extension:
顏色預覽輸入的顏色代碼,vs code 會自動在添增預覽的小方格,提供開發者快速了解輸入的代碼將轉換成什麼顏色。
除此之外,可以快速調整顏色,將游標移動到顏色帶馬上,等待 1 秒,調色盤就會出現了!使用滑鼠調整顏色、透明度,vs code 會立即將新的顏色轉化成對應的代碼。
不得不說,對工程師而言,可以直接修改、預覽,能省下的時間將會是十分驚人的!
hoverVS Code 十分擅長地運用 hover,在 CSS 也沒有例外。除了上述提到 顏色預覽 之外,還可以游標移動到 選擇器 上,將提供預覽,告知符合選擇器的 HTML 結構。
接下來推薦兩個插件給開發 CSS 的工程師們。
IntelliSense for CSS class names in HTML連結[2]
在昨天 Day 15: 使用 VS Code 來開發 HTML[3] 有介紹過,因此不重複贅述。
CSS Peek連結[4]
在 Day 05: 操作上總是有些小秘訣的[5] 提到,vs code 有個...