Skip to content

New rule vue/quotes #2187

Open
Open
@szulcus

Description

@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:
image
image

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

Activity

FloEdelmann

FloEdelmann commented on May 23, 2023

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

szulcus commented on May 23, 2023

@szulcus
Author

@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

ota-meshi commented on May 24, 2023

@ota-meshi
Member

Note that we may need to exclude warnings within directives.

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

Bernankez commented on May 24, 2023

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

linked a pull request that will close this issue on May 20, 2024
FloEdelmann

FloEdelmann commented on Sep 3, 2024

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

ota-meshi commented on Sep 5, 2024

@ota-meshi
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

FloEdelmann commented on Sep 5, 2024

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

ota-meshi commented on Sep 12, 2024

@ota-meshi
Member

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

jacekkarczmarczyk

jacekkarczmarczyk commented on Jan 25, 2025

@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'"

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @FloEdelmann@jacekkarczmarczyk@ota-meshi@Bernankez@szulcus

      Issue actions

        New rule `vue/quotes` · Issue #2187 · vuejs/eslint-plugin-vue