如何为 emmet 创建一个简单的表生成器？答案

【问题标题】：How to create a simple table generator for emmet?如何为 emmet 创建一个简单的表生成器？
【发布时间】：2020-08-06 08:24:03
【问题描述】：

我想创建一个行为类似于 loremX 的 emmet 生成器，但要创建一个 html 表。

现在，我拥有的是创建一列的简单表 sn-p：

{
  "html": {
    "snippets": {
      "ftable": "table>(thead>tr>th)+(tbody>tr>td)"
    }
  }
}

所以每当我输入ftable 我都会得到：

<table>
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
    </table>

但我想要更多。我想做类似ftable5:

取而代之的是 5 th's/td's。

所以这个案例的emmet代码应该是：

table>(thead>tr>th*5)+(tbody>tr>td*5)

我认为我不能通过在 snipper 上的简单声明来做到这一点。我想我应该为此创建一个生成器，就像loremX 的生成器一样，但我对如何开始一无所知，老实说，我找不到太多信息。实际上让我感到惊讶的是这样的东西还不存在（或者如果存在，请告诉我），因为要生成一个 HTML 表格，您仍然需要输入那么多代码。

【问题讨论】：

标签： emmet

【解决方案1】：

我猜你的数量可能很大程度上取决于手头的工具，但只要关注vscode，它就有制表位选项https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax

假设您的 sn-p 定义如下所示（注意 $1 占位符）

    "table": {
        "scope": "html",
        "prefix": "table-n",
        "description": "Generates table with n columns",
        "body": "table>(thead>tr>th*$1)(tbody>tr>td*$1)"
    }

你通常会

输入 sn-p 前缀，如table-n
点击Enter选择sn-p
sn-p 填写
占位符的光标闪烁
输入预期的列数
点击Tab触发emmet生成
当$1 是3 时，最终结果应该是这样的

  <table>
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

【讨论】：