From 411e6c8264f7f5ec9b9139889d3e5a06c0c83bd9 Mon Sep 17 00:00:00 2001 From: tyankatsu Date: Thu, 12 Aug 2021 22:15:59 +0900 Subject: [PATCH 1/6] feat: add rule no-v-text --- docs/rules/no-v-text.md | 47 ++++++++++++++++++++++ lib/rules/no-v-text.js | 76 ++++++++++++++++++++++++++++++++++++ tests/lib/rules/no-v-text.js | 52 ++++++++++++++++++++++++ 3 files changed, 175 insertions(+) create mode 100644 docs/rules/no-v-text.md create mode 100644 lib/rules/no-v-text.js create mode 100644 tests/lib/rules/no-v-text.js diff --git a/docs/rules/no-v-text.md b/docs/rules/no-v-text.md new file mode 100644 index 000000000..d5c9755a3 --- /dev/null +++ b/docs/rules/no-v-text.md @@ -0,0 +1,47 @@ +--- +pageClass: rule-details +sidebarDepth: 0 +title: vue/no-v-text +description: disallow use of v-text +since: v7.17.0 +--- +# vue/no-v-text + +> disallow use of v-text + +- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule. + - However, when using selfClose to element with v-text like `
`, it can't be fixed. + +## :book: Rule Details + +This rule reports all uses of `v-text` directive. + + + + +```vue + +``` + + + +## :wrench: Options + +Nothing. + +## :rocket: Version + +This rule was introduced in eslint-plugin-vue v7.17.0 + +## :mag: Implementation + +- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-v-text.js) +- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-v-text.js) diff --git a/lib/rules/no-v-text.js b/lib/rules/no-v-text.js new file mode 100644 index 000000000..b2c544e6e --- /dev/null +++ b/lib/rules/no-v-text.js @@ -0,0 +1,76 @@ +/** + * @author tyankatsu + * See LICENSE file in root directory for full license. + */ +'use strict' +const utils = require('../utils') + +// ------------------------------------------------------------------------------ +// Rule Definition +// ------------------------------------------------------------------------------ + +/** + * + * @param {VElement} node + * @returns {{node: VAttribute | VDirective, value: string}} + */ +const getVText = (node) => { + const vText = node.startTag.attributes.find( + (attribute) => + attribute.key.type === 'VDirectiveKey' && + attribute.key.name.name === 'text' + ) + + if (!vText) return + if (!vText.value) return + if (vText.value.type !== 'VExpressionContainer') return + if (!vText.value.expression) return + if (vText.value.expression.type !== 'Identifier') return + + const vTextValue = vText.value.expression.name + + return { + node: vText, + value: vTextValue + } +} + +module.exports = { + meta: { + type: 'suggestion', + docs: { + description: 'disallow use of v-text', + categories: undefined, + url: 'https://eslint.vuejs.org/rules/no-v-text.html' + }, + fixable: 'code', + schema: [] + }, + /** @param {RuleContext} context */ + create(context) { + return utils.defineTemplateBodyVisitor(context, { + /** @param {VElement} node */ + "VElement:has(VAttribute[directive=true][key.name.name='text'])"(node) { + const vText = getVText(node) + if (!vText) return + + context.report({ + node: vText.node, + loc: vText.loc, + message: "Don't use 'v-text'.", + fix(fixable) { + if (node.startTag.selfClosing) return + + return [ + fixable.remove(vText.node), + fixable.insertTextAfterRange( + node.startTag.range, + `{{${vText.value}}}` + ) + ] + } + }) + } + }) + } +} diff --git a/tests/lib/rules/no-v-text.js b/tests/lib/rules/no-v-text.js new file mode 100644 index 000000000..d96ed3b13 --- /dev/null +++ b/tests/lib/rules/no-v-text.js @@ -0,0 +1,52 @@ +/** + * @author tyankatsu + * See LICENSE file in root directory for full license. + */ + +'use strict' + +// ------------------------------------------------------------------------------ +// Requirements +// ------------------------------------------------------------------------------ + +const RuleTester = require('eslint').RuleTester +const rule = require('../../../lib/rules/no-v-text') + +// ------------------------------------------------------------------------------ +// Tests +// ------------------------------------------------------------------------------ +const ruleTester = new RuleTester({ + parser: require.resolve('vue-eslint-parser'), + parserOptions: { ecmaVersion: 2015 } +}) + +ruleTester.run('no-v-text', rule, { + valid: [ + { + filename: 'test.vue', + code: '' + }, + { + filename: 'test.vue', + code: '' + }, + { + filename: 'test.vue', + code: '' + } + ], + invalid: [ + { + filename: 'test.vue', + code: '', + output: '', + errors: ["Don't use 'v-text'."] + }, + { + filename: 'test.vue', + code: '', + output: '', + errors: ["Don't use 'v-text'."] + } + ] +}) From 4cd6ec6f1a842b77e274a50f0ae9d159688d7fdf Mon Sep 17 00:00:00 2001 From: tyankatsu Date: Thu, 12 Aug 2021 22:17:20 +0900 Subject: [PATCH 2/6] chore: run npm run update --- docs/rules/README.md | 1 + docs/rules/no-v-text.md | 3 ++- lib/index.js | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/rules/README.md b/docs/rules/README.md index 4d87f7cc9..3a81ca6ec 100644 --- a/docs/rules/README.md +++ b/docs/rules/README.md @@ -324,6 +324,7 @@ For example: | [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method | | | [vue/no-useless-mustaches](./no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: | | [vue/no-useless-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: | +| [vue/no-v-text](./no-v-text.md) | disallow use of v-text | :wrench: | | [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: | | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported | | | [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | | diff --git a/docs/rules/no-v-text.md b/docs/rules/no-v-text.md index d5c9755a3..35f616dd4 100644 --- a/docs/rules/no-v-text.md +++ b/docs/rules/no-v-text.md @@ -10,6 +10,7 @@ since: v7.17.0 > disallow use of v-text - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule. + - However, when using selfClose to element with v-text like `
`, it can't be fixed. ## :book: Rule Details @@ -17,7 +18,7 @@ since: v7.17.0 This rule reports all uses of `v-text` directive. - + ```vue