详解vue保存自动格式化换行

网上找了好多方法改着也没用，后面从一个大佬上看到的，就摘下来了，字体的话还是原来系统自带的看着舒服，就自己添加上去了，需要改动的可自行修改，在右上角文件--首选项--设置--搜索setting---在setting.json编辑，把其他的注释掉，换上下面的代码块就可以了，字体大小和行高可自行修改

{
  //设置文字大小
  "editor.fontsize": 18,
  //设置文字行高
  "editor.lineheight": 20,
  //开启行数提示
  "editor.linenumbers": "on",
  // 在输入时显示含有参数文档和类型信息的小面板。
  "editor.parameterhints.enabled": true,
  // 调整窗口的缩放级别
  "window.zoomlevel": 0,
  // 文件目录
  // "workbench.icontheme": "vscode-icons",
  // 设置字体
  "editor.fontfamily": "'consolas','droid sans mono', 'courier new', monospace, 'droid sans fallback'",
  // 自动换行
  "editor.wordwrap": "on",
  // 自定义vscode面板颜色
  "workbench.colorcustomizations": {
    // "tab.activebackground": "#253046", // 活动选项卡的背景色
    // "activitybar.background": "#253046", //活动栏背景色
    // "sidebar.background": "#253046", //侧边栏背景色
    // "activitybar.foreground": "#23f8c8", //活动栏前景色(例如用于图标)
    "editor.background": "#292a2c" //编辑器背景颜色
  },
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectindentation": false,
  // 重新设定tabsize
  "editor.tabsize": 2,
  // #每次保存的时候自动格式化
  "editor.formatonsave": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertspacebeforefunctionparenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultformatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultformatter.js": "vscode-typescript",
  // 保存时运行的代码eslint操作类型。
  "editor.codeactionsonsave": {
    "source.fixall.eslint": true
  },
  // 添加emmet支持vue文件
  "emmet.includelanguages": {
    "wxml": "html",
    "vue": "html"
  },
  // 两个选择器中是否换行
  "minapp-vscode.disableautoconfig": true,
  //快速预览（右侧）
  "editor.minimap.enabled": true,
  // tab 代码补全
  "files.associations": {
    "*.wpy": "vue",
    "*.vue": "vue",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  // 用来配置如何使用eslint cli引擎api启动eslint。 默认为空选项
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  // 在onsave还是ontype时执行linter。默认为ontype。
  "eslint.run": "onsave",
  // 启用eslint作为已验证文件的格式化程序。
  "eslint.format.enable": true,
  // 语言标识符的数组，为此eslint扩展应被激活，并应尝试验证文件。
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "vue-html",
    "vue",
    "html"
  ],
  //关闭rg.exe进程 用cnpm导致会出现rg.exe占用内存很高
  "search.followsymlinks": false,
  // 给js-beautify-html设置属性隔断
  "vetur.format.defaultformatteroptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto",
      "wrap_line_length": 200,
      "end_with_newline": false
    },
    "prettyhtml": {
      "printwidth": 200,
      "singlequote": false,
      "wrapattributes": false,
      "sortattributes": false
    },
    "prettier": {
      "semi": false,
      "singlequote": true
    }
  },
  // style默认偏移一个indent
  "vetur.format.styleinitialindent": true,
  // 定义匿名函数的函数关键字后面的空格处理。
  "javascript.format.insertspaceafterfunctionkeywordforanonymousfunctions": true,
  // 定义函数参数括号前的空格处理方式。
  "typescript.format.insertspacebeforefunctionparenthesis": true,
  // 新版本消息
  "vsicons.dontshownewversionmessage": true,
  // 控制资源管理器是否在把文件删除到废纸篓时进行确认。
  "explorer.confirmdelete": true,
  // 使用eslint-plugin-vue验证<template>中的vue-html
  "vetur.validation.template": false,
  // 指定用在工作台中的颜色主题。
  // "workbench.colortheme": "one dark pro"
}

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!