Emmet语法及配合vscode使用

Emmet语法及配合vscode使用

---

emmet语法能帮助我们快速的编写html,是我们的工作事半功倍。以下将介绍emmet的语法及如何配合VScode编辑使用。希望对你有所帮助。

• emmet语法

1. 快速生成html初始结构

   输入英文！ 点击tab生成html初始结构
   

2. 生成带有id和class的标签

   div#id
   =><div id="id"></div> 
   div.class
   div#class
   =><div class="class"></div>
   

3. 生成具有层级的标签结构

   div>ul>li
   <div><ul><li></li></ul></div>
   
   div>ul>li
   <div></div>
   <ul></ul>
   <li></li>
   
   div>ul>li+div
   <div>
   <ul>
   <li></li>
   </ul>
   <div></div>
   </div>
   

4. 生成重复的标签

   div*3
   <div></div>
   <div></div>
   <div></div>
   

5. 对标签进行分组

   div>(ul>li>a)+div>p
   <div>
   <ul>
   <li><a></a></li>
   </ul>
   <div>
   <p></p>
   </div>
   </div>
   

6. 生成带有属性的标签

   a[href=’XXX’ name=‘uuu’]
   <a href='XXX' name='uuu'></a> 
   
   

• vscode使用

1. 现在下载插件Mithril Emmet
   

2. 配置setting.json

  "liveServer.settings.donotShowInfoMsg": true,
  // "editor.quickSuggestions": true,
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": true