How to find the error file?

[GoulartNogueira]

Problem:

I can't find the exact problem pointed by @nuxtjs/html-validator.

Expected:

To have more detail for each error, like the filename, or at least the surrounding code.

---

I have a big medium-size project with dozens of pages and components.

I've just installed @nuxtjs/html-validator and run.
It has successfully found some errors:

 ERROR  HTML validation errors found for /my-url-route

inline
  591:375   error  <h1> cannot be empty, must have text content                        empty-heading
  591:649   error  Anchor link must have a text describing its purpose                 wcag/h30
  593:866   error  <input> is missing required "type" attribute                        element-required-attributes
  593:866   error  <input> element does not have a <label>                             input-missing-label

As I have only 1 <h1> tag, it was easy to find the first bug, but as I use lot's of components, in some cases, I can't know exactly where the problems are.

I feel like I'm missing something fundamental here. Am I not using the took correctly?

[danielroe]

Apologies for the delay in replying.

The issue is that we are validating the entire HTML response from the Nuxt server, which means there is no particular clue where the component is. If you use the prettier option, we should log the code around each error which means you may have more information.

PRs or suggestions welcome to improve this behaviour.

[joaopedrodcf]

The solution of using prettier: true works really well for me, it prints more things and this way we can find the html error easily.

[BenoitEirik]

Can't use prettier: true with TailwindCSS. Any solution to find file errors?

[endorfin]

With TailwindCSS v4 prettier: true it works