Odd formatting with router-link and named routes

[n8twj]

Tell us about your environment

• ESLint version: "^5.16.0"
• eslint-plugin-vue version: "^5.0.0"
• eslint-plugin-prettier version: "^3.1.0"
• **Node version: v10.16.3 **

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

What did you do?

<template>
  <div>
    <h1>Events Listing</h1>
    <p>
       // The next line
      <router-link :to="{ name: 'event-show', params: { id: '1' } }">First Event</router-link>
    </p>
  </div>
</template>

What did you expect to happen?
I expected the formatting of the router-link tag not to be changed

What actually happened?

<template>
  <div>
    <h1>Events Listing</h1>
    <p>
      // this line is auto-formatted poorly
      <router-link :to="{ name: 'event-show', params: { id: '1' } }"
        >First Event</router-link
      >
    </p>
  </div>
</template>

I can also confirm by saving the file in a dumb editor like nano with expected formatting and then running npm run lint the file is updated to the poor formatting. This behavior only happens when using a "named" router-link tag.

[n8twj]

VS Code provides the following message from ESLint:

Replace `>First·Event</router-link` with `⏎········>First·Event</router-link⏎······`eslint(prettier/prettier)

aka - adding CR/LFs (or ⏎·Equiv)

[Akash-Preet]

That's a infinite loop ♾️, when I press ctrl + s line break is removed again 🤕 .

[vpanagiev]

Yup, same problem here as @Akash-Preet

EDIT: Found a solution that worked for me here in this comment. Yes, it was as simple as reinstalling the config of prettier.

Alternative solution if you don't like this wrapping behaviour on here.

EDIT2: To solve the annoying problem that @Akash-Preet describe and I too had, what I ultimitaly had to do was to remove this line "editor.formatOnSave": true, from my VSCode settings.json! Keep in mind that I still have ""editor.codeActionsOnSave": {"source.fixAll.eslint": true }" option. It just seems that those two were having a conflict, or more precisely, one was overriding the other. The linter was doing its job on save but then the auto formatting was ruining it on save too. More info and credit for this solution come from here and here.

If you keep having the problem of "Delete CR" lines, then it could be a problem with the prettier config for End Of Line and the config of your VScode. More info and fix here.

[sbillet]

I had the same issue. Turns out the root cause was just the line getting longer than Prettier's default printWidth (80 characters), so it recommended a line wrap.

It can be easily fixed by setting the option to a higher value, e.g. 120 (my IDE's line width). One way is to create a .prettierrc.js with following content:

module.exports = {
  printWidth: 120
}

[FloEdelmann]

That's the result of using Prettier, which likes to format HTML that way. Since this has nothing to do with eslint-plugin-vue, I'll close this issue.