vscode使用emmet語法

新建文件，輸入html:5 然後摁下tab鍵，即可建立如下的html5基本結構：

emmet語法直接簡寫，常用的簡寫規則如下：

簡寫（然後使用tab鍵）描述e

e代表html標籤，即直接寫標籤名+tab鍵就快速建立標籤

e#id

快速建立帶id屬性的標籤

e.class

快速建立帶class屬性的標籤

e[attr=foo]

快速建立某個特定屬性的標籤

e快速建立包含內容foo的標籤

e>n

快速建立父子結構，n是e的子元素

e+n快速建立兄弟結構，n是e的同級元素

e^nn是e的上級元素，通常搭配e>n來使用

e*n快速建立n個的e標籤，n代表數字

e$*n

快速建立n個帶自動編號的的e元素

e>lorem

在e元素中隨機新增文字

e*n>m

等用於（e>m）*n，快速建立n個父子結構

eg:

li*3>a

div#item$.class$$*3

ul>li*6

table>thead>tr>td5^^tbody>tr>td5

emmet語法總結

生成結構的快捷鍵 tab生成html5的結構 生成id名和類名 標籤名.類名 id名 tab 沒有標籤名.類名 tab 直接就是預設生成div 生成同級元素 標籤名 標籤名 標籤名 tab 生成子類標籤 標籤名 子標籤名 子標籤名 子標籤名 tab 標籤名 子標籤名 子標籤名 子標籤名 子標籤名 如...

vs code設定支援jsx支援emmet

現在vscode中html檔案預設是支援emmet語法的，可以新建乙個html檔案，輸入html 5按tab鍵試一下，會自動生成html結構。但是中寫react的時候，中jsx語法中，輸入html標籤，按tab鍵不僅不會生成成套的html標籤，而且使用emmet的寫法也不管用。這個其實vs code...

Emmet語法規則

id指令 class指令 div test div id test div div.test div class test div 子節點指令 兄弟節點指令 上級節點 重複 分組 div ul li a div p 3 div ul li a href a li ul div p p p p p p...