vue3 volar格式化代码

vetur是vue2的插件，vue3的很多语法糖都不认了，lz之前是用vetur格式化，装了volar之后发现格式化风格很丑，html组件属性都被挤在一行了，全网搜了半天都没找到如何格式化，最后去官网看了看，发现不支持设置格式化，需要用其他插件格式化，如下，安装prettier

注意要先把vetur禁用了，两者会有冲突，然后ctrl+shift+p 搜索setting，打开setting.json,在里面加入如下配置

"editor.formatOnSave": true,
  // eslint配置项，保存时自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  //自动设定eslint工作区
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "codestream.requestFeedbackOnCommit": false,
  "editor.fontLigatures": null,
  "security.workspace.trust.untrustedFiles": "open",
  "diffEditor.ignoreTrimWhitespace": false

然后格式化代码就是按照prettier插件的来格式化
附录下我的全部setting设置，包括vue2的，背景颜色

{
  "terminal.integrated.rendererType": "dom",
  "workbench.sideBar.location": "right",
  "workbench.colorCustomizations": {
    "[Default Light+]": {
      "editor.selectionHighlightBackground": "#f5f113",
      "editor.selectionBackground": "#f5f113",
      "editor.background": "#cce8cf",
      "editorGutter.background": "#cce8cf",
      "editorCursor.foreground": "#ff0000",
      "editor.lineHighlightBorder": "#d3d3d3"
    }
  },
  "editor.tokenColorCustomizations": {
    "[Default Light+]": {
      "comments": "#519657",
      "strings": "#7e3648",
      "functions": "#1c7887",
      "keywords": "#a207fc",
      "variables": "#0720fc",
      "numbers": "#e21d1d",
      "textMateRules": [
        {
          "name": "Operator",
          "scope": "keyword.operator",
          "settings": {
            "foreground": "#e21d1d",
            "fontStyle": "bold"
          }
        },
        {
          "name": "Punctuation",
          "scope": "punctuation",
          "settings": {
            "foreground": "#a207fc",
            "fontStyle": "bold"
          }
        }
      ]
    }
  },
  "editor.fontWeight": "500",
  "editor.fontSize": 18,
  "workbench.colorTheme": "Default Light+",
  "editor.fontFamily": "Consolas, '微软雅黑', monospace",
  "workbench.activityBarRight.visible": false,
  "workbench.iconTheme": "vscode-icons",
  "telemetry.enableUserPrivacyCollectionPrompt": false,
  // 上面是绿豆沙设置，下面是ctrl s自动对齐代码设置
  "editor.formatOnType": true,
  "eslint.options": { //指定vscode的eslint所处理的文件的后缀
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  "git.autofetch": true,
  "vetur.validation.template": true,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择 
  "vetur.format.defaultFormatter.html": "prettier",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  },
  "editor.suggestSelection": "first",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "vue3snippets.enable-compile-vue-file-on-did-save-code": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "prettier.bracketSameLine": true, // 但是这一项无法被识别，所以是无效的
  "prettier.vueIndentScriptAndStyle": true,
  "volar.autoCompleteRefs": true,
  "editor.formatOnSave": true,
  // eslint配置项，保存时自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  //自动设定eslint工作区
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "codestream.requestFeedbackOnCommit": false,
  "editor.fontLigatures": null,
  "security.workspace.trust.untrustedFiles": "open",
  "diffEditor.ignoreTrimWhitespace": false
}

2023年7月27日19:33:32补充下prettierrc的一些设置，在项目目录下，会有个.prettierrc.json的文件，里面可以配置下一些格式化参数，下面贴上我设置的，比如tab 2格之类的：

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "printWidth": 140,
  "endOfLine": "auto",
  "proseWrap": "preserve",
  "trailingComma": "es5",
  "useTabs": false,
  "quoteProps": "preserve"
}