Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a353a33

Browse files
authored
feat: add vue/no-duplicate-class-names rule (#2934)
1 parent 36ee5d8 commit a353a33

File tree

6 files changed

+961
-0
lines changed

6 files changed

+961
-0
lines changed

‎.changeset/ten-lines-fail.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'eslint-plugin-vue': minor
3+
---
4+
5+
Added new [`vue/no-duplicate-class-names`](https://eslint.vuejs.org/rules/no-duplicate-class-names.html) rule

‎docs/rules/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,7 @@ For example:
234234
| [vue/no-bare-strings-in-template] | disallow the use of bare strings in `<template>` | | :hammer: |
235235
| [vue/no-boolean-default] | disallow boolean defaults | | :hammer: |
236236
| [vue/no-duplicate-attr-inheritance] | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` | | :hammer: |
237+
| [vue/no-duplicate-class-names] | disallow duplication of class names in class attributes | :wrench: | :hammer: |
237238
| [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
238239
| [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
239240
| [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class | | :hammer: |
@@ -468,6 +469,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
468469
[vue/no-dupe-v-else-if]: ./no-dupe-v-else-if.md
469470
[vue/no-duplicate-attr-inheritance]: ./no-duplicate-attr-inheritance.md
470471
[vue/no-duplicate-attributes]: ./no-duplicate-attributes.md
472+
[vue/no-duplicate-class-names]: ./no-duplicate-class-names.md
471473
[vue/no-empty-component-block]: ./no-empty-component-block.md
472474
[vue/no-empty-pattern]: ./no-empty-pattern.md
473475
[vue/no-export-in-script-setup]: ./no-export-in-script-setup.md
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/no-duplicate-class-names
5+
description: disallow duplication of class names in class attributes
6+
---
7+
8+
# vue/no-duplicate-class-names
9+
10+
> disallow duplication of class names in class attributes
11+
12+
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>
13+
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
14+
15+
## :book: Rule Details
16+
17+
This rule prevents the same class name from appearing multiple times within the same class attribute or directive.
18+
19+
<eslint-code-block fix :rules="{'vue/no-duplicate-class-names': ['error']}">
20+
21+
```vue
22+
<template>
23+
<!-- ✓ GOOD -->
24+
<div class="foo bar"></div>
25+
<div :class="'foo bar'"></div>
26+
<div :class="{ 'foo bar': isActive }"></div>
27+
<div :class="['foo', 'bar']"></div>
28+
<div :class="isActive ? 'foo' : 'bar'"></div>
29+
<div class="foo" :class="{ bar: isActive }"></div>
30+
31+
<!-- ✗ BAD -->
32+
<div class="foo foo"></div>
33+
<div class="foo bar foo baz bar"></div>
34+
<div :class="'foo foo'"></div>
35+
<div :class="`foo foo`"></div>
36+
<div :class="{ 'foo foo': isActive }"></div>
37+
<div :class="['foo foo']"></div>
38+
<div :class="['foo foo', { 'bar bar baz': isActive }]"></div>
39+
<div :class="isActive ? 'foo foo' : 'bar'"></div>
40+
<div :class="'foo foo ' + 'bar'"></div>
41+
<div class="foo" :class="'foo'"></div>
42+
<div :class="['foo', 'foo']"></div>
43+
<div :class="'foo ' + 'foo'"></div>
44+
<div :class="['foo', { 'foo': isActive }]"></div>
45+
</template>
46+
```
47+
48+
</eslint-code-block>
49+
50+
## :wrench: Options
51+
52+
Nothing.
53+
54+
## :mag: Implementation
55+
56+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-duplicate-class-names.js)
57+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-duplicate-class-names.js)

‎lib/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ const plugin = {
125125
'no-dupe-v-else-if': require('./rules/no-dupe-v-else-if'),
126126
'no-duplicate-attr-inheritance': require('./rules/no-duplicate-attr-inheritance'),
127127
'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
128+
'no-duplicate-class-names': require('./rules/no-duplicate-class-names'),
128129
'no-empty-component-block': require('./rules/no-empty-component-block'),
129130
'no-empty-pattern': require('./rules/no-empty-pattern'),
130131
'no-export-in-script-setup': require('./rules/no-export-in-script-setup'),

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /