Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New rule: prefer-true-attribute-shorthand #1781

Closed
g-plane opened this issue Jan 26, 2022 · 5 comments · Fixed by #1796
Closed

New rule: prefer-true-attribute-shorthand #1781

g-plane opened this issue Jan 26, 2022 · 5 comments · Fixed by #1796

Comments

@g-plane
Copy link
Contributor

g-plane commented Jan 26, 2022

Please describe what the rule should do:

In template, if there's an attribute whose value is true, such as :show="true", this rule will warn and provide auto fix (becomes show, see the example below). This can reduce verbosity.

What category should the rule belong to?

[x] Suggests an alternate way of doing something (suggestion)

Provide 2-3 code examples that this rule should warn about:

Invalid:

<template>
  <my-dialog :show="true" />
</template>

which can be fixed to:

<template>
  <my-dialog show />
</template>
@ota-meshi
Copy link
Member

Thank you for rule proposal.
I would like to use that rule, but by the definition of props they are not equivalent.

<script>
export default {
  name: 'MyComponent',
  props: {
    a: Boolean,
    b: [String, Boolean]
  }
}
</script>

<template>
  <pre>
a: {{a}}
b: {{b}}
  </pre>
</template>
<template>
  <MyComponent a b/>
  <MyComponent :a="true" :b="true"/>
</template>

Output:
image

So far, I haven't found a way to distinguish them well. If you have a good idea, please let me know.

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBNeUNvbXBvbmVudCBmcm9tICcuL015Q29tcG9uZW50LnZ1ZSdcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxNeUNvbXBvbmVudCBhIGIvPlxuICA8TXlDb21wb25lbnQgOmE9XCJ0cnVlXCIgOmI9XCJ0cnVlXCIvPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59IiwiTXlDb21wb25lbnQudnVlIjoiPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgcHJvcHM6IHtcbiAgICBhOiBCb29sZWFuLFxuICAgIGI6IFtTdHJpbmcsIEJvb2xlYW5dXG4gIH1cbn1cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxwcmU+XG5hOiB7e2F9fVxuYjoge3tifX1cbiAgPC9wcmU+XG48L3RlbXBsYXRlPiJ9

@ota-meshi
Copy link
Member

If you change the order of types, both will give the same result.

<script>
export default {
  name: 'MyComponent',
  props: {
    a: Boolean,
-    b: [String, Boolean]
+    b: [Boolean, String]
  }
}
</script>

@FloEdelmann
Copy link
Member

Duplicate of #775

@FloEdelmann FloEdelmann marked this as a duplicate of #775 Jan 27, 2022
@g-plane
Copy link
Contributor Author

g-plane commented Feb 9, 2022

We still can report errors, but instead of providing auto fix, we can provide suggestions.

@ota-meshi
Copy link
Member

instead of providing auto fix, we can provide suggestions.

Sounds good to me!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants