Отладка шаблонов Vue

Может дело в том, что я не привык ими пользоваться, но мне сложно читать и отлаживать шаблоны. Я пытаюсь понять, есть ли способ использовать JSX вне метода рендеринга или хороший линтер, который заглянул бы внутрь шаблонов, но ничего не нашел.

пример простой проблемы, когда закрывающий тег отсутствует внутри шаблона: шаблон: <div id = "movie-filter"> <h2>Filter results</h2> <div class = "filter-group"> <check-filter v-for = "ganre in ganres" v-bind:title = "ganre" v-on:check-filter = "checkFilter" <!-- forgot to close the tag with ">" --> </check-filter> </div> </div> Спасибо, любые рекомендации приветствуются!