Eslint support for htmx

[pacifiquem]

It would be great if we had eslint support for htmx, maybe we'll need a plugin or whatever which can solve this problem!

[rajasegar]

what kind of rules you want to enforce with eslint, can you please give me an example

[pacifiquem]

Sure @rajasegar

Here are some potential areas to focus on:

1. htmx-Specific Directives and Syntax:

• Validation of htmx attributes: Rules to ensure proper syntax and usage of specific htmx attributes like hx-get, hx-post, and hx-target. This can help prevent runtime errors and improve code clarity.
• Linting of htmx components: Dedicated rules for checking the structure and content of htmx components, including component names, attributes, and child elements. This can promote consistency and maintainability.
• Accessibility considerations for htmx interactions: Rules to ensure htmx interactions comply with accessibility best practices, like keyboard navigation and screen reader compatibility.
• Performance optimization: Rules to identify potential performance bottlenecks in htmx code, such as unnecessary DOM manipulations or inefficient data fetching.

2. Extending Existing Rules for htmx Context:

• Adapting no-unused-vars and no-undef to htmx context: These rules can be tweaked to account for htmx's dynamic loading and data fetching behaviors, avoiding false positives.
• Enhancing import/no-unresolved rules for htmx components: Rules can be customized to recognize and handle htmx components loaded dynamically through server responses.
• Expanding stylistic rules for htmx code: Rules for indentation, spacing, and naming conventions can be tailored to better align with common htmx practices.

[rajasegar]

This is a great start, but I would like to stress one point. Even though we are talking mostly about HTML, we are not directly writing it in .html files, so different view engines / template engines for different frameworks and languages use a different parser to have them compiled. If we are talking about eslint, I can easily visualize JavaScript, but HTML is kind of fuzzy for me. To make this work shouldn't we need a common AST spec for HTMX? Because as per my knowledge eslint mostly works on AST structure of the code, but this is definitely a good problem to solve, I would like to pitch in...

[pacifiquem]

Sure @rajasegar, we've got the same point, I think to make this work we'll need a common AST spec for HTMX. I'm still doing research about this, I'll update you once I get up to anything!

[alexpetros]

This is not something we're working on or plan to support ourselves. As @rajasegar points out—it also doesn't make a lot of sense as an eslint config, since htmx gets written in lots of stuff. Definitely let us know if you do though!