一、Live Server
為了方便運(yùn)行html代碼痢站,我們可以在vscode里安裝Live Server插件乏德,安裝步驟如下:
index.html運(yùn)行效果如下:
二、Auto Rename Tag
修改標(biāo)簽的左半部分啸驯,右邊標(biāo)簽會(huì)自動(dòng)修改
三、Vetur
Vetur能快速生成Vue模板代碼
四祟峦、設(shè)置顯示語(yǔ)言
打開(kāi)vsocode,按F1
鍵罚斗,在命令窗口中輸入config
,在下拉框選項(xiàng)中選擇Configure Display Language
選擇需要顯示的語(yǔ)言,或安裝需要的語(yǔ)言包
五宅楞、vscode-icons
vscode-icons插件的作用是在vcode里顯示文件圖標(biāo)
未安裝插件前的效果
安裝插件
安裝插件后的效果
圖標(biāo)3表示css3针姿,圖標(biāo)5表示html5
六、Emmet
Emmet插件厌衙,用于生成html代碼片段距淫,vscode安裝完后,已經(jīng)內(nèi)置了該插件迅箩,不需要額外安裝溉愁。在html文件中輸入感嘆號(hào)!
,選擇感嘆號(hào)選項(xiàng)饲趋,就能快速生產(chǎn)html模板代碼
6.1 快速生成n個(gè)元素
h1*6{這是一級(jí)標(biāo)題}
6.2 快速生成h1~h6
h$*6>{這是$級(jí)標(biāo)題}
6.3 lorem生成亂數(shù)假文
lorem
lorem后面加數(shù)字拐揭,表示生成多少個(gè)單詞
lorem10
6.4 快速生成n個(gè)亂數(shù)假文
p*6>lorem
七、查找文件
快捷鍵
Ctrl + p
在搜索框中輸入要查找的文件名
八奕塑、Markdown Preview Enhanced
未安裝該插件前堂污,用vscode自帶的Markdown預(yù)覽功能
安裝Markdown Preview Enhanced插件
用插件預(yù)覽
用Markdown Preview Enhanced后,可以支持Markdown 更多的語(yǔ)法龄砰,如目錄語(yǔ)法[toc]
九盟猖、快速生成標(biāo)簽對(duì)
輸入標(biāo)簽名讨衣,按 Tab
鍵,即可快速生成標(biāo)簽對(duì)
十式镐、快速生成注釋
生成注釋的快捷鍵
Ctrl + ?
十一反镇、光標(biāo)快速到下一行
快捷鍵
Ctrl + Enter
無(wú)論光標(biāo)在當(dāng)前行的任何位置,按快捷鍵Ctrl+Enter
都能快速到下一行
十二娘汞、光標(biāo)快速到前一行
快捷鍵
Ctrl + Shit + Enter
無(wú)論光標(biāo)在當(dāng)前行的任何位置歹茶,按快捷鍵Ctrl+Shit +Enter
都能快速到前一行