Vetur: Please leave alone line wrapping

[mariusa]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: Linux
• Vetur version: 0.11.7
• VS Code version: 1.19.2

Problem

VS code already has settings for line wrapping, and those work fine:

    "editor.wordWrap": "wordWrapColumn",
    "editor.wordWrapColumn": 120,

When vetur is enabled, it wraps lines around column 80. Please, let VS code handle that. Focus on areas not handled by VS code.

Reproducible Case

            if (typeof ar.applicability === "object" && ar.applicability) {
              if (typeof ar.applicability.when === "object" && ar.applicability.when) {
                if (typeof ar.applicability.when.months_since_last === "number" 
                && moment().diff(al.done_date, "months")  > ar.applicability.when.months_since_last) {
                  l("ar.applicability.when.months_since_last2", ar.applicability.when.months_since_last,
                    moment().diff(al.done_date, "months")
                  )
                }
              }
            }

[octref]

Vetur uses prettier for <script> section, so you need to set its printWidth accordingly.

[kazzit]

However, It doesn't seem to follow my "printWidth" under vscode's extension settings. I tested by setting it to 30, which affects all .js file but none of the .vue files.

[SandyGifford]

Yeah, this issue should not have been closed so quickly. The provided solution does not fix it at all.

[octref]

https://vuejs.github.io/vetur/formatting.html#settings

[SandyGifford]

from my config

    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "tabWidth": 4,    // works
            "printWidth": 400 // does not work
        }
    },

Yeah - it doesn't seem to make a difference. I've tried both in .prettierrc and in the VSCode settings file.

[octref]

@SandyGifford Please give a repro by forking https://github.com/octref/veturpack.

[bcreeves]

I have the same issue.

[DarkLite1]

Having the same issue. I have code like this:

watch(() => Screen.width, () => setMiniState(undefined))

That gets formatted to this:

watch(
   () => Screen.width,
   () => setMiniState(undefined)
)

Even when adding printWidth to .prettierrc.js:

module.exports = {
    singleQuote: true,
    semi: false,
    trailingComma: "es5",
    arrowParens: "always",
    printWidth: 120
}

Although I know that the settings from the .prettierrc.js file are respected. Because semicolons are added/removed based on these settings. So I would expect Vetur to respect the printWidth line too.

[kalimulhaq]

I have the same ISSUE. This is such a weird and ugly behavior.

[yoyo930021]

Please provide reproducible case and open a new issue.
https://github.com/vuejs/vetur/blob/master/.github/NO_REPRO_CASE.md

[tenzint]

I'd like to thank this issue page and contributors here. I needed this:

"vetur.format.defaultFormatterOptions": {
        "prettier": {
            "tabWidth": 4,    // works
            "printWidth": 100 // does not work
        }
    },

I had an issue where Vetur would format in a way that it combines 2-6 lines into one line and that would cause me the max-len error of eslint. After setting the printWidth to 100 or less, everything becomes simple to solve eslint errors. Vetur will not deny Insertion of new lines any more upon formatting.
(I actually like to format my codes)

[Mater1996]

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    },
    "prettyhtml": {
      "wrapAttributes": false,
      "printWidth": 80
    },
    "prettier": {
      "semi": false,
      "singleQuote": true,
      "eslintIntegration": true,
      "trailingComma": "none",
      "printWidth": 80
    }
  },