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

问题:因为最近和同事合作一个基于vue的项目,但是每个人的习惯不一样,和本地IDE的格式规范也不一样,往往造成提交的代码格式不一,十分不方便
目标:基于vue,让代码的格式与每个人的IDE格式配置无关,保存能自动格式化代码,且保持统一风格。
准备工作:

1、Prettier插件:在vscode中装Prettier插件。
《vscode用Prettier格式化代码,让vue项目统一代码规范》
2、将vscode配置成保存自动格式化。打开设置,点击代码视图,加入如下代码。
《vscode用Prettier格式化代码,让vue项目统一代码规范》

{   "editor.formatOnSave": true}
用vue创建项目,在这个示例中是采用vue ui创建项目。

1、选择手动配置
《vscode用Prettier格式化代码,让vue项目统一代码规范》
2、勾选Linter/Formatter
《vscode用Prettier格式化代码,让vue项目统一代码规范》
3、选择ESLint + Prettier。且勾选Lint on save ,这可以让你的项目对于代码的格式和错误提供警告和报错。
《vscode用Prettier格式化代码,让vue项目统一代码规范》4、最后点击创建项目。
5、项目创建后,加入.prettierrc文件。在.prettierrc文件中配置代码规范,文件位置和内容如下。
《vscode用Prettier格式化代码,让vue项目统一代码规范》

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

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

    原文作者:sq-web
    原文地址: https://blog.csdn.net/VRSUQ/article/details/106946590
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞