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

Patrick Szalapski

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.

Patrick 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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to get LINQ to Autoformat in Visual Studio appropriately?

From Java

Can't zoom out in visual studio code

From Dev

Can't launch Visual Studio Code on Ubuntu

From Dev

I can't install Visual Studio Code

From Dev

No ESLint configuration found for Visual Studio Code

From Dev

I can't run a correct query on visual studio

From Dev

Visual Studio 2013 Can't save, build, or rebuild solution

From Dev

Visual Studio 2013 Installer Project can't save .vdproj file

From Dev

Can't get jQuery to execute code in the correct order

From Java

Visual Studio Code can't resolve angular's tsconfig paths

From Dev

Can't step over code in Visual studio while debugging

From Dev

Visual Studio Code can't run in Ubuntu 18.04

From Dev

Can't get rid of item in Visual Studio 2015

From Dev

Can't access repository to get object in visual studio MVC

From Dev

Can't get Visual Studio Diagnostic Tools to work

From Dev

Can't get a simple Visual Studio macro to work

From Dev

Can't access repository to get object in visual studio MVC

From Dev

Can't get Visual Studio to allow me to debug, only "Attach"

From Dev

Prevent Prettier from converting single line object declarations into multi line in Visual Studio Code?

From Dev

How to get correct FrameworkSDKPath in Visual Studio

From Dev

How can i get jade template to compile automatically in visual studio on save operation?

From Dev

Can't get source code to build in JNI folder in Android Studio

From Dev

Android Studio AutoFormat Plugin

From Dev

Android Studio AutoFormat Plugin

From Java

ESLint couldn't find the config "prettier" to extend from

From Dev

Visual Basic using Visual Studio 2012 with Access! Can't get image url's to load into picture box

From Dev

Can I click on a filename and line number in iterm2 to open that file in Visual Studio Code at the correct line number in OS X

From Java

Settings to copy paste with correct indentation in Visual Studio Code

From Dev

Can we write extensions for Visual Studio Code?

Related Related

  1. 1

    How to get LINQ to Autoformat in Visual Studio appropriately?

  2. 2

    Can't zoom out in visual studio code

  3. 3

    Can't launch Visual Studio Code on Ubuntu

  4. 4

    I can't install Visual Studio Code

  5. 5

    No ESLint configuration found for Visual Studio Code

  6. 6

    I can't run a correct query on visual studio

  7. 7

    Visual Studio 2013 Can't save, build, or rebuild solution

  8. 8

    Visual Studio 2013 Installer Project can't save .vdproj file

  9. 9

    Can't get jQuery to execute code in the correct order

  10. 10

    Visual Studio Code can't resolve angular's tsconfig paths

  11. 11

    Can't step over code in Visual studio while debugging

  12. 12

    Visual Studio Code can't run in Ubuntu 18.04

  13. 13

    Can't get rid of item in Visual Studio 2015

  14. 14

    Can't access repository to get object in visual studio MVC

  15. 15

    Can't get Visual Studio Diagnostic Tools to work

  16. 16

    Can't get a simple Visual Studio macro to work

  17. 17

    Can't access repository to get object in visual studio MVC

  18. 18

    Can't get Visual Studio to allow me to debug, only "Attach"

  19. 19

    Prevent Prettier from converting single line object declarations into multi line in Visual Studio Code?

  20. 20

    How to get correct FrameworkSDKPath in Visual Studio

  21. 21

    How can i get jade template to compile automatically in visual studio on save operation?

  22. 22

    Can't get source code to build in JNI folder in Android Studio

  23. 23

    Android Studio AutoFormat Plugin

  24. 24

    Android Studio AutoFormat Plugin

  25. 25

    ESLint couldn't find the config "prettier" to extend from

  26. 26

    Visual Basic using Visual Studio 2012 with Access! Can't get image url's to load into picture box

  27. 27

    Can I click on a filename and line number in iterm2 to open that file in Visual Studio Code at the correct line number in OS X

  28. 28

    Settings to copy paste with correct indentation in Visual Studio Code

  29. 29

    Can we write extensions for Visual Studio Code?

HotTag

Archive