-
-
Notifications
You must be signed in to change notification settings - Fork 666
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add
vue/no-restricted-v-bind
rule (#1191)
* Add `vue/no-restricted-v-bind` rule * Fix * Add testcase
- Loading branch information
Showing
5 changed files
with
463 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-restricted-v-bind | ||
description: disallow specific argument in `v-bind` | ||
--- | ||
# vue/no-restricted-v-bind | ||
> disallow specific argument in `v-bind` | ||
## :book: Rule Details | ||
|
||
This rule allows you to specify `v-bind` argument names that you don't want to use in your application. | ||
|
||
## :wrench: Options | ||
|
||
This rule takes a list of strings, where each string is a argument name or pattern to be restricted: | ||
|
||
```json | ||
{ | ||
"vue/no-restricted-v-bind": ["error", "/^v-/", "foo", "bar"] | ||
} | ||
``` | ||
|
||
<eslint-code-block :rules="{'vue/no-restricted-v-bind': ['error', '/^v-/', 'foo', 'bar']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✘ BAD --> | ||
<div v-bind:foo="x" /> | ||
<div :bar="x" /> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
By default, `'/^v-/'` is set. This prevents mistakes intended to be directives. | ||
|
||
<eslint-code-block :rules="{'vue/no-restricted-v-bind': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✘ BAD --> | ||
<MyInput :v-model="x" /> | ||
<div :v-if="x" /> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
Alternatively, the rule also accepts objects. | ||
|
||
```json | ||
{ | ||
"vue/no-restricted-v-bind": ["error", | ||
{ | ||
"argument": "/^v-/", | ||
"message": "Using `:v-xxx` is not allowed. Instead, remove `:` and use it as directive." | ||
}, | ||
{ | ||
"argument": "foo", | ||
"message": "Use \"v-bind:x\" instead." | ||
}, | ||
{ | ||
"argument": "bar", | ||
"message": "\":bar\" is deprecated." | ||
} | ||
] | ||
} | ||
``` | ||
|
||
The following properties can be specified for the object. | ||
|
||
- `argument` ... Specify the argument name or pattern or `null`. If `null` is specified, it matches `v-bind=`. | ||
- `modifiers` ... Specifies an array of the modifier names. If specified, it will only be reported if the specified modifier is used. | ||
- `element` ... Specify the element name or pattern. If specified, it will only be reported if used on the specified element. | ||
- `message` ... Specify an optional custom message. | ||
|
||
### `{ "argument": "foo", "modifiers": ["prop"] }` | ||
|
||
<eslint-code-block :rules="{'vue/no-restricted-v-bind': ['error', { argument: 'foo', modifiers: ['prop'] }]}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<div :foo="x" /> | ||
<!-- ✘ BAD --> | ||
<div :foo.prop="x" /> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
### `{ "argument": "foo", "element": "MyButton" }` | ||
|
||
<eslint-code-block :rules="{'vue/no-restricted-v-bind': ['error', { argument: 'foo', element: 'MyButton' }]}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<CoolButton :foo="x" /> | ||
<!-- ✘ BAD --> | ||
<MyButton :foo="x" /> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :couple: Related rules | ||
|
||
- [vue/no-restricted-static-attribute] | ||
|
||
[vue/no-restricted-static-attribute]: ./no-restricted-static-attribute.md | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-restricted-v-bind.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-restricted-v-bind.js) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,189 @@ | ||
/** | ||
* @author Yosuke Ota | ||
* See LICENSE file in root directory for full license. | ||
*/ | ||
// @ts-check | ||
'use strict' | ||
|
||
const utils = require('../utils') | ||
const regexp = require('../utils/regexp') | ||
|
||
/** | ||
* @typedef {import('vue-eslint-parser').AST.VDirectiveKey} VDirectiveKey | ||
* @typedef {import('vue-eslint-parser').AST.VIdentifier} VIdentifier | ||
*/ | ||
/** | ||
* @typedef {object} ParsedOption | ||
* @property { (key: VDirectiveKey) => boolean } test | ||
* @property {string[]} modifiers | ||
* @property {boolean} [useElement] | ||
* @property {string} [message] | ||
*/ | ||
|
||
const DEFAULT_OPTIONS = [ | ||
{ | ||
argument: '/^v-/', | ||
message: | ||
'Using `:v-xxx` is not allowed. Instead, remove `:` and use it as directive.' | ||
} | ||
] | ||
|
||
/** | ||
* @param {string} str | ||
* @returns {(str: string) => boolean} | ||
*/ | ||
function buildMatcher(str) { | ||
if (regexp.isRegExp(str)) { | ||
const re = regexp.toRegExp(str) | ||
return (s) => { | ||
re.lastIndex = 0 | ||
return re.test(s) | ||
} | ||
} | ||
return (s) => s === str | ||
} | ||
/** | ||
* @param {any} option | ||
* @returns {ParsedOption} | ||
*/ | ||
function parseOption(option) { | ||
if (typeof option === 'string') { | ||
const matcher = buildMatcher(option) | ||
return { | ||
test(key) { | ||
return ( | ||
key.argument && | ||
key.argument.type === 'VIdentifier' && | ||
matcher(key.argument.rawName) | ||
) | ||
}, | ||
modifiers: [] | ||
} | ||
} | ||
if (option === null) { | ||
return { | ||
test(key) { | ||
return key.argument === null | ||
}, | ||
modifiers: [] | ||
} | ||
} | ||
const parsed = parseOption(option.argument) | ||
if (option.modifiers) { | ||
const argTest = parsed.test | ||
parsed.test = (key) => { | ||
if (!argTest(key)) { | ||
return false | ||
} | ||
return option.modifiers.every((modName) => { | ||
return key.modifiers.some((mid) => mid.name === modName) | ||
}) | ||
} | ||
parsed.modifiers = option.modifiers | ||
} | ||
if (option.element) { | ||
const argTest = parsed.test | ||
const tagMatcher = buildMatcher(option.element) | ||
parsed.test = (key) => { | ||
if (!argTest(key)) { | ||
return false | ||
} | ||
const element = key.parent.parent.parent | ||
return tagMatcher(element.rawName) | ||
} | ||
parsed.useElement = true | ||
} | ||
parsed.message = option.message | ||
return parsed | ||
} | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'suggestion', | ||
docs: { | ||
description: 'disallow specific argument in `v-bind`', | ||
categories: undefined, | ||
url: 'https://eslint.vuejs.org/rules/no-restricted-v-bind.html' | ||
}, | ||
fixable: null, | ||
schema: { | ||
type: 'array', | ||
items: { | ||
oneOf: [ | ||
{ type: ['string', 'null'] }, | ||
{ | ||
type: 'object', | ||
properties: { | ||
argument: { type: ['string', 'null'] }, | ||
modifiers: { | ||
type: 'array', | ||
items: { | ||
type: 'string', | ||
enum: ['prop', 'camel', 'sync'] | ||
}, | ||
uniqueItems: true | ||
}, | ||
element: { type: 'string' }, | ||
message: { type: 'string', minLength: 1 } | ||
}, | ||
required: ['argument'], | ||
additionalProperties: false | ||
} | ||
] | ||
}, | ||
uniqueItems: true, | ||
minItems: 0 | ||
}, | ||
|
||
messages: { | ||
// eslint-disable-next-line eslint-plugin/report-message-format | ||
restrictedVBind: '{{message}}' | ||
} | ||
}, | ||
create(context) { | ||
/** @type {ParsedOption[]} */ | ||
const options = (context.options.length === 0 | ||
? DEFAULT_OPTIONS | ||
: context.options | ||
).map(parseOption) | ||
|
||
return utils.defineTemplateBodyVisitor(context, { | ||
/** | ||
* @param {VDirectiveKey} node | ||
*/ | ||
"VAttribute[directive=true][key.name.name='bind'] > VDirectiveKey"(node) { | ||
for (const option of options) { | ||
if (option.test(node)) { | ||
const message = option.message || defaultMessage(node, option) | ||
context.report({ | ||
node, | ||
messageId: 'restrictedVBind', | ||
data: { message } | ||
}) | ||
return | ||
} | ||
} | ||
} | ||
}) | ||
|
||
/** | ||
* @param {VDirectiveKey} key | ||
* @param {ParsedOption} option | ||
*/ | ||
function defaultMessage(key, option) { | ||
const vbind = key.name.rawName === ':' ? '' : 'v-bind' | ||
const arg = | ||
key.argument != null && key.argument.type === 'VIdentifier' | ||
? `:${key.argument.rawName}` | ||
: '' | ||
const mod = option.modifiers.length | ||
? `.${option.modifiers.join('.')}` | ||
: '' | ||
let on = '' | ||
if (option.useElement) { | ||
on = ` on \`<${key.parent.parent.parent.rawName}>\`` | ||
} | ||
return `Using \`${vbind + arg + mod}\`${on} is not allowed.` | ||
} | ||
} | ||
} |
Oops, something went wrong.