vscode格式化文档后，换行比较短，看着难受，如下图：

解决方法：在vscode左下角找到设置

并搜索settings.json文件，粘贴如下代码，在格式化文档就会以设置的宽度换行

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  // #去掉代码结尾的分号 
  "prettier.semi": true,
  // #使用带引号替代双引号 
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "js-beautify-html", 
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
      // #vue组件中html代码格式化样式
    },
    "prettyhtml": {
      "printWidth": 160,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    } ,
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  },
  "liveServer.settings.port": 5501
}

再格式化文档，如下图：在一行，并且在窗口范围内就很舒服