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 vue/quotes #2187

Open
szulcus opened this issue May 23, 2023 · 8 comments · May be fixed by #2463
Open

New rule vue/quotes #2187

szulcus opened this issue May 23, 2023 · 8 comments · May be fixed by #2463

Comments

@szulcus
Copy link

szulcus commented May 23, 2023

Tell us about your environment

  • ESLint version: ^8.28.0
  • eslint-plugin-vue version: 9.14.0
  • Node version: v16.19.0

The problem you want to solve.
This warning, but in vue tamplate:
image
image

Your take on the correct solution to problem.
Similar like: https://eslint.org/docs/latest/rules/quotes

@FloEdelmann
Copy link
Member

Sounds good, thanks for the suggestion! This should be relatively easy, as we have a reusable function for wrapping core ESLint rules.

Would you like to give it a try? See https://eslint.vuejs.org/developer-guide/#proposing-a-new-rule-or-a-rule-change.
You can take e.g. the vue/camelcase rule and its implementation as a base.

@szulcus
Copy link
Author

szulcus commented May 23, 2023

@FloEdelmann I didn't know there was a way to create custom rules. I'd like to try it, but it might take me a while to get to know it. I won't have time for that anytime soon, but maybe later I can help with the new rules. Thanks for the offer!

@ota-meshi
Copy link
Member

ota-meshi commented May 24, 2023

Note that we may need to exclude warnings within directives.

<template>
  <img v-bind:title="$t(`foo`)" />
</template>

@Bernankez
Copy link

Hi, I just wrote a rule for this, but since it's only for my personal use, the test cases are not comprehensive and only consider quotes in mustache tags. I haven't considered quotes within directives. Maybe you can use it as a reference :)

@nhtnhan nhtnhan linked a pull request May 20, 2024 that will close this issue
@FloEdelmann
Copy link
Member

@ota-meshi Why should directives be excluded from this rule? If one enables this rule to enforce using a specific quote style, that style should also be enforced in directives, shouldn't it?

@ota-meshi
Copy link
Member

Why should directives be excluded from this rule?

This is because using " to quote a directive enclosed in " will break it.

<template>
  <img v-bind:title="$t(`foo`)" />
</template>

If one enables this rule to enforce using a specific quote style, that style should also be enforced in directives, shouldn't it?

That's true. But in that case, I think we need to implement it ourselves. In other words, I don't think we can implement it by referring to vue/camelcase rule.

@FloEdelmann
Copy link
Member

This is because using " to quote a directive enclosed in " will break it.

Oh true, I missed that obvious fact 😅

Can we add a rule configuration option checkDirectives (false by default) that would enable checking directives, and which would only make sense if the enforced quote style is not double quotes? Would that still be relatively easy to do while extending the core quotes rule?

@ota-meshi
Copy link
Member

ota-meshi commented Sep 12, 2024

My guess is that it's probably easier to implement own rule than it is to extend the core rule 🤔

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.

4 participants