0

If you install the vuejs eslint plugin and configure it to use the "strongly-recommended" ruleset, the linter will tell you to change the following code:

<router-link class="my-link" :to="{ name: 'index' }">Home</router-link>

into this

<router-link
  class="my-link"
  :to="{ name: 'index' }"
>
  Home
</router-link>

The problem is that when you do this, your <a> tag renders with a newline inside of the text causing the styling to look strange with an underline under nothing.

This is the rule that causes the problem and you can definitely get around it by using configuration options and telling the rule to ignore <router-link> elements but then you end up with code styled just as strangely since other rules require the attributes to be on new lines:

<router-link
  class="my-link"
  :to="{ name: 'index' }"
>Home</router-link>

Has anyone encountered this before? Is there a way to just trim text inside anchor tags? Am I missing something with the Vue Router configuration or ESLint configuration?

Here is a link to an example:

https://jsfiddle.net/rpf3/wex7dvpc/4/

rpf3
  • 651
  • 1
  • 10
  • 21
  • Related: https://stackoverflow.com/questions/10196545/how-to-avoid-whitespace-anchor-underline-w-o-changing-coding-style – tony19 May 16 '20 at 03:02

1 Answers1

2

If you're willing to use css here and make your links inline-block elements instead of the default inline, the white space will go away.

Updated fiddle: https://jsfiddle.net/5cps4837/

a {
  display: inline-block;
}
alienonland
  • 66
  • 3