vscode用Prettier格式化代码，让vue项目统一代码规范

问题：因为最近和同事合作一个基于vue的项目，但是每个人的习惯不一样，和本地IDE的格式规范也不一样，往往造成提交的代码格式不一，十分不方便

目标：基于vue，让代码的格式与每个人的IDE格式配置无关，保存能自动格式化代码，且保持统一风格。

准备工作：

1、Prettier插件：在vscode中装Prettier插件。

2、将vscode配置成保存自动格式化。打开设置，点击代码视图，加入如下代码。

{  "editor.formatOnSave": true}

用vue创建项目，在这个示例中是采用vue ui创建项目。

1、选择手动配置

2、勾选Linter/Formatter

3、选择ESLint + Prettier。且勾选Lint on save ，这可以让你的项目对于代码的格式和错误提供警告和报错。
4、最后点击创建项目。
5、项目创建后，加入

.prettierrc

文件。在

.prettierrc

文件中配置代码规范，文件位置和内容如下。

{
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"files.insertFinalNewline": true,
"printWidth": 80
}

6、这样就能按

.prettierrc

配置文件格式化了。且格式化的配置在项目内，无论是谁拉代码，最终保存都会按统一规范格式化，且可以帮助开发者自动格式化代码。现在可以随便进入一个文件，保存试试效果了。