使用Ctrl+Shift+F输入标签或属性搜索，结合正则如<spans+[^>]*id=精准匹配，限定*.html等文件类型提升效率。

在 vscode 中全局搜索 HTML 标签及其属性，可以通过内置的搜索功能快速实现。掌握正确的方法能大幅提升前端开发效率。

使用快捷键打开全局搜索

按下 Ctrl + Shift + F（windows/linux）或 Cmd + Shift + F（Mac）打开全局搜索面板。在这个输入框中可以直接输入 HTML 标签名或属性进行查找。

• 搜索所有 <div> 标签：输入 <div 或 <div
• 查找包含某个属性的标签：例如搜索 class= 或 data-testid
• 精确匹配标签结构：使用正则可增强搜索能力（见下文）

结合正则表达式精准匹配

启用正则搜索可以更准确地定位特定 HTML 结构。点击搜索框右侧的 .* 按钮开启正则模式。

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

30

查看详情

• 查找所有带有 id 属性的 span 标签：
  <spans+[^>]*id=
• 搜索闭合或自闭合的 img 标签：
  <imgb[^>]*>
• 查找包含特定类名的 div：
  <div[^>]*class=["'][^"']*my-class

限定文件类型提升效率

如果只想在 HTML 或特定框架文件中搜索，可在“文件包括”栏限制范围。

立即学习“前端免费学习笔记（深入）”；

• 只搜索 .html 文件：在“文件包括”输入 *.html
• 搜索 vue 或 jsX 文件中的标签：使用 *.vue 或 *.jsx
• 排除 node_modules：默认已排除，也可手动添加 !**/node_modules

基本上就这些。熟练使用全局搜索配合正则，能快速定位项目中任意 HTML 标签和属性，不复杂但容易忽略细节。