From 9d6cf76304fabcec0547e6f4d48cbf521b087a8b Mon Sep 17 00:00:00 2001 From: perrysong Date: Wed, 10 May 2023 19:37:35 +0800 Subject: [PATCH] fix: update rule logic and doc --- docs/rules/index.md | 2 +- docs/rules/no-root-v-if.md | 10 ++++----- lib/index.js | 2 +- lib/rules/no-root-v-if.js | 36 ++++++--------------------------- tests/lib/rules/no-root-v-if.js | 9 ++++----- 5 files changed, 16 insertions(+), 43 deletions(-) diff --git a/docs/rules/index.md b/docs/rules/index.md index 2b4ff512f..abc3419a4 100644 --- a/docs/rules/index.md +++ b/docs/rules/index.md @@ -118,7 +118,6 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue | [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives | | :three::two::warning: | | [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives | | :three::two::warning: | | [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives | | :three::two::warning: | -| [vue/no-root-v-if](./no-root-v-if.md) | enforce valid `v-if` directives on root element | | :three::two::warning: | | [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives | | :three::two::warning: | | [vue/valid-v-is](./valid-v-is.md) | enforce valid `v-is` directives | | :three::warning: | | [vue/valid-v-memo](./valid-v-memo.md) | enforce valid `v-memo` directives | | :three::warning: | @@ -241,6 +240,7 @@ For example: | [vue/no-restricted-props](./no-restricted-props.md) | disallow specific props | :bulb: | :hammer: | | [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md) | disallow specific attribute | | :hammer: | | [vue/no-restricted-v-bind](./no-restricted-v-bind.md) | disallow specific argument in `v-bind` | | :hammer: | +| [vue/no-root-v-if](./no-root-v-if.md) | disallow `v-if` directives on root element | | :hammer: | | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes | | :hammer: | | [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" | :bulb: | :warning: | | [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method | | :warning: | diff --git a/docs/rules/no-root-v-if.md b/docs/rules/no-root-v-if.md index 835721ace..8b48c7c01 100644 --- a/docs/rules/no-root-v-if.md +++ b/docs/rules/no-root-v-if.md @@ -2,13 +2,14 @@ pageClass: rule-details sidebarDepth: 0 title: vue/no-root-v-if -description: enforce valid `v-if` directives on root element +description: disallow `v-if` directives on root element --- + # vue/no-root-v-if -> enforce valid `v-if` directives on root element +> disallow `v-if` directives on root element -- :exclamation: ***This rule has not been released yet.*** +- :exclamation: **_This rule has not been released yet._** This rule checks whether every template root is valid. @@ -19,12 +20,9 @@ This rule reports the template root in the following cases: ```vue - - - ``` diff --git a/lib/index.js b/lib/index.js index 1c1ca74ca..c7b580868 100644 --- a/lib/index.js +++ b/lib/index.js @@ -124,6 +124,7 @@ module.exports = { 'no-restricted-static-attribute': require('./rules/no-restricted-static-attribute'), 'no-restricted-syntax': require('./rules/no-restricted-syntax'), 'no-restricted-v-bind': require('./rules/no-restricted-v-bind'), + 'no-root-v-if': require('./rules/no-root-v-if'), 'no-setup-props-destructure': require('./rules/no-setup-props-destructure'), 'no-shared-component-data': require('./rules/no-shared-component-data'), 'no-side-effects-in-computed-properties': require('./rules/no-side-effects-in-computed-properties'), @@ -220,7 +221,6 @@ module.exports = { 'valid-v-else': require('./rules/valid-v-else'), 'valid-v-for': require('./rules/valid-v-for'), 'valid-v-html': require('./rules/valid-v-html'), - 'no-root-v-if': require('./rules/no-root-v-if'), 'valid-v-if': require('./rules/valid-v-if'), 'valid-v-is': require('./rules/valid-v-is'), 'valid-v-memo': require('./rules/valid-v-memo'), diff --git a/lib/rules/no-root-v-if.js b/lib/rules/no-root-v-if.js index 6040d29d2..304ef3f12 100644 --- a/lib/rules/no-root-v-if.js +++ b/lib/rules/no-root-v-if.js @@ -7,35 +7,11 @@ const utils = require('../utils') -/** - * Get the number of root element directive - * @param {VNode[]} rootElements The start tag node to check. - */ -function getDirectivesLength(rootElements) { - let ifLength = 0 - let elseLength = 0 - let elseIfLength = 0 - - for (const element of rootElements) { - if (element.type === 'VElement') { - if (utils.hasDirective(element, 'if')) ifLength += 1 - if (utils.hasDirective(element, 'else')) elseLength += 1 - if (utils.hasDirective(element, 'else-if')) elseIfLength += 1 - } - } - - return { - ifLength, - elseLength, - elseIfLength - } -} - module.exports = { meta: { - type: 'problem', + type: 'suggestion', docs: { - description: 'enforce valid `v-if` directives on root element', + description: 'disallow `v-if` directives on root element', categories: undefined, url: 'https://eslint.vuejs.org/rules/no-root-v-if.html' }, @@ -53,10 +29,10 @@ module.exports = { } const rootElements = element.children.filter(utils.isVElement) - if (rootElements.length === 0) return - const { ifLength, elseLength, elseIfLength } = - getDirectivesLength(rootElements) - if (ifLength === 1 && elseLength === 0 && elseIfLength === 0) { + if ( + rootElements.length === 1 && + utils.hasDirective(rootElements[0], 'if') + ) { context.report({ node: element, loc: element.loc, diff --git a/tests/lib/rules/no-root-v-if.js b/tests/lib/rules/no-root-v-if.js index 4c776f8b9..766c5b2ad 100644 --- a/tests/lib/rules/no-root-v-if.js +++ b/tests/lib/rules/no-root-v-if.js @@ -94,6 +94,10 @@ tester.run('no-root-v-if', rule, { { filename: 'test.vue', code: '' + }, + { + filename: 'test.vue', + code: '' } ], invalid: [ @@ -106,11 +110,6 @@ tester.run('no-root-v-if', rule, { filename: 'test.vue', code: '', errors: ['`v-if` should not be used on root element without `v-else`.'] - }, - { - filename: 'test.vue', - code: '', - errors: ['`v-if` should not be used on root element without `v-else`.'] } ] })