问题:因为最近和同事合作一个基于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
配置文件格式化了。且格式化的配置在项目内,无论是谁拉代码,最终保存都会按统一规范格式化,且可以帮助开发者自动格式化代码。现在可以随便进入一个文件,保存试试效果了。