Update attribute-hyphenation to allow a custom ignore list #461
Conversation
| @@ -1,17 +1,17 @@ | |||
| # enforce attribute naming style in template (vue/attribute-hyphenation) | |||
| # enforce attribute naming style on custom components in template (vue/attribute-hyphenation) | |||
There was a problem hiding this comment.
This part is automatically generated based on the rule's metadata informations. If you want to update it please - do so in rule file instead. Otherwise it'll be overwritten during next release.
There was a problem hiding this comment.
Is it just this one line coming from meta.docs.description and needs updating? If so I've done it, let me know if there is anything else.
lib/rules/attribute-hyphenation.js
Outdated
| if (optionsPayload && optionsPayload.ignore) { | ||
| ignoredAttributes = optionsPayload.ignore | ||
| } else { | ||
| ignoredAttributes = ['data-', 'aria-', 'slot-scope'] |
There was a problem hiding this comment.
You can set ignoredAttributes above and remove the whole else clause.
There was a problem hiding this comment.
This makes sense, I have done this change.
lib/rules/attribute-hyphenation.js
Outdated
| @@ -48,9 +74,14 @@ module.exports = { | |||
| } | |||
|
|
|||
| function isIgnoredAttribute (value) { | |||
| if (value.indexOf('data-') !== -1 || value.indexOf('aria-') !== -1) { | |||
| const isIgnored = !ignoredAttributes.every(function (attr) { | |||
There was a problem hiding this comment.
Perhaps you can use .some and remove the negation?
ignoredAttributes.some(function (attr) {
return value.indexOf(attr) !== -1;
});
There was a problem hiding this comment.
That does make more sense, thanks.
docs/rules/attribute-hyphenation.md
Outdated
| @@ -38,3 +38,17 @@ Default casing is set to `always` | |||
| ```html | |||
| <MyComponent my-prop="prop"/> | |||
| ``` | |||
|
|
|||
| ### `[2, "never", { 'ignore': ['data-', 'aria-', 'slot-scope', 'custom-prop'] }]` - Don't use hyphenated name but allow custom attributes | |||
There was a problem hiding this comment.
I wonder whether it wouldn't be easier for users to just merge their settings with default ones. I can't imagine a case where you'd want to remote any of the default settings - they are sort of required for this rule to work properly. So I'd just assume these setting are always there and whatever user adds here - will be merged to the default array.
What do you think about it?
There was a problem hiding this comment.
I was providing more flexibility for long term use if things change, but I do agree that it's unlikely people will want to overwrite these defaults. I have updated it so it will not overwrite the default array but instead push to it.
| { | ||
| filename: 'test.vue', | ||
| code: '<template><div data-id="foo" aria-test="bar" slot-scope="{ data }" custom-hypen="foo"><a onClick="" my-prop="prop"></a></div></template>', | ||
| options: ['never', { 'ignore': ['data-', 'aria-', 'slot-scope', 'custom-hypen'] }] |
There was a problem hiding this comment.
Ah, one thing you missed. We don't need to pass 'data-', 'aria-', 'slot-scope' anymore :)
Changes:
data-andaria-, added to the default ignore list isslot-scopeas this is a Vue attribute that cannot be un-hyphenated."vue/attribute-hyphenation": ["error", "never", {"ignore": ["data-", "aria-", "my-prop"]}]to overwrite the existing ignore list./.ideafolder created by Phpstorm to the/.gitignorelist.