vscode保存vue代码自动格式化

首先保证vetur，eslint, prettier 都安装。

打开preferences ->settings ,输入Vetur ,找到Edit in settings.json,加上下面代码. 

 mac系统可以直接点这个图标进入配置页面

 "vetur.format.defaultFormatterOptions": {
        "prettier": {
          "semi": false, 
          "singleQuote": true,
          "trailingComma": "none" //禁止尾随单引号
        }
      }

详细的配置

{
  "workbench.colorTheme": "Dracula",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",
  "editor.fontFamily": "Meslo LG M for Powerline,Menlo, Monaco, 'Courier New', monospace",
  // "editor.codeActionsOnSave": true,
  "sync.gist": "1ed8ebc6db8dadadb91df26c708d699d",
  "files.autoSave": "onFocusChange",
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化ß
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.alwaysShowStatus": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "html"
  ],
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.validation.template": false,
  "vetur.format.defaultFormatterOptions": {

    "prettier": {
      "semi": false,
      "printWidth": 120,
      "singleQuote": true
    },   
    "js-beautify-html": {
      "wrap_attributes": "auto",
      "end_with_newline": false
    },
    "prettyhtml": {
      "printWidth": 120,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "editor.wordWrapColumn": 180,      
  "search.followSymlinks": false,
  "prettier.printWidth": 120,
  "vetur.format.enable": false,
  "editor.columnSelection": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.completion.scaffoldSnippetSources": {},
  "explorer.confirmDelete": false,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "todohighlight.include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.html", "**/*.php", "**/*.css", "**/*.scss"],
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascript": "javascriptreact"
  },
  "prettier.vueIndentScriptAndStyle": true,
  "javascript.preferences.quoteStyle": "single",
  "eslint.format.enable": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "window.zoomLevel": 0,
  "editor.fontSize": 14,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}