vsCode格式化代码时格式问题

Question

用vsCode写vue，格式化时这种都换行了，看着好难受，想问怎么设置一下，让这种不换行显示 ？

<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;

相关插件装了beautify，prettier，vetur，自定义的设置如下：

{
    "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",
}

Answer 1

vetur配置

"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto" //标签属性格式化换行
        },
        "prettier": {
            "printWidth": 200,//这里这里这里
            "singleQuote": true,
        }
    },

Answer 2

不换行才难受呢,那么长的你确定要都挤在一行?

Answer 3

推荐属性>=3个换行对齐显示，一目了然。
对同事的不换行代码我都会换成换行的。：）

如果非要不换行，去看VScode里面插件的配置文件，试试这个配置

vetur.format.defaultFormatter.html

Answer 4

标签中的难道不是这样更加好看么？

第二个问题可以设置以下的规则试下：

"prettier.printWidth": 200, // 默认值是 80