Can't get correct autoformat on save in Visual Studio Code with ESLint and Prettier

can definition
can synonym
can verb
can noun meaning
can bus
can band
cant
can't

in Visual Studio Code with ESLint and Prettier when working on .vue files, 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, with one line break(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?

VS Code workspace settings:

{
  "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
    }
  ],
  "editor.rulers": [
    80,
    100
  ]
}

.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'
  }
}

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.

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.

Can, Can may refer to: Contents. 1 Containers; 2 Music; 3 Other; 4 See also. Containers[edit]. Aluminum can � Drink can � Oil can � Steel and tin cans � Trash can� Can definition, to be able to; have the ability, power, or skill to: She can solve the problem easily, I'm sure. See more.

Can, Can was the leading avant-garde rock group of the 70s. Can experimented with noise, synthesizers, non-traditional music, cut-and-paste techniques, and, most� Define can. can synonyms, can pronunciation, can translation, English dictionary definition of can. to be able to, have the power or skill to: I can take a bus to the

I bumped into the same issue, and surprisingly found that prettier and vetur were conflicting. I had to disable vetur formatter and it now works as expected.

If you have this section in your editor's settings.json and you have prettier installed,

{
 "[vue]": {
     "editor.defaultFormatter": "octref.vetur",
  },
}

chances are, these two formatters are conflicting and thus the unexpected behaviour.

A quick workaround is to comment it as below, or simply delete it permanently.

{
 "[vue]": {
     // "editor.defaultFormatter": "octref.vetur",
  },
}

The Official CAN / Spoon Records Website, VerbEdit. can (third-person singular simple present can, present participle -, simple past could, past participle (obsolete except in adjectival use) couth). can definition: 1. to be able to: 2. used to say that you can and will do something: 3. to be allowed to: . Learn more.

I've struggled through a similar problem. I tried the solution above but didn't work for me, unfortunately. I'm using eslint and Vetur, didn't install prettier plugin but configured it via eslint and enabled "eslint.autoFixOnSave": true. I finally got the correct autoformat on save by removing the following configuration in settings.json. Not sure why but it's working for me.

  "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
    }
  ]

Will update this answer if I get other issues related to this.

can, 1.4Used to indicate that something is typically the case. 'antique clocks can seem out of place in modern homes'. More example sentences. 110 synonyms of can from the Merriam-Webster Thesaurus, plus 97 related words, definitions, and antonyms. Find another word for can. Can: to bring (as an action or operation) to an immediate end.

Can, can noun [C] (CONTAINER) � can verb [T] (CONTAIN) � can modal verb (ABLE) � can modal verb (PERMIT) � can modal verb (BE POSSIBLE) � can� Etymology 1 From Middle English can, first and third person singular of connen, cunnen (“to be able, know how”), from Old English can (n), first and third person singular of cunnan (“to know how”), from Proto-Germanic *kunnaną, from Proto-Indo-European *ǵneh₃- (whence know).

CAN, Word forms � 1. countable noun A can is a metal container in which something such as food, drink, or paint is put. � 2. verb [usually passive] When food or drink is� HANGZHOU, China, Aug. 04, 2020 (GLOBE NEWSWIRE) -- Canaan Inc. (NASDAQ: CAN) ("Canaan" or the "Company"), a leading high-performance computing solutions provider, today announced that the terms of

Can definition and meaning, Can It Hold Off a Second Wave? The sustained low rate of infection has surprised local health officials. But a resurgence may be inevitable,� Can was the leading avant-garde rock group of the 70s. Can experimented with noise, synthesizers, non-traditional music, cut-and-paste techniques, and, most importantly, electronic music.

Comments
  • I can't reproduce the issue. I even copied your .eslintrc.js and workspace settings. You mentioned not using the Prettier extension, but your workspace settings show Prettier settings (what extension uses those settings?). Do you have a link to a GitHub repo that reproduces the problem?
  • It's highly recommended to use "Vetur" when working with VueJS & VS Code: marketplace.visualstudio.com/items?itemName=octref.vetur (4.7 million downloads)
  • Having the exact same issue... any luck on this issue?
  • Tony, I'll see if I can. I am using ESLint with the prettier ESLint plugin, not the prettier VS Code extension. It is prettier+eslint that is supposed to do all this formatting and what this problem is about.
  • Bennett, I already have vetur.
  • Our fates were intertwined. Ditto situations and explanations. Following you from github.com/vuejs/eslint-plugin-vue/issues/557. Worked for me as well
  • Spent more time setting prettier and eslint to work correctly than actually coding -.- Your answer helped a lot, thanks! Edit: It seems to be working well with javascript.format.enable: true If you want to keep VSCode formatter to work for other files (json, gql, etc.) instead of "editor.formatOnSave": false add this line to settings.json: "[javascript]": { "editor.formatOnSave": false },
  • In some cases, it might be enough to go into the User Settings, search for eslint, then activate the checkbox for Eslint: Auto Fix On Save
  • This has been a real pain for me lately. This answer finally fixed it! Though I was able to remove the jsx/react stuff. Thanks!
  • "eslint.formatOnSave is now: "editor.codeActionsOnSave": { "source.fixAll.eslint": true}
  • This is not at all the behavior I am seeing. With 'vue/max-attributes-per-line': 'off', the long line is forced onto one line no matter how many line breaks I add. With 'vue/max-attributes-per-line': 1, the long line is broken only once no matter how many times I press Ctrl+S. Any other ideas?
  • You got this behavior with my repository?
  • This sample repository works on my machine, so seems quite likely to be another extension running first that we are not yet aware of.
  • Thanks for the thoughts; they weren't exactly my problem but helped nudge me to the answer.
  • Not working and for now autoFix is set as true in default.