VS Code如何添加Emmet

简介

Emmet是一个快速、高效、易用的HTML/CSS/JS代码生成工具，其创造者是Sergey Chikuyonok。它支持快捷键、Tab补全等功能，可以大大提高开发效率。本文将介绍如何在VS Code上添加Emmet扩展。

步骤

1. 打开VS Code，点击左侧菜单栏的“扩展”。

2. 在搜索框中输入“Emmet”，并安装扩展。

   安装Emmet扩展
   
   ![img](https://user-images.githubusercontent.com/31870095/46548195-c6187780-c8d7-11e8-90e2-c1bebd53a7c6.png)
   

3. 在VS Code的设置中设置Emmet。

   a. 打开“设置”（快捷键为“Ctrl + ,”）。

   b. 搜索框中输入“Emmet”，在下拉框中选择“Edit in settings.json”。

   c. 添加以下代码。

   "emmet.includeLanguages": {
       "vue-html": "html",
       "vue": "html",
       "wxml": "html",
       "blade": "html",
       "ejs": "html",
       "erb": "html",
       "handlebars": "html",
       "hbs": "html",
       "html": "html",
       "jade": "html",
       "markdown": "html",
       "php": "html",
       "razor": "html"
   },
   "emmet.syntaxProfiles": {
       "javascript": "jsx"
   },
   "emmet.triggerExpansionOnTab": true,
   

   d. 保存并关闭。

   设置Emmet
   
   ![img](https://user-images.githubusercontent.com/31870095/46548903-be38d400-c8d9-11e8-9c2b-e0ab5d38b05e.png)
   

4. 在HTML/CSS/JS文件中使用Emmet。

   a. 输入HTML标签（如“div”），然后按下“Tab”键，即可快速生成对应的HTML代码。

   b. 输入CSS属性（如“m10”表示margin:10px），然后按下“Tab”键，即可快速生成对应的CSS代码。

   使用Emmet
   
   ![img](https://user-images.githubusercontent.com/31870095/46549015-0768f580-c8da-11e8-9564-bf7d8dfaa91f.gif)
   

结束语

本文介绍了如何在VS Code上添加Emmet扩展，并且介绍了如何在HTML/CSS/JS文件中使用Emmet。Emmet是一个非常实用的工具，可以大大提高开发效率，推荐给初学者和常用开发工具的开发者使用。