简介
vscode-emmet-helper 是一个针对 Visual Studio Code 编辑器的 npm 包，它提供了 Emmet 缩写的代码帮助，能够显著提高前端开发的效率。
Emmet 是一个强大的代码缩写工具，能够将较长的 HTML、CSS、XML 和 XSLT 代码片段转换成简短的、易于输入的缩写形式。通过在 VS Code 中安装并使用 vscode-emmet-helper，你可以在代码编辑和自动生成方面得到更多的支持。
安装
要安装 vscode-emmet-helper，你需要先安装 Node.js>12.x 和 npm。完成之后，在终端中执行以下命令安装 vscode-emmet-helper：
--- ------- -- -------------------
使用
模板缩写
在编辑器中输入 “!”（感叹号）或 “html:5”（冒号后包含数字的其他选项），按下 Tab 键，可以自动生成一个 HTML5 模板。例如：
----
将生成：
--------- ----- ----- ---------- ------ ----- ---------------- --------------- ------- ------ ------- -------
标签缩写
输入标签名称和 “>”（大于号），然后再次按下 Tab 键，将生成包含子元素的标签以及对应的结束标签。例如：
----------------
将生成：
-----
----
------ -----------------
------ -----------------
------ -----------------
-----
------自定义属性
要添加自定义属性，将属性名称添加到标签名称后面并加上“{}”（花括号）。例如：
-------------------------
将生成：
-- ------- ------------------------
嵌套缩写
有时需要在模板中嵌入 CSS 或 JavaScript 代码。在这种情况下，可以使用“style”或“script”标签里的一个缩写格式。例如：
-------------------------
将生成：
------ ---------------- --------
编辑器中的配置
vscode-emmet-helper 可以通过编辑器中的设置进行配置。要访问设置，可以单击 VS Code 底部状态栏中的“设置”按钮，或使用 Command Palette（Command+Shift+P 或 Control+Shift+P，然后输入“Settings”）。
Emmet 选项
在 “Settings” 窗口中，你可以找到 “Emmet” 选项，并进行自定义。可以配置以下项目：
- useNewEmmet: 如果启用，将使用新版 Emmet 引擎
- showSuggestionsAsSnippets: 将 Emmet 提示显示为代码片段
- showExpandedAbbreviation: 在编辑器中展开缩写
- showErrorMessages: 如果启用，将显示有关 Emmet 错误的详细信息
- excludeLanguages: 不允许在其中使用 Emmet 的语言
vscode-emmet-helper 选项
vscode-emmet-helper 还提供了一些可在 VS Code 资源管理器中操作的选项。可以通过右键单击当前项目 和 查看 VS Code 命令面板中的“Emmet Helper：Options”命令访问这些选项。
总结
通过使用 vscode-emmet-helper，能够在快速编写 HTML 和 CSS 代码时得到很大的帮助。通过上面提到的模板、标签缩写等功能，我们能够快速生成代码框架并在一定程度上减少错误率。相信熟练运用这些基础缩写后，越来越多的时间带来的是代码编写的愉悦和得心应手。
终端安装方式：
--- ------- -- -------------------
直接安装方式：
在 VS Code 插件商店搜索并安装 vscode-emmet-helper。
至此，这篇 vscode-emmet-helper 的使用教程就结束了。希望这篇文章对你有所帮助。预祝大家在前端开发道路上越来越好！
附文
以下代码仅供示例, 并不能执行
--------- -----
----- ----------
------
----- ----------------
-------------------
-------
---- -
------- --
-------- --
-
--- -
----------------- -----
------ -----
-------- -----
--------------- ----
------------ -------
------- -----
-
----- -
------------ ------ -----------
---------- -----
------------ -----
-
----- -
---------------- -----
------- --
-------- --
-------- -----
--------------- ----
-
---------- -
------- - -----
---------------- -----
------ -----
---------- -----
------------ ------ -----------
-
---------------- -
------ -----
-
---------- -
------- -----
-
----- -
----------------- --------
-------------- ----
-------- -----
-------------- -----
-
----------- -
------------ ------ -----------
---------- -----
------- - - ---- --
-
---------- -
------------ ------ -----------
---------- -----
------- --
-
------ -
----------------- -----
------ -----
-------- -----
--------------- ----
------------ -------
------- -----
------------ ------ -----------
---------------- -------
-
------ - -
------ -----
---------------- -----
-
--------
-------
------
-----
---- --------------- ----------
--- -------------
------ -------- -----------------------------
------ -------- -----------------------------
------ -------- -------------------------------
------ -------- -------------------------------
-----
------
---- ------------------
---- -------------
---- ------------------------------
---- ------------------
----------------------------
----------------------------
----------------------------
----------------------------
------
------
---- -------------
---- ------------------------------
---- ------------------
----------------------------
----------------------------
----------------------------
----------------------------
------
------
---- -------------
---- ------------------------------
---- ------------------
----------------------------
----------------------------
----------------------------
----------------------------
------
------
------
--------
-- -----------------
-------------------------
-- -----------------
---------
-------
-------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedae8fb5cbfe1ea0610e6b