格式化 HTML:即 vue(template)

1. 安装 Vetur 拓展
2. 配置 setting.json
  1. 打开 [文件] -> [首选项] -> [设置] -> [拓展] -> [Vetur]
  2. vsCode 跟新过后设置变成下拉选择的方式来配置拓展,但是可以点击右上方的···按钮,选择选择打开 setting.json,即可添加用户设置
  3. 配置 template 格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
  1. 不喜欢标签内属性换行,可以设置为:
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "auto"
    },
    "prettyhtml": {
        "wrapAttributes": false,
        "printWidth": 100,
        "singleQuote": false,
        "sortAttributes": false
    }
},
  1. 标签内属性换行,且对齐, 可以设置为:
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "force-aligned"
        // #vue组件中html代码格式化样式
    }
},
Logo

前往低代码交流专区

更多推荐