如何在VS Code中一行生成React Router DOM多动态路由<Link>元素

正确的Emmet代码 #

直接在VS Code中输入以下代码，按Tab键即可生成符合预期的内容：

Link*5[to={`\${ROUTES.CARS}/$`}]{Car $}

代码解析 #

• Link*5：生成5个<Link>标签
• [to={${ROUTES.CARS}/$}]：
  • 用\$转义模板字符串里的$，避免Emmet将其识别为序号计数器，保留${ROUTES.CARS}的完整结构
  • 末尾的$作为Emmet的序号变量，自动生成1-5的数字
• {Car $}：将Car 1到Car 5作为<Link>标签的内部文本，而非生成单独的<Car>标签

生成结果 #

执行后会得到你期望的格式：

<Link to={`${ROUTES.CARS}/1`}>Car 1</Link>
<Link to={`${ROUTES.CARS}/2`}>Car 2</Link>
<Link to={`${ROUTES.CARS}/3`}>Car 3</Link>
<Link to={`${ROUTES.CARS}/4`}>Car 4</Link>
<Link to={`${ROUTES.CARS}/5`}>Car 5</Link>

原写法的问题 #

1. 属性中的${ROUTES.CARS}没有转义$，Emmet把$当成序号标记解析，导致最终变成ROUTES.CARS
2. Car{$}的写法不符合Emmet语法，Emmet会将其解析为生成<Car>标签包裹序号，而非作为<Link>的内部文本

内容的提问来源于stack exchange，提问作者user19991216