BenoitZugmeyer / eslint-plugin-html

An ESLint plugin to extract and lint scripts from HTML files.
ISC License
430 stars 51 forks source link

ESLint HTML cannot understand templates #39

Closed Arackow closed 7 years ago

Arackow commented 7 years ago

When using a template heavy language like Django, ESLint wont work on the HTML files because it sees the template markers of {{ }} and {% %} as general errors and wont lint the rest of the file. I don't know if there is a way to trick it to ignore them or not but it makes the plugin useless for templated languages. It seems like if the tags are inside quotes (as to make it seem like a string) it works but outside of quotes it breaks.

BenoitZugmeyer commented 7 years ago

Are you speaking about template markers inside or outside the <script> tag?

This plugin should work with template markers outside of the script, so if you think there is an issue about it, please provide a code snippet.

If the template markers are part of the JS script though, it will most likely fail with a parse error because the script is sent to ESLint as-is. The only sane usage I can think of is to transmit JSON-serializable data to the JS script, ex (in PHP):

<script>
var mydata = <?= json_encode($var) ?>;
// rest of the script...
</script>

I didn't test it, but you could try something like that:

<script>
var mydata;
// <?= "\n mydata = " . json_encode($var) . ";" ?>
// rest of the script...
</script>

That's quite ugly but it could work. If you use handlebars or something like this, you could write a helper to simplify the syntax.

Arackow commented 7 years ago

yea, it only happens inside the script tags with a parse error. Unfortunately, in my case, i dont think that will work. I was thinking more along the lines of a setting in the config that will basically say "what are your template markers and ill ignore them" but i didnt realize the way the plugin worked is that it just sends the script tag as is to eslint. I dont know if that could work.

BenoitZugmeyer commented 7 years ago

If I just remove the template markers, it would most likely break with a syntax error too, depending on how the template is injecting JS code.

I think my above proposal could work with any templating engine: just comment the template part with a JS single-line comment, and start the template value with a new line so it will be rendered below the comment.

In any case, I won't do anything to support template syntax within JS code.

jayvdb commented 3 years ago

https://github.com/gramener/eslint-plugin-template solves this.