App下載

vscode怎么編寫(xiě)html?花式編寫(xiě)HTML代碼!

猿友 2021-06-17 17:52:07 瀏覽數(shù) (5342)
反饋

很多小伙伴可能閱讀過(guò)小編的這篇文章:強(qiáng)大的文本編輯器:VSCode介紹(沒(méi)讀過(guò)也不要緊,現(xiàn)在讀也來(lái)得及),對(duì)VSCode有了想法,今天小編就來(lái)告訴各位小伙伴小編是怎么用VSCode編寫(xiě)HTML的吧。

閱前須知

VSCode提供中文支持,但這需要安裝插件來(lái)實(shí)現(xiàn),可以參考這篇文章來(lái)進(jìn)行漢化配置。

VSCode插件推薦-中文插件

新建文件/文件夾

這一步小編通常不用VSCode來(lái)做,通常使用操作系統(tǒng)直接新建(VSCode頁(yè)面沒(méi)有直接新建文件夾的功能,只有在文件夾中才能新建文件夾,當(dāng)然如果使用一些插件比如maven或者git 的克隆存儲(chǔ)庫(kù)也可以新建文件夾)。

新建文件

VSCode在新建文件的時(shí)候要指定后綴名,HTML需要指定?.hmtl?后綴,css需要指定 ?.css?后綴。

代碼自動(dòng)補(bǔ)全

VSCode提供了代碼補(bǔ)全功能,包括但不限于html,css,js等編程語(yǔ)言的代碼補(bǔ)全。如下圖所示,在還沒(méi)完全輸入代碼的時(shí)候編輯器會(huì)給出可能的選項(xiàng),點(diǎn)擊對(duì)應(yīng)的選項(xiàng)可以生成完整的對(duì)應(yīng)標(biāo)簽或結(jié)構(gòu)。


分頁(yè)

VSCode提供了分頁(yè)的功能,可以在編輯器內(nèi)打開(kāi)兩個(gè)文件,這樣方便了html與css的調(diào)試(方便css根據(jù)HTML結(jié)構(gòu)定制選擇器)。

分頁(yè)

emmet插件支持

VSCode提供了emmet插件的內(nèi)置支持,可以通過(guò)小編的這篇文章進(jìn)行了解:VSCode插件推薦-html快速生成插件-emmet。

更多好用的插件

小編整理了一些前端開(kāi)發(fā)可以用得到的插件,讀者可以按需取用:

VSCode插件推薦-html實(shí)時(shí)加載插件-live server

VSCode插件推薦-VSCode內(nèi)嵌瀏覽器插件-Browser Preview

小結(jié)

以上就是小編整理的VSCode怎么編寫(xiě)HTML代碼的文章內(nèi)容,更多優(yōu)質(zhì)前端課程資源,盡在W3C前端微課


1 人點(diǎn)贊