vscode格式化文档

vscode格式化文档后,换行比较短,看着难受,如下图:
vscode格式化文档_第1张图片

解决方法:在vscode左下角找到设置
vscode格式化文档_第2张图片
并搜索settings.json文件,粘贴如下代码,在格式化文档就会以设置的宽度换行
vscode格式化文档_第3张图片

{
  // 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
}

再格式化文档,如下图:在一行,并且在窗口范围内就很舒服
vscode格式化文档_第4张图片

你可能感兴趣的:(vscode,ide,编辑器)