Skip to content

vue/no-multi-spaces and global no-multi-spaces settings inconsistency #2666

Open
@dsl101

Description

@dsl101

I wasn't sure if this was a bug report or rule change, so posting here (didn't see a Discussion section in this repo).

The problem you want to solve.
I have 'no-multi-spaces': [ 'warn', { ignoreEOLComments: true }] in my general eslint config, which allows multiple spaces for comments:

const meaning = 42;  // obviously

But when using JS inside Vue templates, this rule isn't respected:

<div
  :class="{
    'is-good': isGood(thing)  // hopefully
  }"
>

Warning: Multiple spaces found before '// hopefully'.

Your take on the correct solution to problem.
It would be ideal if vue/no-multi-spaces were able to use the global setting and ignore comments in this case. Alternatively, could vue/no-multi-spaces support the same ignoreEOLComments option?

Additional context

I tried using the ignoreProperties option, but that only appears to consider spaces after the property name up to the ':'

Activity

FloEdelmann

FloEdelmann commented on Jan 10, 2025

@FloEdelmann
Member

It would be ideal if vue/no-multi-spaces were able to use the global setting and ignore comments in this case.

That is not possible; the rule only knows its own options.

Alternatively, could vue/no-multi-spaces support the same ignoreEOLComments option?

That would need to be implemented which is certainly possible. PR welcome 🙂

dsl101

dsl101 commented on Jan 17, 2025

@dsl101
ContributorAuthor

OK, I'm happy to take a stab at that. But looking at the innards of the existing rule, it doesn't look like it's trivial to detect comments at the end of the line. For example, this content:

<template>
  <div
    :class="{
      'is-good': isGood(thing)  // hopefully
    }"
  >
</template>

is parsed as the following sequence of tokens:

HTMLTagOpen: template
HTMLTagClose:
HTMLWhitespace:

HTMLTagOpen: div
Punctuator: :
HTMLIdentifier: class
HTMLAssociation:
Punctuator: "
Punctuator: {
String: 'is-good'
Punctuator: :
Identifier: isGood
Punctuator: (
Identifier: thing
Punctuator: )
Line:  hopefully            ← comment contents
Punctuator: }
Punctuator: "
HTMLTagClose:
HTMLWhitespace:

HTMLEndTagOpen: template
HTMLTagClose:

The comment is of type 'Line'. Similarly, if the template is:

<template>
  <div
    :class="{
      'is-good': isGood(thing)  /* hopefully */
    }"
  >
</template>

then the token containing the comment is of type 'Block'. It seems like ignoring spaces when a Line or Block is the last token on a line might have a lot of unintended side-effects. Any thoughts on that?

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

      No branches or pull requests

        Participants

        @FloEdelmann@dsl101

        Issue actions

          vue/no-multi-spaces and global no-multi-spaces settings inconsistency · Issue #2666 · vuejs/eslint-plugin-vue