feat: Add no-empty-component-block rule #1222
Conversation
| create(context) { | ||
| return { | ||
| Program(node) { | ||
| const componentBlocks = node.templateBody.parent.children |
There was a problem hiding this comment.
Since vue-eslint-parser v7.0.0+ you can use parserServices.getDocumentFragment().
This allows you to get the root element without the <template> block.
https://github.com/mysticatea/vue-eslint-parser/releases/tag/v7.0.0
I'm using this API in the padding-line-between-blocks rule.
https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/padding-line-between-blocks.js#L146
There was a problem hiding this comment.
Cool feature👍
Thanks for sharing.
| ] | ||
| }, | ||
| { | ||
| code: '<template></template><script></script><style></style>', |
There was a problem hiding this comment.
Could you add testcases that contains whitespaces such as line breaks? It probably won't report because it contains VText.
There was a problem hiding this comment.
Wow. Good point!
I'll fix it.
There was a problem hiding this comment.
I added some invalid cases.
tyankatsu0105
force-pushed
the
add-rule/no-empty-component-block
branch
from
fbbb360
to
4e94cdf
Compare
| return ( | ||
| componentBlock.children.length === 1 && | ||
| componentBlock.children[0].type === 'VText' && | ||
| /^(\s|\n)+$/.test(componentBlock.children[0].value) |
There was a problem hiding this comment.
I'm not sure if this regex is cover all cases...
There was a problem hiding this comment.
Maybe using /^\s*$/ will also work.
However, I'm not good at using regular expressions, so I often do the following.
!componentBlock.children[0].value.trim()There was a problem hiding this comment.
It seems nice.
I reflected this code.
| componentBlock.name !== 'script' && | ||
| componentBlock.name !== 'style' | ||
| ) | ||
| return |
There was a problem hiding this comment.
I just noticed. Use continue here.
| return | ||
|
|
||
| // https://vue-loader.vuejs.org/spec.html#src-imports | ||
| if (hasAttributeSrc(componentBlock)) return |
close #952
This PR adds vue/no-empty-component-block rule.