eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

no-code-outside-tag

Open tjx666 opened this issue 2 years ago • 1 comments

Please describe what the rule should do:

help user find the code which will not work as expected

What category should the rule belong to?

  • [ ] Enforces code style (layout)
  • [x] Warns about a potential error (problem)
  • [ ] Suggests an alternate way of doing something (suggestion)
  • [ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<template>
  <div>666</div>
</template>

console.log(1);

<script>
console.log(2);
</script>

Additional context

the statement console.log(1); outside the tag will be ignored by vue compiler, and not work as expected

tjx666 avatar Jun 08 '23 18:06 tjx666

Hmm, is this a common problem? Doesn't the syntax highlighting in the editor already tell that it is in the wrong place?

But I guess this rule could be added to eslint-plugin-vue. Pull requests welcome! Note that it should not report comments (<!-- … -->) or custom blocks (e.g. <docs>…</docs>), but all text content (e.g. hello world, not just valid JS code like in the example above). Maybe vue/no-content-outside-block would be a better name?

FloEdelmann avatar Jun 13 '23 11:06 FloEdelmann