explicit-length-check: Support Vue SFC files (#1360)

Author: fisker

docs/rules/explicit-length-check.md

@@ -43,12 +43,24 @@ const isEmpty = !(foo.length > 0);
 const isEmptySet = !foo.size;
 ```
 
+```vue
+<template>
+	<div v-if="foo.length">Vue</div>
+</template>
+```
+
 ### Pass
 
 ```js
 const isEmpty = foo.length === 0;
 ```
 
+```vue
+<template>
+	<div v-if="foo.length > 0">Vue</div>
+</template>
+```
+
 ## Non-zero comparisons
 
 Enforce comparison with `> 0` when checking for non-zero length.

rules/explicit-length-check.js

@@ -141,10 +141,11 @@ function create(context) {
 			];
 		}
 
-		return problem;
+		// TODO[@fisker]: Make `return problem` work for `vue-eslint-parser`
+		context.report(problem);
 	}
 
-	return {
+	const listeners = {
 		[lengthSelector](lengthNode) {
 			if (lengthNode.object.type === 'ThisExpression') {
 				return;
@@ -182,6 +183,13 @@ function create(context) {
 			}
 		}
 	};
+
+	// `vue-eslint-parser`
+	if (context.parserServices && context.parserServices.defineTemplateBodyVisitor) {
+		return context.parserServices.defineTemplateBodyVisitor(listeners, listeners);
+	}
+
+	return listeners;
 }
 
 const schema = [

rules/utils/boolean.js

@@ -19,6 +19,14 @@ const isBooleanCall = node =>
 	node.callee.type === 'Identifier' &&
 	node.callee.name === 'Boolean' &&
 	node.arguments.length === 1;
+const isVIfAttributeValue = node =>
+	node &&
+	node.type === 'VExpressionContainer' &&
+	node.parent.type === 'VAttribute' &&
+	node.parent.value === node &&
+	node.parent.key.type === 'VDirectiveKey' &&
+	node.parent.key.name.type === 'VIdentifier' &&
+	(node.parent.key.name.name === 'if' || node.parent.key.name.name === 'else-if');
 
 /**
 Check if the value of node is a `boolean`.
@@ -37,6 +45,10 @@ function isBooleanNode(node) {
 	}
 
 	const {parent} = node;
+	if (isVIfAttributeValue(parent)) {
+		return true;
+	}
+
 	if (
 		(
 			parent.type === 'IfStatement' ||

test/explicit-length-check.mjs

@@ -202,3 +202,59 @@ test.snapshot({
 		'if (foo.size && bar.length) {}'
 	]
 });
+
+test.vue({
+	valid: [
+		'<not-template><div v-if="foo.length"></div></not-template>',
+		'<template><div v-not-if="foo.length"></div></template>',
+		'<template><div v-if="foo.notLength"></div></template>'
+	],
+	invalid: [
+		{
+			code: '<template><div v-if="foo.length"></div></template>',
+			output: '<template><div v-if="foo.length > 0"></div></template>',
+			errors: 1
+		},
+		{
+			code: outdent`
+				<template>
+					<div>
+						<div v-if="foo"></div>
+						<div v-else-if="bar.length"></div>
+					</div>
+				</template>
+			`,
+			output: outdent`
+				<template>
+					<div>
+						<div v-if="foo"></div>
+						<div v-else-if="bar.length > 0"></div>
+					</div>
+				</template>
+			`,
+			errors: 1
+		},
+		{
+			code: '<template><div v-if="foo.length"></div></template>',
+			output: '<template><div v-if="foo.length !== 0"></div></template>',
+			errors: 1,
+			options: [{'non-zero': 'not-equal'}]
+		},
+		{
+			code: '<template><div v-if="foo.length"></div></template>',
+			output: '<template><div v-if="foo.length >= 1"></div></template>',
+			errors: 1,
+			options: [{'non-zero': 'greater-than-or-equal'}]
+		},
+		{
+			code: '<template><div v-if="foo.length && bar"></div></template>',
+			output: '<template><div v-if="foo.length > 0 && bar"></div></template>',
+			errors: 1
+		},
+		{
+			code: '<script>if (foo.length) {}</script>',
+			output: '<script>if (foo.length > 0) {}</script>',
+			errors: 1
+		}
+	]
+});

test/utils/test.mjs

@@ -109,6 +109,16 @@ class Tester {
 		});
 	}
 
+	vue(tests) {
+		return this.runTest({
+			...tests,
+			testerOptions: {
+				parser: require.resolve('vue-eslint-parser'),
+				parserOptions: defaultParserOptions
+			}
+		});
+	}
+
 	snapshot(tests) {
 		const tester = snapshotRuleTester(test, {
 			parserOptions: defaultParserOptions
@@ -124,6 +134,7 @@ function getTester(importMeta) {
 	const test = Tester.prototype.runTest.bind(tester);
 	test.typescript = Tester.prototype.typescript.bind(tester);
 	test.babel = Tester.prototype.babel.bind(tester);
+	test.vue = Tester.prototype.vue.bind(tester);
 	test.snapshot = Tester.prototype.snapshot.bind(tester);
 
 	return {