格式化有多种方案

1. eslint进行格式化

• settings.json里配置

{
  "editor.fontSize": 16,
  "editor.smoothScrolling": true,
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "editor.renderWhitespace": "all",
  "editor.quickSuggestions": {
    "strings": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  //这一行很重要
  "editor.defaultFormatter": "dbaeumer.vscode-eslint", //自动格式化文档程序由它指定
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.hover.delay": 0,
  "editor.quickSuggestionsDelay": 0,
  //打开文件不覆盖
  "workbench.editor.enablePreview": false,
  // 同步 Git 存储库前是否请先进行确认。
  "git.confirmSync": true,
  //***********************************************//
  // #通过eslint进行格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //***********************************************//
  // #通过vetur对vue文件进行格式化
  // "[vue]": {
  //   "editor.defaultFormatter": "octref.vetur"
  // },
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  // "vetur.format.defaultFormatter.js": "prettier-eslint",
  //***********************************************//
  "eslint.migration.2_x": "off",
  "files.autoSave": "off",
  "terminal.integrated.fontSize": 16,
  "debug.console.fontSize": 15,
  "window.zoomLevel": 1,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "explorer.confirmDragAndDrop": false,
  "workbench.tree.indent": 16,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src",
    "/": "${workspaceRoot}/"
  },
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
  },
  // "cssrem.rootFontSize": 37.5,
  "workbench.colorTheme": "Quiet Light",
  "vetur.completion.autoImport": false,
  "security.workspace.trust.untrustedFiles": "open",
  "eslint.lintTask.enable": true,
  "eslint.alwaysShowStatus": true,
  //***********************************************//
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "wrap_attributes": "force-aligned", //!!!!!! force-aligned 也可以设置为“ auto ”，效果会不一样
      // - auto: 仅在超出行长度时才对属性进行换行。
      // - force: 对除第一个属性外的其他每个属性进行换行。
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
      // - force-expand-multiline: 对每个属性进行换行。
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
      "wrap_line_length": 200,
      "end_with_newline": false,
      "semi": false,
      "singleQuote": true
    },
    "prettier": {
      "semi": false,
      "singleQuote": true,
      "editor.tabSize": 2
    },
    "prettyhtml": {
      "printWidth": 160,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "files.associations": {
    "*.vue": "vue",
    "*.wpy": "vue",
    "*.wxml": "html",
    "*.wxss": "css"
  },
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always",
  "explorer.confirmDelete": false,
  "typescript.locale": "zh-CN"
}

2. eslint + prettier格式化

• 这个是coderwhy的vue3项目里采用的方案
• vscode安装prettier和eslint插件
• 该模式会以 .prettierrc的配置作为格式化规则，eslint也会以它为准进行报错提示
• 这种情况要配置用prettier来格式化，若指定的是eslint作为默认格式化工具会报错（所以vscode要安装prettier插件）
• settings.json里 这一行修改

"editor.defaultFormatter": "esbenp.prettier-vscode", //自动格式化文档程序由它指定

解决eslint和prettier冲突的问题：

安装插件：（vue在创建项目时，如果选择linter+prettier，那么这两个插件会自动安装）

npm i eslint-plugin-prettier eslint-config-prettier -D

.eslintrc.js文件里要加上'plugin:prettier/recommended'

加上后的结构：

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],

如此，eslint的规则会以prettier里的配置为准

3. 用vetur格式化（vue2）

• 上面对应注释解开就行

4. 用volar格式化

• settings.json

  "editor.defaultFormatter": "Vue.volar",