New rule `vue/quotes`

[szulcus]

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:

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

[FloEdelmann]

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]

@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]

Note that we may need to exclude warnings within directives.

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

[Bernankez]

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 :)

[FloEdelmann]

@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]

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]

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]

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

[jacekkarczmarczyk]

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

It should not exclude directives, but it should just not autofix it if it's not possible. Rule might work fine if I want to single quotes, it could replace v-foo="bar" to v-foo="'bar'"