Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(RFC0005): allow v-model argument when v-model is used on custom component * feat(RFC0005): add no-v-model-argument rule which disallows v-model arguments. Vue 2 compatibility rule * feat(RFC0005): add no-deprecated-v-bind-sync rule * feat(RFC0005): provide autofix fix for deprecated v-bind.prop.sync modifier * feat(RFC0011): add support for custom modifiers in valid-v-model used on Vue component * feat(RFC0011): add vue/no-custom-modifiers-on-v-model rule which checks if v-model has not allowed modifiers (Vue 2 backward compatibility)
- Loading branch information
Showing
16 changed files
with
638 additions
and
14 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,53 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-custom-modifiers-on-v-model | ||
description: disallow custom modifiers on v-model used on the component | ||
--- | ||
# vue/no-custom-modifiers-on-v-model | ||
> disallow custom modifiers on v-model used on the component | ||
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. | ||
|
||
This rule checks whether `v-model `used on the component do not have custom modifiers. | ||
|
||
## Rule Details | ||
|
||
This rule reports `v-model` directives in the following cases: | ||
|
||
- The directive used on the component has custom modifiers. E.g. `<MyComponent v-model.aaa="foo" />` | ||
|
||
<eslint-code-block :rules="{'vue/no-custom-modifiers-on-v-model': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<MyComponent v-model="foo" /> | ||
<MyComponent v-model.trim="foo" /> | ||
<MyComponent v-model.lazy="foo" /> | ||
<MyComponent v-model.number="foo" /> | ||
<!-- ✗ BAD --> | ||
<MyComponent v-model.aaa="foo" /> | ||
<MyComponent v-model.aaa.bbb="foo" /> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
### Options | ||
|
||
Nothing. | ||
|
||
## :couple: Related rules | ||
|
||
- [valid-v-model] | ||
|
||
[valid-v-model]: valid-v-model.md | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-custom-modifiers-on-v-model.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-custom-modifiers-on-v-model.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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-deprecated-v-bind-sync | ||
description: disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | ||
--- | ||
# vue/no-deprecated-v-bind-sync | ||
> disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | ||
- :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. | ||
|
||
## :book: Rule Details | ||
|
||
This rule reports use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | ||
|
||
<eslint-code-block fix :rules="{'vue/no-deprecated-v-bind-sync': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<MyComponent v-bind:propName="foo"/> | ||
<MyComponent :propName="foo"/> | ||
<!-- ✗ BAD --> | ||
<MyComponent v-bind:propName.sync="foo"/> | ||
<MyComponent v-bind:[dynamiArg].sync="foo"/> | ||
<MyComponent v-bind.sync="foo"/> | ||
<MyComponent :propName.sync="foo"/> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :wrench: Options | ||
|
||
Nothing. | ||
|
||
## :couple: Related rules | ||
|
||
- [valid-v-bind] | ||
|
||
[valid-v-bind]: valid-v-bind.md | ||
|
||
## :books: Further reading | ||
|
||
- [RFC: Replace v-bind.sync with v-model argument](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md) | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-v-bind-sync.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-v-bind-sync.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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-v-model-argument | ||
description: disallow adding an argument to `v-model` used in custom component | ||
--- | ||
# vue/no-v-model-argument | ||
> disallow adding an argument to `v-model` used in custom component | ||
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. | ||
|
||
This rule checks whether `v-model` used on custom component do not have an argument. | ||
|
||
## :book: Rule Details | ||
|
||
This rule reports `v-model` directives in the following cases: | ||
|
||
- The directive used on component has an argument. E.g. `<MyComponent v-model:aaa="foo" />` | ||
|
||
<eslint-code-block :rules="{'vue/no-v-model-argument': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✓ GOOD --> | ||
<MyComponent v-model="foo" /> | ||
<!-- ✗ BAD --> | ||
<MyComponent v-model:aaa="foo" /> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
|
||
## :wrench: Options | ||
|
||
Nothing. | ||
|
||
## :couple: Related rules | ||
|
||
- [valid-v-model] | ||
|
||
[valid-v-model]: valid-v-model.md | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-v-model-argument.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-v-model-argument.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
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
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,57 @@ | ||
/** | ||
* @author Przemyslaw Falowski (@przemkow) | ||
* @fileoverview This rule checks whether v-model used on the component do not have custom modifiers | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const utils = require('../utils') | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Helpers | ||
// ------------------------------------------------------------------------------ | ||
|
||
const VALID_MODIFIERS = new Set(['lazy', 'number', 'trim']) | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'problem', | ||
docs: { | ||
description: 'disallow custom modifiers on v-model used on the component', | ||
category: 'essential', | ||
url: 'https://eslint.vuejs.org/rules/no-custom-modifiers-on-v-model.html' | ||
}, | ||
fixable: null, | ||
schema: [], | ||
messages: { | ||
notSupportedModifier: "'v-model' directives don't support the modifier '{{name}}'." | ||
} | ||
}, | ||
create (context) { | ||
return utils.defineTemplateBodyVisitor(context, { | ||
"VAttribute[directive=true][key.name.name='model']" (node) { | ||
const element = node.parent.parent | ||
|
||
if (utils.isCustomComponent(element)) { | ||
for (const modifier of node.key.modifiers) { | ||
if (!VALID_MODIFIERS.has(modifier.name)) { | ||
context.report({ | ||
node, | ||
loc: node.loc, | ||
messageId: 'notSupportedModifier', | ||
data: { name: modifier.name } | ||
}) | ||
} | ||
} | ||
} | ||
} | ||
}) | ||
} | ||
} |
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,54 @@ | ||
/** | ||
* @author Przemyslaw Falowski (@przemkow) | ||
* @fileoverview Disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const utils = require('../utils') | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'problem', | ||
docs: { | ||
description: 'disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)', | ||
category: undefined, | ||
url: 'https://eslint.vuejs.org/rules/no-deprecated-v-bind-sync.html' | ||
}, | ||
fixable: 'code', | ||
schema: [], | ||
messages: { | ||
syncModifierIsDeprecated: "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead." | ||
} | ||
}, | ||
create (context) { | ||
return utils.defineTemplateBodyVisitor(context, { | ||
"VAttribute[directive=true][key.name.name='bind']" (node) { | ||
if (node.key.modifiers.map(mod => mod.name).includes('sync')) { | ||
context.report({ | ||
node, | ||
loc: node.loc, | ||
messageId: 'syncModifierIsDeprecated', | ||
fix: (fixer) => { | ||
const isUsingSpreadSyntax = node.key.argument == null | ||
const hasMultipleModifiers = node.key.modifiers.length > 1 | ||
if (isUsingSpreadSyntax || hasMultipleModifiers) { | ||
return | ||
} | ||
|
||
const bindArgument = context.getSourceCode().getText(node.key.argument) | ||
return fixer.replaceText(node.key, `v-model:${bindArgument}`) | ||
} | ||
}) | ||
} | ||
} | ||
}) | ||
} | ||
} |
Oops, something went wrong.