Emmet 使用与技术文档

Emmet 是一个为网页开发者设计的工具包，能够有效提升 HTML 和 CSS 代码编写的效率。通过Emmet，开发者可以输入类似于 CSS 选择器的表达式（简写），并通过简单的按键操作将其转换成代码片段。

以下为Emmet的使用和技术文档，帮助您详细了解并使用这一强大的工具。

1. 安装指南

您可以将Emmet作为常规的npm模块进行安装：

npm i emmet

2. 项目的使用说明

要将简写扩展为代码，您需要将简写传递给 emmet 模块的默认函数：

import expand from 'emmet';

console.log(expand('p>a')); // 输出: <p><a href=""></a></p>

默认情况下，Emmet扩展的是标记（markup）简写，即用于生成带有属性的嵌套元素的简写（如HTML、XML、HAML等）。如果您想扩展样式表（stylesheet）简写，您应该将 type 属性作为第二个参数传递：

import expand from 'emmet';

console.log(expand('p10', { type: 'stylesheet' })); // 输出: padding: 10px;

样式表简写与标记简写相比语法略有不同：它不支持嵌套和属性，但允许在元素名称中嵌入值。

此外，Emmet支持具有预定义片段和选项的语法：

import expand from 'emmet';

console.log(expand('p10', { syntax: 'css' })); // 输出: padding: 10px;
console.log(expand('p10', { syntax: 'stylus' })); // 输出: padding 10px

预定义的语法已经包含了 type 属性，它描述了给定的简写是标记还是样式表。但是，如果您想使用自定义语法名称，您还需要提供 type 配置选项（默认为 markup）：

import expand from 'emmet';

console.log(expand('p10', {
    syntax: 'my-custom-syntax',
    type: 'stylesheet',
    options: {
        'stylesheet.between': '__',
        'stylesheet.after': '',
    }
})); // 输出: padding__10px

您还可以传递 options 属性来调整最终的输出或启用/禁用各种功能。有关更多信息以及可用选项，请查看 src/config.ts。

3. 项目API使用文档

以下是一些基本的API使用示例：

扩展简写

import expand from 'emmet';

const expandedHtml = expand('ul>li.item$*4>a{Item $}'); // 输出: <ul><li class="item1"><a href="">Item 1</a></li>...</ul>
const expandedCss = expand('p10', { type: 'stylesheet' }); // 输出: padding: 10px;

从文本中提取简写

import expand, { extract } from 'emmet';

const source = 'Hello world ul.tabs>li';
const data = extract(source, 22); // 输出: { abbreviation: 'ul.tabs>li' }

console.log(expand(data.abbreviation)); // 输出: <ul class="tabs"><li></li></ul>

使用自定义前缀提取简写

import { extract } from 'emmet';

const source1 = '() => div';
const source2 = '() => <div';

extract(source1, source1.length); // 提取 'div' 简写
extract(source2, source2.length); // 提取 'div' 简写

extract(source1, source1.length, { prefix: '<' }); // 不匹配，'div' 简写前没有 '<' 前缀
extract(source2, source2.length, { prefix: '<' }); // 提取 'div'，因为其前有 '<' 前缀

4. 项目安装方式

请参考上文安装指南。

以上就是Emmet的使用与技术文档，希望对您有所帮助。