-
-
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.
feat: Add
vue/no-multiple-objects-in-class
rule (#1218)
* feat: Add * feat: Add rule, test, and docs * chore: run update * chore: rename no-multiple-objects-in-class * chore: fix docs url * docs: fix pattern * fix: consider bind * chore: remove unused function
- Loading branch information
1 parent
f77e346
commit e70eee6
Showing
5 changed files
with
146 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,37 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/no-multiple-objects-in-class | ||
description: disallow to pass multiple objects into array to class | ||
--- | ||
# vue/no-multiple-objects-in-class | ||
> disallow to pass multiple objects into array to class | ||
## :book: Rule Details | ||
|
||
This rule disallows to pass multiple objects into array to class. | ||
|
||
<eslint-code-block :rules="{'vue/no-multiple-objects-in-class': ['error']}"> | ||
|
||
```vue | ||
<template> | ||
<div> | ||
<!-- ✓ GOOD --> | ||
<div :class="[{'foo': isFoo, 'bar': isBar}]" /> | ||
<!-- ✗ BAD --> | ||
<div :class="[{'foo': isFoo}, {'bar': isBar}]" /> | ||
</div> | ||
</template> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :wrench: Options | ||
|
||
Nothing. | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-multiple-objects-in-class.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-multiple-objects-in-class.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,59 @@ | ||
/** | ||
* @author tyankatsu <https://github.com/tyankatsu0105> | ||
* See LICENSE file in root directory for full license. | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const { defineTemplateBodyVisitor } = require('../utils') | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
/** | ||
* count ObjectExpression element | ||
* @param {VAttribute} node | ||
* @return {number} | ||
*/ | ||
function countObjectExpression(node) { | ||
return node.value.expression.elements.filter( | ||
(element) => element.type === 'ObjectExpression' | ||
).length | ||
} | ||
|
||
module.exports = { | ||
meta: { | ||
type: 'suggestion', | ||
docs: { | ||
description: 'disallow to pass multiple objects into array to class', | ||
categories: undefined, | ||
url: 'https://eslint.vuejs.org/rules/no-multiple-objects-in-class.html' | ||
}, | ||
fixable: null, | ||
schema: [], | ||
messages: { | ||
unexpected: 'Unexpected multiple objects. Merge objects.' | ||
} | ||
}, | ||
/** @param {RuleContext} context */ | ||
create(context) { | ||
return defineTemplateBodyVisitor(context, { | ||
/** @param {VAttribute} node */ | ||
'VAttribute[directive=true][key.argument.name="class"][key.name.name="bind"][value.expression.type="ArrayExpression"]'( | ||
node | ||
) { | ||
if (countObjectExpression(node) > 1) { | ||
context.report({ | ||
node, | ||
loc: node.loc, | ||
messageId: 'unexpected' | ||
}) | ||
} | ||
} | ||
}) | ||
} | ||
} |
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,48 @@ | ||
/** | ||
* @author tyankatsu <https://github.com/tyankatsu0105> | ||
*/ | ||
'use strict' | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const rule = require('../../../lib/rules/no-multiple-objects-in-class') | ||
const RuleTester = require('eslint').RuleTester | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Tests | ||
// ------------------------------------------------------------------------------ | ||
|
||
const ruleTester = new RuleTester({ | ||
parser: require.resolve('vue-eslint-parser'), | ||
parserOptions: { ecmaVersion: 2015, sourceType: 'module' } | ||
}) | ||
|
||
ruleTester.run('no-multiple-objects-in-class', rule, { | ||
valid: [ | ||
`<template><div :class="[{'foo': isFoo}]" /></template>`, | ||
`<template><div :class="[{'foo': isFoo, 'bar': isBar}]" /></template>`, | ||
`<template><div v-foo:class="[{'foo': isFoo}, {'bar': isBar}]" /></template>` | ||
], | ||
invalid: [ | ||
{ | ||
code: `<template><div v-bind:class="[{'foo': isFoo}, {'bar': isBar}]" /></template>`, | ||
errors: [ | ||
{ | ||
message: 'Unexpected multiple objects. Merge objects.', | ||
type: 'VAttribute' | ||
} | ||
] | ||
}, | ||
{ | ||
code: `<template><div :class="[{'foo': isFoo}, {'bar': isBar}]" /></template>`, | ||
errors: [ | ||
{ | ||
message: 'Unexpected multiple objects. Merge objects.', | ||
type: 'VAttribute' | ||
} | ||
] | ||
} | ||
] | ||
}) |