vscode 中对vue进行格式化

开发环境

1. vscode

安装插件

vetur, prettier, editor, 

常用配置

{
    "git.ignoredRepositories": [
    ],
    "eslint.validate": [
      "javascript",
      {
        "language": "vue",
        "autoFix": true
      },
      "javascriptreact",
      "vue"
    ],
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "window.zoomLevel": 1,
    "terminal.integrated.shell.windows": "",
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        // auto force force-aligned force-expand-multiline
        // 对应四个值 auto是不换行
        "wrap_attributes": "auto"
      },
      "prettyhtml": {
        "printWidth": 100,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": false
      }
    },
    "eslint.options": {
      "extensions": [".js", ".vue"]
    },
    "editor.quickSuggestions": {
      "strings": true
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.tabSize": 2,
    "files.associations": {
      "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "editor.cursorBlinking": "smooth",
    "editor.minimap.renderCharacters": false,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    // 让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    // 让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "element-helper.version": "2.5",
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.exclude": {
      // "**/node_modules": true
    }
  }