CODEWITHSUNDEEP
javascripthtmlvue.jseslintprettier
Lado Barnovi
Lado Barnovi

Reputation: 36

Vue.js lint forces component to a single line

I have a component in Vue template

 <MyComponent
  class='class'
  someattribute='...'
  @event='eventListener'
/>

When I try to run lint it automatically reformats my code to following

 <MyComponent class='class' someattribute='...' @event='eventListener' />

I'm trying to disable it from doing so but can't find any corresponding rule. Any ideas how to avoid this?

I just want it to stay however I write it and disable any rules regarding it.

Upvotes: 2

Views: 796

Answers (1)

Hank X
Hank X

Reputation: 2044

you should not do this, single line props are recommended by Vue officially: https://v2.vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended

If you really want to change it.

  • in your package.json file, find if there is a eslintConfig

    • if it has, add this config in its rules: "vue/max-attributes-per-line": "off"

  • if no eslintConfig, you can add one. the default config should look like this:

"eslintConfig": {
//... other config
       "rules": {
      "vue/max-attributes-per-line": "off"
    }
  },

Upvotes: 1

Related Questions