Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
⭐️New: Add
vue/v-on-parens
rule (#481)
* Implement rule * Get rid of spread operator, update error message in test * Update meta * Add output in tests * Rename rule to `v-on-function-call` * Don't add parantheses on fix * Fix rule
- Loading branch information
1 parent
5d1f051
commit ae03c28
Showing
5 changed files
with
211 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,77 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/v-on-function-call | ||
description: enforce or forbid parentheses after method calls without arguments in `v-on` directives | ||
--- | ||
# vue/v-on-function-call | ||
> enforce or forbid parentheses after method calls without arguments in `v-on` directives | ||
- :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 | ||
|
||
:-1: Example of **incorrect** code for this rule: | ||
|
||
```html | ||
<button v-on:click="closeModal()"> | ||
Close | ||
</button> | ||
``` | ||
|
||
:+1: Example of **correct** code for this rule: | ||
|
||
```html | ||
<button v-on:click="closeModal"> | ||
Close | ||
</button> | ||
``` | ||
|
||
## :wrench: Options | ||
|
||
Default is set to `never`. | ||
|
||
``` | ||
'vue/v-on-parens': [2, 'always'|'never'] | ||
``` | ||
|
||
### `"always"` - Always use parentheses in `v-on` directives | ||
|
||
:-1: Example of **incorrect** code: | ||
|
||
```html | ||
<button v-on:click="closeModal"> | ||
Close | ||
</button> | ||
``` | ||
|
||
:+1: Example of **correct** code: | ||
|
||
```html | ||
<button v-on:click="closeModal()"> | ||
Close | ||
</button> | ||
``` | ||
|
||
### `"never"` - Never use parentheses in `v-on` directives for method calls without arguments | ||
|
||
:-1: Example of **incorrect** code: | ||
|
||
```html | ||
<button v-on:click="closeModal()"> | ||
Close | ||
</button> | ||
``` | ||
|
||
:+1: Example of **correct** code: | ||
|
||
```html | ||
<button v-on:click="closeModal"> | ||
Close | ||
</button> | ||
``` | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-function-call.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-on-function-call.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,60 @@ | ||
/** | ||
* @author Niklas Higi | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const utils = require('../utils') | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'suggestion', | ||
docs: { | ||
description: 'enforce or forbid parentheses after method calls without arguments in `v-on` directives', | ||
category: undefined, | ||
url: 'https://eslint.vuejs.org/rules/v-on-function-call.html' | ||
}, | ||
fixable: 'code', | ||
schema: [ | ||
{ enum: ['always', 'never'] } | ||
] | ||
}, | ||
|
||
create (context) { | ||
const always = context.options[0] === 'always' | ||
|
||
return utils.defineTemplateBodyVisitor(context, { | ||
"VAttribute[directive=true][key.name='on'][key.argument!=null] > VExpressionContainer > Identifier" (node) { | ||
if (!always) return | ||
context.report({ | ||
node, | ||
loc: node.loc, | ||
message: "Method calls inside of 'v-on' directives must have parentheses." | ||
}) | ||
}, | ||
|
||
"VAttribute[directive=true][key.name='on'][key.argument!=null] VOnExpression > ExpressionStatement > *" (node) { | ||
if (!always && node.type === 'CallExpression' && node.arguments.length === 0) { | ||
context.report({ | ||
node, | ||
loc: node.loc, | ||
message: "Method calls without arguments inside of 'v-on' directives must not have parentheses.", | ||
fix: fixer => { | ||
const nodeString = context.getSourceCode().getText().substring(node.range[0], node.range[1]) | ||
// This ensures that parens are also removed if they contain whitespace | ||
const parensLength = nodeString.match(/\(\s*\)\s*$/)[0].length | ||
return fixer.removeRange([node.end - parensLength, node.end]) | ||
} | ||
}) | ||
} | ||
} | ||
}) | ||
} | ||
} |
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,72 @@ | ||
/** | ||
* @author Niklas Higi | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const RuleTester = require('eslint').RuleTester | ||
const rule = require('../../../lib/rules/v-on-function-call') | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Tests | ||
// ------------------------------------------------------------------------------ | ||
|
||
const tester = new RuleTester({ | ||
parser: 'vue-eslint-parser', | ||
parserOptions: { ecmaVersion: 2015 } | ||
}) | ||
|
||
tester.run('v-on-function-call', rule, { | ||
valid: [ | ||
{ | ||
filename: 'test.vue', | ||
code: '' | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div @click="foo(123)"></div></template>', | ||
options: ['always'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div @click="foo(123)"></div></template>', | ||
options: ['never'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div @click="foo()"></div></template>', | ||
options: ['always'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div @click="foo"></div></template>', | ||
options: ['never'] | ||
} | ||
], | ||
invalid: [ | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div @click="foo"></div></template>', | ||
output: `<template><div @click="foo"></div></template>`, | ||
errors: ["Method calls inside of 'v-on' directives must have parentheses."], | ||
options: ['always'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div @click="foo()"></div></template>', | ||
output: `<template><div @click="foo"></div></template>`, | ||
errors: ["Method calls without arguments inside of 'v-on' directives must not have parentheses."], | ||
options: ['never'] | ||
}, | ||
{ | ||
filename: 'test.vue', | ||
code: '<template><div @click="foo( )"></div></template>', | ||
output: `<template><div @click="foo"></div></template>`, | ||
errors: ["Method calls without arguments inside of 'v-on' directives must not have parentheses."], | ||
options: ['never'] | ||
} | ||
] | ||
}) |