vscode如何格式化代码，让许多属性放在一行?

Question

问题描述

如图，我的vscode代码默认是第一张，整个input的属性都放在好几行，非常不喜欢，怎么才能实现一键格式化，变成第二章的代码？

相关代码

Answer 1

推荐你使用prettier配合git hook做自动格式化，我一直这么用，感觉还不错。

这是prettier的官网，找到 Option2.pretty-quick，如下：

执行上面提示的三条命令，然后会在你的项目根目录下生成.husky目录，里面自动帮你配置了git hook，然后你在做git commit的时候，就会自动执行npx pretty-quick --staged，它会帮助你采用prettier的默认风格进行格式化代码。

当然，你也可以在根目录下配置如下两个文件：

.prettierignore
.prettierrc.json

.prettierignore的内容通常和.gitignore保持一致，用于忽略格式化，.prettierrc.json用于配置自定义的格式化方案，比如：

{
  "singleQuote": true, // 使用单引号
  "semi": true, // 使用分号结尾
  "bracketSameLine": true // 头标签的 > 和属性保持同一行
}

prettier默认每行最大宽度是 80 个字符，这意味着如果想属性不换行，那么可以尝试把printWidth配置成更大的值，如："printWidth": 1000。更多配置项可以参考options，相信你可以得到自己喜欢的风格。

不过我个人认为，如果和别人一起合作做项目的话，代码风格还是保持统一比较好。

Answer 2

看看你的vscode配置是不是有这个配置：

"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },

Answer 3

看vscode使用了什么插件，比如 vutur、volar、prettier等，猜测是prettier限制了单行最长字符

Answer 4

你应该装prettier和vetur了吧，文件-首选项-设置-打开设置(json)，下面的配置自己看着设置一下放在设置的最后。你的需求的话，改printWidth就行了

    "vetur.format.defaultFormatterOptions": {
        "prettier": {
          "singleQuote": true, // 如果为 true，将使用单引号而不是双引号
          "semi": false, // 是否在每行末尾添加分号
          "printWidth": 150, //  每行超过多少字符自动换行
          "wrapAttributes": false, // html标签属性换行
          "trailingComma": "none" // 尽可能控制尾随逗号的输出
        }
    },