Movatterモバイル変換

[0]ホーム
URL:

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

Commita353a33

Browse files
authored
feat: addvue/no-duplicate-class-names rule (#2934)
1 parent36ee5d8 commita353a33

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: <badgetext="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-blockfix: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)
[8]ページ先頭
©2009-2025 Movatter.jp