VSCode自动格式化Vue代码

VsCode关于Vue的格式化插件非常多，网上的资料也五花八门，可以使用的非常少, 经过多次探索，终于找到一个可以用的方式。

Prettier-Code formatter

多次探索终于找到一个可用的简单操作的，首先安装Prettier插件

配置代码格式化文件

安装好了以后在项目根目录中添加.prettierrc文件

{
  "printWidth": 150,
    "overrides": [
        {
            "files": ".prettierrc",
            "options": { "parser": "json" }
        }
    ],
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "proseWrap": "preserve",
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "disableLanguages": ["vue"],
  "endOfLine": "auto",
  "eslintIntegration": false,
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".prettierignore",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "requireConfig": false,
  "stylelintIntegration": false,
  "trailingComma": "es5",
  "prettier.tslintIntegration": false
}

配置setting.json

打开setting.json文件 文件>首选项>设置 点击右上角的按钮切换到json文件
在setting.json中添加以下代码

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnType":true,
  "editor.formatOnSave": true,