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/no-restricted-syntax
rule (#758)
* ⭐️New: Add `vue/no-restricted-syntax` rule Close #689 * ⭐️New: Add `vue/no-restricted-syntax` rule Close #689 * fixed
- Loading branch information
1 parent
3b3fc6c
commit 9c49dcc
Showing
5 changed files
with
184 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,55 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-restricted-syntax | ||
description: disallow specified syntax | ||
--- | ||
# vue/no-restricted-syntax | ||
> disallow specified syntax | ||
This rule is the same rule as core [no-restricted-syntax] rule but it applies to the expressions in `<template>`. | ||
|
||
|
||
## :wrench: Options | ||
|
||
Please see [no-restricted-syntax] for detailed options. | ||
|
||
You can include the AST created by [vue-eslint-parser] in the selector. | ||
To know more about certain nodes in produced AST, please go [vue-eslint-parser - AST docs]. | ||
|
||
### `"VElement > VExpressionContainer CallExpression"` | ||
|
||
Forbids call expressions inside mustache interpolation. | ||
|
||
<eslint-code-block :rules="{'vue/no-restricted-syntax': ['error', 'VElement > VExpressionContainer CallExpression']}"> | ||
|
||
```vue | ||
<template> | ||
<!-- ✔ GOOD --> | ||
<div> {{ foo }} </div> | ||
<div> {{ foo.bar }} </div> | ||
<!-- ✘ BAD --> | ||
<div> {{ foo() }} </div> | ||
<div> {{ foo.bar() }} </div> | ||
<div> {{ foo().bar }} </div> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :books: Further reading | ||
|
||
- [no-restricted-syntax] | ||
- [ESTree] | ||
- [vue-eslint-parser] | ||
|
||
[no-restricted-syntax]: https://eslint.org/docs/rules/no-restricted-syntax | ||
[ESTree]: https://github.com/estree/estree | ||
[vue-eslint-parser]: https://github.com/mysticatea/vue-eslint-parser | ||
[vue-eslint-parser - AST docs]: https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-restricted-syntax.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-restricted-syntax.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,9 @@ | ||
/** | ||
* @author Yosuke Ota | ||
*/ | ||
'use strict' | ||
|
||
const { wrapCoreRule } = require('../utils') | ||
|
||
// eslint-disable-next-line | ||
module.exports = wrapCoreRule(require('eslint/lib/rules/no-restricted-syntax')) |
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,118 @@ | ||
/** | ||
* @author Yosuke Ota | ||
*/ | ||
'use strict' | ||
|
||
const RuleTester = require('eslint').RuleTester | ||
const rule = require('../../../lib/rules/no-restricted-syntax') | ||
|
||
const tester = new RuleTester({ | ||
parser: 'vue-eslint-parser', | ||
parserOptions: { ecmaVersion: 2015 } | ||
}) | ||
|
||
tester.run('no-restricted-syntax', rule, { | ||
valid: [ | ||
{ | ||
code: ` | ||
<template> | ||
<input :value="value"> | ||
</template>`, | ||
options: [ | ||
{ | ||
'selector': 'CallExpression', | ||
'message': 'Call expressions are not allowed.' | ||
} | ||
] | ||
} | ||
], | ||
invalid: [ | ||
{ | ||
code: ` | ||
<template> | ||
<input :value="value()"> | ||
</template>`, | ||
options: [ | ||
{ | ||
'selector': 'CallExpression', | ||
'message': 'Call expressions are not allowed.' | ||
} | ||
], | ||
errors: [ | ||
{ | ||
message: 'Call expressions are not allowed.', | ||
line: 3, | ||
column: 26, | ||
endLine: 3, | ||
endColumn: 33 | ||
} | ||
] | ||
}, | ||
|
||
// Forbids call expressions inside mustache interpolation. | ||
{ | ||
code: ` | ||
<template> | ||
<div> {{ foo() }} </div> | ||
<div> {{ foo.bar() }} </div> | ||
<div> {{ foo().bar }} </div> | ||
</template>`, | ||
options: [ | ||
{ | ||
'selector': 'VElement > VExpressionContainer CallExpression', | ||
'message': 'Call expressions are not allowed inside mustache interpolation.' | ||
} | ||
], | ||
errors: [ | ||
{ | ||
message: 'Call expressions are not allowed inside mustache interpolation.', | ||
line: 3, | ||
column: 20, | ||
endLine: 3, | ||
endColumn: 25 | ||
}, | ||
{ | ||
message: 'Call expressions are not allowed inside mustache interpolation.', | ||
line: 4, | ||
column: 20, | ||
endLine: 4, | ||
endColumn: 29 | ||
}, | ||
{ | ||
message: 'Call expressions are not allowed inside mustache interpolation.', | ||
line: 5, | ||
column: 20, | ||
endLine: 5, | ||
endColumn: 25 | ||
} | ||
] | ||
}, | ||
|
||
// Sample source code on issue 689 | ||
{ | ||
code: ` | ||
<template> | ||
<div :foo="$gettext(\`bar\`)">{{$gettext(\`bar\`)}}</div> | ||
</template>`, | ||
options: [ | ||
"CallExpression[callee.type='Identifier'][callee.name='$gettext'] TemplateLiteral" | ||
], | ||
errors: [ | ||
{ | ||
message: 'Using \'CallExpression[callee.type=\'Identifier\'][callee.name=\'$gettext\'] TemplateLiteral\' is not allowed.', | ||
line: 3, | ||
column: 29, | ||
endLine: 3, | ||
endColumn: 34 | ||
}, | ||
{ | ||
message: 'Using \'CallExpression[callee.type=\'Identifier\'][callee.name=\'$gettext\'] TemplateLiteral\' is not allowed.', | ||
line: 3, | ||
column: 48, | ||
endLine: 3, | ||
endColumn: 53 | ||
} | ||
] | ||
} | ||
] | ||
}) |