Format problems when formatting code in vsCode

when using vsCode to write vue, format, this kind of line breaks, it looks very uncomfortable, I would like to ask how to set it up, so that this kind of non-line wrapping display?

<el-select
    v-model="configQueryParam.vehicleType"
    :placeholder="$t("priceCoefficientConfig.vehicleType")"
>
    <el-option
        v-for="item in vehicleTypeData"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    ></el-option>
</el-select>
this.pageSize = result.pageSize
    ? result.pageSize
    : this.pageSize;

related plug-ins install beautify,prettier,vetur, custom settings as follows:

{
    "editor.fontSize": 18,
    "git.ignoreMissingGitWarning": true,
    "editor.minimap.maxColumn": 60,
    "prettier.disableLanguages": [],
    "vetur.validation.template": false,
    "workbench.colorTheme": "Default Light+",
    "element-helper.version": "2.4",
    "editor.formatOnType": true,
    "editor.detectIndentation": false,
    "prettier.tabWidth": 4,
    "editor.quickSuggestions": {
        "strings": true
    },
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "vetur.format.defaultFormatterOptions": {
      "prettyhtml": {
        "tabWidth": 4,
      }
    },
    "editor.wordWrapColumn": 120,
    "editor.wordWrap": "on",
    "files.autoSave": "onWindowChange",
}

vetur configuration

"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto" //
        },
        "prettier": {
            "printWidth": 200,//
            "singleQuote": true,
        }
    },

it's hard not to change lines. Are you sure you want to squeeze all the long lines together?


recommend attribute > = 3 line feed alignment display, clear at a glance.
I will change to line breaks for my colleagues' code that does not wrap. :)

if you must not break lines, look at the plug-in configuration file in VScode and try this configuration

vetur.format.defaultFormatter.html

Doesn't the

tag look better this way?

for the second question, you can set the following rules to try:

"prettier.printWidth": 200, //  80
Menu