如何为<picture>内的<source>图片自动加宽高？求VSCode快捷方式/扩展

方案1：使用支持标签的第三方扩展 #

• 安装Image Dimensions扩展：它能自动检测图片文件的尺寸，不仅支持普通<img>，还能识别<picture>内的<source>标签，通过右键菜单或自定义快捷键快速为其添加width和height属性。
• 使用方式：选中<source>标签srcset属性对应的图片路径，右键选择"Add Image Dimensions"，或在VSCode快捷键设置中为该命令绑定自定义触发键。

方案2：扩展Emmet的图片标签识别范围 #

VSCode自带的Emmet默认仅针对<img>标签更新尺寸，可通过配置让它支持<source>：

1. 打开设置（CMD + ,），搜索"Emmet: Preferences"，点击"编辑settings.json"。
2. 添加以下配置：

"emmet.preferences": {
  "filters.img": "img,source"
}

3. 重启VSCode后，尝试执行CMD + Shift + P → "Emmet: Update Image Size"，此时Emmet会识别<source>标签并更新对应图片的宽高属性。

方案3：自定义代码片段快速补全 #

若上述方法仍有局限，可创建HTML代码片段简化带尺寸的<source>编写：

1. 打开用户代码片段（CMD + Shift + P → "Configure User Snippets" → 选择html.json）。
2. 添加以下片段：

"Source with dimensions": {
  "prefix": "source-dim",
  "body": [
    "<source srcset=\"$1\" width=\"$2\" height=\"$3\" $4>"
  ],
  "description": "Source tag with width/height placeholders"
}

使用时输入source-dim即可补全模板，再配合图片查看工具填入实际宽高数值。

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