一、背景
1.当前系统平台的很多前端工作都是有后端人员开发去完成，但是后端开发对于前端代码格式化的不重视以及vscode的prettier插件的安装和配置不够了解，导致前端代码格式比较错乱，没有统一的一个规范和标准，导致定位问题的时候带来调试上的不便，而且提交代码也容易产生冲突，导致工作效率降低。
2.前端开发人员内部的prettier插件的配置也没有统一，以上后端人员出现的问题在前端开发人员的基础上也容易出现，
二、解决方案
由前端同学统一梳理出一份prettier插件的配置json文件，编写好详细的配置步骤，统一在整个部门内部要求所有的开发人员统一去配置这一套规则，
三、VS code的prettier插件安装步骤
1.Prettier - Code formatter和vetur的安装
2.点击安装下载即可
四、VS code的prettier插件配置步骤
1.VSCode左下角的设置图标–》设置–》输入框中搜索Code Actions On Save
2.选择setting.json这个文件打开
3.将以下文件内容直接复制到这个文件下，保存即可
"editor.linkedEditing": true, "editor.tabSize": 2,"editor.formatOnType": false,"editor.wordWrap": "off","editor.formatOnSave": true, // vscode 默认是启用根据文件类型自动设置 tabSize 的值 // 保存时按照哪个规则进行格式化 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "beautify.onSave": true, "beautify.JSfiles":[ "js", "json", "jsbeautifyrc", "jshintrc", "ts", "css", "html" ],"settingsSync.ignoredSettings": [],"git.confirmSync": false,"gitlens.gitCommands.closeOnFocusOut": true,"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode"},"window.zoomLevel": 0,"[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode"},"javascript.format.insertSpaceBeforeFunctionParenthesis": true,"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto", "wrap_line_length": 500, //换行长度 // #vue组件中html代码格式化样式 } },"minapp-vscode.disableAutoConfig": true,"explorer.confirmDelete": false,"vetur.format.options.tabSize": 4,"eslint.autoFixOnSave": true,"eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ],"editor.formatOnPaste": true,"prettier.vueIndentScriptAndStyle": true,"vsicons.dontShowNewVersionMessage": true,"html.format.enable": false,"editor.detectIndentation": false,
