使ast-grep-vscode 识别Vue组件

当你尝试在 VSCode 中使用 ast-grep 搜索 .vue 文件里的代码时，可能会发现空手而归。这是因为 Vue 单文件组件（SFC）是一种多语言文档：它混合了 HTML (template)、JS/TS (script) 和 CSS/SCSS (style)。

ast-grep 默认仅在识别出的单一语言文件中工作。要让它看懂 Vue，我们需要通过 sgconfig.yml 配置语言映射（Mapping）与语言注入（Injection）。

---

方案 A：轻量级映射（适合纯 JS 项目）

如果你的项目主要是 JavaScript，最简单的方法是将 .vue 文件视为 HTML。由于 ast-grep 内置了 HTML 对 JS/CSS 的注入逻辑，这种方式几乎"开箱即用"。

1. 配置 sgconfig.yml

在项目根目录创建或修改配置文件：

languageGlobs:
  html: ['*.vue'] # 将 .vue 文件关联到 html 解析器

2. 使用方法

在 VSCode 命令面板运行 ast-grep: Search Pattern，直接输入 JS 模式即可：

• Pattern 示例： import $X from '$PATH'

局限性： 这种方案对 <script lang="ts"> 或复杂的 <script setup> 支持有限，适合简单的 JS 逻辑搜索。

---

方案 B：完整注入方案（支持 TS、SCSS 与 Setup）

为了支持 TypeScript 和 SCSS，我们需要明确告知 ast-grep 如何解析 <script> 和 <style> 标签内的"子语言"。

1. 核心配置：语言注入

在 sgconfig.yml 中定义注入规则，这能精准识别 lang 属性并应用对应的解析器：

languageInjections:
  # 将 <template> 内容注入为 html
  - hostLanguage: vue
    rule:
      pattern: <template>$CONTENT</template>
    injected: html

  # 将带 lang="ts" 的 <script> 注入为 typescript
  - hostLanguage: vue
    rule:
      pattern: <script $$$ lang="ts" $$$>$CONTENT</script>
    injected: typescript

  # 将常规 <script> 注入为 javascript
  - hostLanguage: vue
    rule:
      pattern: <script $$$>$CONTENT</script>
    injected: javascript

  # 将带 lang="scss" 的 <style> 注入为 scss
  - hostLanguage: vue
    rule:
      pattern: <style $$$ lang="scss" $$$>$CONTENT</style>
    injected: scss

2. 自定义语言支持 (Tree-sitter)

为了让上面的 hostLanguage: vue 生效，建议引入专门的 Vue 解析器。你需要构建并在 sgconfig.yml 中注册：

customLanguages:
  vue:
    libraryPath: .tree-sitter/vue.so
    extensions: [vue]
  scss:
    libraryPath: .tree-sitter/scss.so
    extensions: [scss]

注意： .so (或 macOS 的 .dylib) 文件需要通过 tree-sitter-cli 自行构建。建议将其放入 .tree-sitter/ 目录并加入 .gitignore。

---

常见坑点与排查

• 配置生效范围： 确保 sgconfig.yml 位于 VSCode 打开的工作区根目录，否则扩展可能无法加载规则。
• 通配符权重： 在注入规则中使用 $$$（通配符）来覆盖 <script> 标签上的其他属性（如 setup 或 scoped）。
• 语言一致性： 如果你的查询规则定义为 language: typescript，那么它只会命中被注入为 typescript 的区域。
• 重启服务： 修改配置后，建议在 VSCode 中执行 ast-grep.restartLanguageServer 以确保最新配置生效。

---

总结

通过合理的语言注入配置，ast-grep 可以从一个简单的搜索工具进化为理解 Vue 组件结构的强力助手。无论是清理过时的 API，还是大规模重构组件逻辑，都能游刃有余。