VSCode使用Eslint Beautify对vue代码格式化

VSCode需要安装 Eslint、vetur、Beautify插件

配置VSCode settings.json文件

{
    "window.zoomLevel": 0.96,
    "files.associations": {
        "*.vue": "vue"
    },
    "beautify.language": {
        "js": {
            "type": ["javascript", "json", "jsonc"],
            "filename": [".jshintrc", ".jsbeautifyrc"]
        },
        "css": ["css", "scss"],
        "html": ["htm", "html", "vue"]
    },
    "eslint.validate": [
        "javascript",
        "html",
        "vue",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": true,
    "[vue]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "javascript.updateImportsOnFileMove.enabled": "always"
}

.eslintrc.js文件配置

module.exports = {
  root: true,
  extends: 'elm',
  plugins: ['vue'],
  parser: 'babel-eslint',
  globals: {
    '_basepath_': true,
    '$': true,
    '_': true
  },
  rules: {
    'indent': ['error', 2, { 'SwitchCase': 1, 'ArrayExprets': 'first' }]
  }
}

.jsbeautifyrc文件配置

  {
    "brace_style": "collapse,preserve-inline",
    "indent_char": " ",
    "indent_size": 2,
    "wrap_line_length": 0,
    "end_with_newline": true,
    "preserve_newlines": true,
    "max_preserve_newlines": 1,
    "keep_array_indentation": true,
    "keep_function_indentation": false,
    "wrap_attributes": "auto",
    "indent_level": 1,
    "css": {
      "indent_size": 2
    }
  }