no-duplicate-attributes should have css exceptions

• ESLint Version: 4.3.0
• eslint-plugin-vue Version: 3.8.0
• Node Version: 8.1.4

<span class="label label-rounded" :class="statusColor"></span>
<span style="font-weight:bold;" :style="{ color: activeColor, fontSize: fontSize + 'px' }"></span>

Duplicate attribute ‘class’. (vue/no-duplicate-attributes) Duplicate attribute ‘style’. (vue/no-duplicate-attributes)

Class and Style, specifically, should be allowed to be duplicated since they tend to have a mix of static and dynamic content. You often have structural styling that gets set in stone at development time, but want reactive styles or classes applied at runtime.

Perhaps no-duplicate-attributes should take an option for ignoring css attributes (class and style).

[armano2]

@nchutchind nice catch Vue is allowing for duplicates for style and class but not always:

This is ok:

• <div style="" :style="">
• <div class="" :class="">

This is not ok:

• <div style="" style="">
• <div :style="" :style="">
• <div class="" class="">
• <div :class="" :class="">

I think we should add setting to allow this.

[mysticatea]

Thank you for the report!

I had not noticed that class and :class can coexist. Yes, this is a bug. I think that the rule should ignore class and style by default. I think “good to have” about the option which disallows duplicate of class and style.