feat: add vue/no-duplicate-class-names rule (#2934)

Author: Yizack

.changeset/ten-lines-fail.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-vue': minor
+---
+
+Added new [`vue/no-duplicate-class-names`](https://eslint.vuejs.org/rules/no-duplicate-class-names.html) rule

docs/rules/index.md

@@ -234,6 +234,7 @@ For example:
 | [vue/no-bare-strings-in-template] | disallow the use of bare strings in `<template>` |  | :hammer: |
 | [vue/no-boolean-default] | disallow boolean defaults |  | :hammer: |
 | [vue/no-duplicate-attr-inheritance] | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  | :hammer: |
+| [vue/no-duplicate-class-names] | disallow duplication of class names in class attributes | :wrench: | :hammer: |
 | [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
 | [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
 | [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
 [vue/no-dupe-v-else-if]: ./no-dupe-v-else-if.md
 [vue/no-duplicate-attr-inheritance]: ./no-duplicate-attr-inheritance.md
 [vue/no-duplicate-attributes]: ./no-duplicate-attributes.md
+[vue/no-duplicate-class-names]: ./no-duplicate-class-names.md
 [vue/no-empty-component-block]: ./no-empty-component-block.md
 [vue/no-empty-pattern]: ./no-empty-pattern.md
 [vue/no-export-in-script-setup]: ./no-export-in-script-setup.md

docs/rules/no-duplicate-class-names.md

@@ -0,0 +1,57 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-duplicate-class-names
+description: disallow duplication of class names in class attributes
+---
+
+# vue/no-duplicate-class-names
+
+> disallow duplication of class names in class attributes
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>
+- :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.
+
+## :book: Rule Details
+
+This rule prevents the same class name from appearing multiple times within the same class attribute or directive.
+
+<eslint-code-block fix :rules="{'vue/no-duplicate-class-names': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div class="foo bar"></div>
+  <div :class="'foo bar'"></div>
+  <div :class="{ 'foo bar': isActive }"></div>
+  <div :class="['foo', 'bar']"></div>
+  <div :class="isActive ? 'foo' : 'bar'"></div>
+  <div class="foo" :class="{ bar: isActive }"></div>
+  
+  <!-- ✗ BAD -->
+  <div class="foo foo"></div>
+  <div class="foo bar foo baz bar"></div>
+  <div :class="'foo foo'"></div>
+  <div :class="`foo foo`"></div>
+  <div :class="{ 'foo foo': isActive }"></div>
+  <div :class="['foo foo']"></div>
+  <div :class="['foo foo', { 'bar bar baz': isActive }]"></div>
+  <div :class="isActive ? 'foo foo' : 'bar'"></div>
+  <div :class="'foo foo ' + 'bar'"></div>
+  <div class="foo" :class="'foo'"></div>
+  <div :class="['foo', 'foo']"></div>
+  <div :class="'foo ' + 'foo'"></div>
+  <div :class="['foo', { 'foo': isActive }]"></div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-duplicate-class-names.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-duplicate-class-names.js)

lib/index.js

@@ -125,6 +125,7 @@ const plugin = {
     'no-dupe-v-else-if': require('./rules/no-dupe-v-else-if'),
     'no-duplicate-attr-inheritance': require('./rules/no-duplicate-attr-inheritance'),
     'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
+    'no-duplicate-class-names': require('./rules/no-duplicate-class-names'),
     'no-empty-component-block': require('./rules/no-empty-component-block'),
     'no-empty-pattern': require('./rules/no-empty-pattern'),
     'no-export-in-script-setup': require('./rules/no-export-in-script-setup'),