Eslint-plugin-vue: Multiple attributes not being fixed correctly with line breaks - vue/max-attributes-per-line not working right

[szalapski]

It seems I can't get vue/max-attributes-per-line to auto-fix correctly.

For example, with vue/max-attributes-per-line set to 'off', and I try to add line breaks manually it corrects it to always have every element on no more than one line, no matter if it is 81, 120, 200, or more characters wide. How can I figure out what is forcing my markup elements onto exactly one line?

I am using ESLint version 5.1.0 and Visual Studio Code (without the Prettier Extension), with Prettier 1.14.2.

Here's the example in a .vue file-- I cannot make this go on multiple lines no matter what I do, when 'vue/max-attributes-per-line': 'off'. Every time I save, it forces the long line of markup to be all on one line.

<template>
  <font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>

If I set 'vue/max-attributes-per-line': 2, it formats like so (which is quite wrong as well).

      <font-awesome-icon v-if="statusOptions.icon" 
:icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />

If I try to reformat it manually, it just reverts to the above when I save.

Additionally, it seems to reformat twice when I hit Ctrl+S: first it reformats to put it all on one line, then a half-second later the formatting above results. Any ideas? What is causing this weirdness--are there multiple reformatters running? How do I figure out what the first one is to disable it?

.eslintrc.js:

module.exports = {
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    node: true,
    jest: true
  },
  globals: {
    expect: true
  },
  extends: [
    'prettier',
    'plugin:vue/recommended',        // /base, /essential, /strongly-recommended, /recommended
    'plugin:prettier/recommended',   // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier. 
    'eslint:recommended'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': [            // customizing prettier rules (not many of them are customizable)
      'error',
      {
        singleQuote: true,
        semi: false,
        tabWidth: 2
      },
    ],
    'no-console': 'off'
  }
}

[michalsnik]

Hey @szalapski ! Thanks for posting this issue.

I created new application using @vue/cli and used exactly your eslint config. It works fine 🤔 That is - max-attributes-per-line is disabled and attributes stay at the same line.

Can you please try to run eslint through the terminal to see whether it's not problem with your vscode configuration?

Also "auto-fix" in VSC works a bit differently than eslint --fix. VSC fixes only one thing at a time so if you have several reports, it'll fix one by one - and you might need to save the file few times to get everything sorted out, whereas eslint --fix fixes rules in a loop, until everything is fixed or once it reaches 10 loops.

[michalsnik]

Also you might try these settings in VSC:

"vetur.validation.script": false,
"vetur.validation.template": false,
"eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "vue", "autoFix": true },
        "vue-html"
  ],

[szalapski]

Yes, without changing any settings, ESLint --fix does indeed format properly--breaking all my .vue template elements into many lines properly. So any ideas how I whip VS Code into shape? The above settings didn't help, but I am at a loss how as to even know what is interfering. Any ideas?

To emphasize, when I save in VS Code, a long HTML element will collapse to one line then break to two lines a half-second later, all from one save operation. I'm expecting it instead to break it up into many lines. It would be okay if it took several saves, but instead the first save shows this behavior as well as every subsequent save.

Here are my VS Code settings, just in case.
User

{
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  "editor.fontFamily": "'Fira Code',Consolas, 'Courier New', monospace, 'Segoe UI Emoji'",
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "gitlens.historyExplorer.enabled": true,
  "team.showWelcomeMessage": false,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "explorer.confirmDragAndDrop": false,
  "git.confirmSync": false,
  "editor.mouseWheelZoom": true,
  "gitlens.gitExplorer.files.layout": "auto",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "diffEditor.ignoreTrimWhitespace": true,
  "explorer.confirmDelete": false,
  "terminal.integrated.rendererType": "dom",
  "terminal.integrated.fontSize": 11,
  "workbench.colorTheme": "Visual Studio Light",
}

Workspace

{
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[vue]": {
    "editor.tabSize": 2
  },
  "[csharp]": {
    "editor.tabSize": 4
  },
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.referencesCodeLens.enabled": true,
  "vetur.validation.script": false,
  "vetur.validation.template": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx"
    ]
  },
  "eslint.validate": [
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    "vue-html",
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.tabWidth": 2,
  "editor.rulers": [
    80,
    100
  ]
}

[michalsnik]

I see you have "editor.formatOnSave": true, - it might be causing your problems

[szalapski]

If I set"editor.formatOnSave": false,it no longer formats on save at all, which is worse. Did you somehow get it to format on save without "editor.formatOnSave": true?

Do you think I have multiple reformatters running? Any idea how I figure out what the first one is to disable it?

[szalapski]

asking here: https://stackoverflow.com/questions/52102705/cant-get-correct-autoformat-on-save-in-visual-studio-code-with-eslint-and-prett

[michalsnik]

Yes, I have "editor.formatOnSave": false and "vetur.validation.template": false and I'm fully dependant on ESLint and how it fixes my code on save. I also use prettier as an integration with ESLint, hence I don't have any formatters running in parallel causing problems.

I also see you found a solution in SO thread 👍

[szalapski]

Short answer: I needed: "editor.formatOnSave": false, "javascript.format.enable": false.

I finally found the magical combination of settings, thanks to this thread from Wes Bos on Twitter. I was right in my suspicion that there seem to be multiple conflicting formatters. Though I'm not sure what they actually are, I was able to turn off all but eslint as follows:

In the VS Code settings, I need:

  "editor.formatOnSave": false,
  "javascript.format.enable": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [ ".html", ".js", ".vue", ".jsx" ]
  },
  "eslint.validate": [
    { "language": "html", "autoFix": true },
    { "language": "vue", "autoFix": true },
    { "language": "javascript", "autoFix": true },
    { "language": "javascriptreact", "autoFix": true }
  ]

In .eslintrc.js, then I can use the settings in my original post and then also change 'vue/max-attributes-per-line' as desired. Then VS Code's ESLint plugin will format code one step at a time on every save, much as kenjiru wrote. One last snag: HMR won't pick up these changes, so rebuild from scratch.

[SebastianMieszczanczyk]

It is not working for me - now some options are deprecated:

• "eslint.autoFixOnSave": true Use editor.codeActionsOnSave instead with a source.fixAll.eslint member. So I tried:
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true } and still formating to a single line. Do you have any idea why?

Here my eslintrc,json and settings:

{
"terminal.integrated.shell.windows": "C:\Program Files\Git\bin\bash.exe",
"workbench.startupEditor": "newUntitledFile",
"files.eol": "n",
"editor.tabSize": 2,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"editor.tabCompletion": "onlySnippets",
"editor.suggest.snippetsPreventQuickSuggestions": false,
"emmet.showSuggestionsAsSnippets": true,
"editor.detectIndentation": false,
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[vue]": {
"editor.formatOnSave": false
},
"eslint.format.enable": false,
"eslint.validate": [
"html",
"vue",
"javascript",
"javascriptreact"
],
"editor.codeActionsOnSaveTimeout": 1000,
"javascript.format.enable": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
}
}

here eslintrc.json:

{
"env": {
"browser": true,
"es6": true,
"node": true,
"jest/globals": true
},
"plugins": [
"import",
"jest",
"nuxt",
"prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"extends": [
"airbnb-base",
"plugin:nuxt/recommended",
"prettier",
"plugin:prettier/recommended",
"prettier/vue"
],
"rules": {
"import/no-unresolved": "off",
"no-param-reassign": [
2,
{
"props": false
}
],
"dot-notation": [
2,
{
"allowKeywords": true,
"allowPattern": ""
}
],
"vue/no-v-html": "off",
"vue/require-prop-types": "error",
"vue/require-default-prop": "off",
"vue/valid-v-on": [
"error",
{
"modifiers": [
"prevent",
"lazy"
]
}
],
"vue/max-attributes-per-line": "off",
// "max-attributes-per-line": "off",
"linebreak-style": [
"error",
"unix"
],
"prettier/prettier": [
"error",
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80,
"semi": true
}
],
"nuxt/no-this-in-fetch-data": "off"
// "no-confusing-arrow": [
// "error",
// {
// "allowParens": false
// }
// ]
},
"globals": {
"$nuxt": true
},
"settings": {
"import/resolver": {
"alias": [
[
"@",
"./"
],
[
"~",
"./"
]
]
}
}
}