介绍
ast-grep 是一个强大的结构代码搜索工具,它利用语法树来查找源代码中的模式。这使得它比传统的基于文本的搜索工具更加准确和灵活。
ast-grep 可以很好地搜索一种单一语言的文件,但很难提取嵌入在文档中的子语言。
然而,在现代开发中,遇到多语言文档是很常见的。这些是包含用多种不同语言编写的代码的源文件。值得注意的例子包括:
- html 文件:这些文件可以在 <script> 标签内包含 javascript,在 <style> 标签内包含 <a style=’color:#f60; text-decoration:underline;’ href=”https://www.codesou.cn/” target=”_blank”>css。</script>
- javascript 文件:这些文件通常包含正则表达式、css 样式和查询语言(例如 graphql)。
- ruby 文件:这些文件可以包含heredoc 文字内的代码片段,其中heredoc 分隔符通常指示语言。
这些多语言文档可以根据父语法树进行建模,其中一个或多个注入语法树驻留在内部父树的某些节点。
ast-grep 现在支持处理语言注入的功能,允许您在另一种语言的文档中搜索用一种语言编写的代码。
这个概念和术语来自tree-sitter的语言注入,这意味着你可以注入另一种语言到语言文档中。 (顺便说一句,neovim 也接受这个术语。)
示例:在 cli 中搜索 js/css
让我们从一个简单的示例开始,使用 ast-grep 的命令行界面 (cli) 在 html 文件中搜索 javascript 和 css。
ast-grep 内置支持在 html 文件中搜索 javascript 和 css。
使用 sg run:在 html 文件中查找 css 模式
假设我们有一个如下所示的 html 文件:
<style> h1 { color: red; } </style><h1> hello world! </h1> <script> alert('hello world!') </script>
运行这个 ast-grep 命令将从 html 文件中提取匹配的 css 样式代码!
sg run -p 'color: $color'
ast-grep 输出这个漂亮的 cli 报告。
./test.html 2│ h1 { color: red; }
ast-grep 即使只提供模式而不指定模式语言也能很好地工作!
使用 sg scan:使用规则文件在 html 中查找 javascript
您还可以使用ast-grep的规则文件来搜索注入的语言。
例如,我们可以在 javascript 中警告使用警报,即使它位于 html 文件内部。
id: no-alert language: javascript severity: warning rule: pattern: alert($msg) message: prefer use appropriate custom ui instead of obtrusive alert call.
上面的规则将检测 javascript 中警报的使用。通过 sg scan 运行规则。
sg scan --rule no-alert.yml
该命令利用 ast-grep 中的内置行为来无缝处理语言注入。它将为上面的 html 文件生成以下警告消息。
warning[no-alert]: prefer use appropriate custom ui instead of obtrusive alert call. ┌─ ./test.html:8:3 │ 8 │ alert('hello world!') │ ^^^^^^^^^^^^^^^^^^^^^
语言注入如何工作?
ast-grep 采用多步骤过程来有效处理语言注入。以下是工作流程的详细分解:
-
文件发现:cli 首先通过古老的忽略板条箱发现磁盘上的文件,这是 ripgrep 引擎盖下的同一个库。
-
语言推断:ast-grep 根据文件扩展名推断每个发现文件的语言。
-
注入提取:对于包含用多种语言编写的代码的文档(例如,嵌入 js 的 html),ast-grep 提取注入的语言子区域。 目前,ast-grep 原生处理 html/js/css .
-
代码匹配:ast-grep 根据这些区域匹配指定的模式或规则。模式代码将根据注入的语言(例如 js/css)而不是父文档语言(例如 html)进行解释。
自定义语言注入:javascript 中的样式组件
您可以通过 sgconfig.yml 配置文件自定义语言注入。这允许您根据您的具体需求指定ast-grep如何处理多语言文档,而无需修改ast-grep的内置行为。
让我们看一个在 javascript 中搜索 css 代码的示例。 styled-components 是一个使用 css-in-js 设计 react 应用程序样式的库。它允许您通过标记模板文字直接在 javascript 中编写 css,将样式元素创建为 react 组件。
该示例将配置 ast-grep 来检测 styled-components 的 css。
注射配置
可以在项目配置文件 sgconfig.yml 中添加 languageinjections 部分。
languageinjections: - hostlanguage: js rule: pattern: styled.$tag`$content` injected: css
让我们分解一下配置。
-
hostlanguage:指定文档的主要语言。本例中设置为js(javascript)。
-
rule:定义ast-grep规则以识别宿主语言中的注入语言区域。
- `pattern`: the pattern matches styled components syntax where `styled` is followed by a tag (e.g., `button`, `div`) and a template literal containing css. - the rule should have a meta variable `$content` to specify the subregion of injected language. in this case, it is the content inside the template string.
- 注入:指定已识别区域内的注入语言。在本例中,它是 css。
匹配示例
考虑使用样式化组件的 jsx 文件:
import styled from 'styled-components'; const button = styled.button` background: red; color: white; padding: 10px 20px; border-radius: 3px; ` exporrt default function app() { return <button>click me</button> }
使用上述 languageinjections 配置,ast-grep 将:
- 将 styled.button 块识别为 css 区域。
- 提取模板文字中的 css 代码。
- 在此提取的区域内应用任何特定于 css 的模式搜索。
您可以使用以下命令在项目配置文件夹中的 javascript 中搜索 css:
sg -p 'background: $color' -c 2
它将产生匹配结果:
./styled.js 2│ 3│const button = styled.button` 4│ background: red; 5│ color: white; 6│ padding: 10px 20px;
使用自定义语言进行注入
最后,让我们看一个在 javascript 文件中搜索 graphql 的示例。
这证明了 ast-grep 在处理自定义语言注入方面的灵活性。
在 sgconfig.yml 中定义 graphql 自定义语言。
首先,我们需要在ast-grep中将graphql注册为自定义语言。有关更多详细信息,请参阅自定义语言参考。
customlanguages: graphql: librarypath: graphql.so # the graphql tree-sitter parser dynamic library extensions: [graphql] # graphql file extension expandochar: $ # see reference above for explanation
在 sgconfig.yml 中定义 graphql 注入。
接下来,我们需要自定义 javascript 中哪些区域应该被解析为 graphql 字符串。这类似于上面的样式组件示例。
languageinjections: - hostlanguage: js rule: pattern: graphql`$content` injected: graphql
在 javascript 中搜索 graphql
假设我们有来自 relay(一个 graphql 客户端框架)的 javascript 文件。
import react from "react" import { graphql } from "react-relay" const artistsquery = graphql` query artistquery($artistid: string!) { artist(id: $artistid) { name ...artistdescription_artist } } `
我们可以通过这个 –inline-rules 扫描来搜索 graphql 片段。
sg scan --inline-rules="{id: test, language: graphql, rule: {kind: fragment_spread}}"
输出
help[test]: ┌─ ./relay.js:8:7 │ 8 │ ...ArtistDescription_artist │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
更多可能被解锁…
按照以下步骤,您可以有效地使用 ast-grep 在同一文档中跨多种语言搜索和分析代码,增强您管理和理解复杂代码库的能力。
此功能扩展到 vue 和 svelte 等各种框架,支持在 react 服务器操作中搜索 sql,并支持 vue-vine 等新模式。
希望您喜欢这个功能!快乐的 ast grep!