#htmx #language-server #tags #template #back-end #tree-sitter #htmx-lsp

bin+lib htmx-lsp2

具有后端语言的 htmx 语言服务器

4 个版本

0.1.4 2024 年 4 月 2 日
0.1.3 2024 年 2 月 19 日
0.1.2 2023 年 12 月 16 日
0.1.1 2023 年 12 月 13 日

文本编辑器 类别中排名第 152

Download history 5/week @ 2024-05-19 13/week @ 2024-06-30 86/week @ 2024-07-28

每月下载量 86

MIT 许可协议

125KB
2.5K SLoC

HTMX-LSP logo HTMX-LSP logo
crates.io build status

结束了

安装

cargo install htmx-lsp2

配置

{ 
  "lang": "rust",
  "template_ext": "jinja",
  "templates": ["./templates"],
  "js_tags": ["./frontend"],
  "backend_tags": ["./backend"]
}

支持的语言

Go, Python, JavaScript, TypeScript, Rust

何时使用 htmx-lsp 或这个 lsp ?

如果你正在处理小型 hello world 示例 Web 应用,那么你可能不需要这个改进版的 htmx-lsp。

对于更大的项目(许多模板、许多后端路由、少数 JavaScript 模块)你应该试试这个。

htmx-lsp 和这个 lsp 的区别

后端/前端标签

标签类似于 JSDoc 注释。在某种程度上,它们充当应用程序中 htmx 部分的文档。当你到达某个 htmx 项目时很有帮助。为了理解代码库,你不断需要浏览文件或使用全局搜索来查找项目的每个部分。使用标签,你可以简单地使用“转到定义”功能来查找该属性,你就能直接到达所需位置

示例

fn example() {
  // some code ...

  // part of app that is 'connected' with htmx template
  // this is tag hx@tag1
  // ...
}
<!-- some nested html -->
<a hx-get="/some_route" hx-lsp="tag1">hello world</a>

一个元素也可以有多个标签。某些标签位于你的 Go 函数中,其他标签可以位于 JavaScript 中。这提高了 行为局部性,你不需要太多思考,只需快速阅读并采取行动。

如果你使用的是底层使用 TreeSitter 的编辑器,那么你可以在 textobjects.scm 中包含一个查询,可以将光标移动到 hx-lsp 标签

(
  (attribute_name) @attr 
  (quoted_attribute_value
    (attribute_value) @class.inside
  ) @class.around
    (#eq? @attr "hx-lsp")
)

要为你的后端语言或 JavaScript 中的标签提供语法高亮,请使用此查询(它是 注释语法highlights.scm

("text" @hint
 (#match? @hint "^(hx@)"))

这里还有一个用于模板的查询(它是 HTML 语法highlights.scm

((attribute_name) @keyword
  (quoted_attribute_value
    (attribute_value) @function
  )
  (#eq? @keyword "hx-lsp")
)

转到引用

在某些情况下,你的标签在一个模板的多个位置或位于目录树深处的多个模板中使用。为了避免使用全局搜索,只需调用标签定义上的“转到引用”,你就可以检查每个 htmx-lsp 实例。

https://github.com/uros-5/htmx-lsp2/assets/59397844/786c9312-6792-4d22-b1b8-c4b00bdc58f3

如果标签只有一个引用,那么你会直接跳转到该位置。

转到定义

https://github.com/uros-5/htmx-lsp2/assets/59397844/dc744a59-8902-44bf-9bd0-1a1d6188d4ca

转到实现

如果你的编辑器不支持 TreeSitter,你可以使用“转到实现”功能在 htmx-lsp 属性之间进行导航。当你深入到某个模板中时,搜索 htmx-lsp 属性可能会很繁琐,因此此功能可以帮助你更快地导航到目标。

https://github.com/uros-5/htmx-lsp2/assets/59397844/032c32f8-2c5f-4401-8999-2792383dc49c

TreeSitter的增量解析

htmxlsp的一个问题是它没有充分利用TreeSitter的增量解析功能。目前,在模板内部每次发生变化时,整个文件都会被TreeSitter发送和解析。第二个问题是它只接受文本编辑器发送的第一个变化。那么如果你使用多个光标并开始对文本文件进行更改会怎样呢?如果客户端只支持didChange lsp功能的增量同步呢?这个hmxlsp的分支版本旨在修复这些问题,不仅针对模板部分,还针对后端语言。

VSCode插件

它仍在开发中。目前,它可以在调试模式下使用。

依赖项

~25–37MB
~816K SLoC