Skip to content

Commit

Permalink
Add vue/no-v-text rule (#1605)
Browse files Browse the repository at this point in the history
* feat: add rule no-v-text

* chore: run npm run update

* docs: remove since from header. move attention for fix.

* feat: use utils.getDirective

* feat: remove fix function from this rule

* test: update test case
  • Loading branch information
tyankatsu0105 committed Aug 15, 2021
1 parent 730645e commit 16a4c67
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/rules/README.md
Expand Up @@ -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 | |
Expand Down
41 changes: 41 additions & 0 deletions docs/rules/no-v-text.md
@@ -0,0 +1,41 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/no-v-text
description: disallow use of v-text
---
# vue/no-v-text

> disallow use of v-text

## :book: Rule Details

This rule reports all uses of `v-text` directive.

<eslint-code-block :rules="{'vue/no-v-text': ['error']}">

```vue
<template>
<!-- ✓ GOOD -->
<div>{{ foobar }}</div>
<!-- ✗ BAD -->
<div v-text="foobar"></div>
</template>
```

</eslint-code-block>

## :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)
1 change: 1 addition & 0 deletions lib/index.js
Expand Up @@ -132,6 +132,7 @@ module.exports = {
'no-v-for-template-key': require('./rules/no-v-for-template-key'),
'no-v-html': require('./rules/no-v-html'),
'no-v-model-argument': require('./rules/no-v-model-argument'),
'no-v-text': require('./rules/no-v-text'),
'no-watch-after-await': require('./rules/no-watch-after-await'),
'object-curly-newline': require('./rules/object-curly-newline'),
'object-curly-spacing': require('./rules/object-curly-spacing'),
Expand Down
36 changes: 36 additions & 0 deletions lib/rules/no-v-text.js
@@ -0,0 +1,36 @@
/**
* @author tyankatsu <https://github.com/tyankatsu0105>
* See LICENSE file in root directory for full license.
*/
'use strict'
const utils = require('../utils')

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

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: null,
schema: []
},
/** @param {RuleContext} context */
create(context) {
return utils.defineTemplateBodyVisitor(context, {
/** @param {VDirective} node */
"VAttribute[directive=true][key.name.name='text']"(node) {
context.report({
node,
loc: node.loc,
message: "Don't use 'v-text'."
})
}
})
}
}
45 changes: 45 additions & 0 deletions tests/lib/rules/no-v-text.js
@@ -0,0 +1,45 @@
/**
* @author tyankatsu <https://github.com/tyankatsu0105>
* 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: '<template></template>'
},
{
filename: 'test.vue',
code: '<template><div>{{foobar}}</div></template>'
}
],
invalid: [
{
filename: 'test.vue',
code: '<template><div v-text="foobar"></div></template>',
errors: ["Don't use 'v-text'."]
}
]
})

0 comments on commit 16a4c67

Please sign in to comment.