前端代码风格自动化系列（四）之Prettier

wangjuntytl 发布于2019-08-23 14:33 / 406人阅读

摘要：这里有个官网的例子格式化之后让我们专注于业务逻辑，无需再纠结代码风格，配合其它工具，实现了代码提交到仓库前，统一格式化。

Prettier是一个支持多语言的代码格式工具，如常用的：js、jsx、Vue、Flow、Ts、HTML、CSS等，非常全面，将代码解析为AST，然后重新组装，目的是最终输出风格统一的代码，对比eslint对error的fix要强一些，如最大长度的改动，eslint只是对有问题的地方进行格式化修改，不改动源代码风格，而prettier是对全量的代码进行格式化。

安装

npm install --save-dev prettier

配置

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}

这里我们结合之前用到的husky、lint-staged，默认prettier是直接标准输出到终端的，--write，这个配置代表直接改写文件。

这里有个官网的例子

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

格式化之后

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

prettier让我们专注于业务逻辑，无需再纠结代码风格，配合其它工具，实现了代码提交到仓库前，统一格式化。

专线服务超融合服务器系列之系列之二架构之坑系列代码风格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100790.html

前端代码风格自动化系列（五）之共同出击

摘要：我们在前面的四篇中介绍了这些工具，可以完成以最小的代价在提交到远程仓库前，格式化为统一风格的代码，大家都很熟悉这里就不列举了。下面举一个配置。这里对于项目里分别做了提交前格式化操作，对于提交规范做了校验。我们在前面的四篇中介绍了husky、commitlint、lint-staged、prettier这些工具，可以完成以最小的代价在Git提交到远程仓库前，格式化为统一风格的代码，es...

pumpkin9 2019-08-23 14:33 评论0 收藏0
更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题

摘要：整个代码检查和格式化流程应该规范为如下步骤使用并且尝试自动修复所有问题有提示，可以进行修复，按照配置文件来进行修复。参考文档如何花分钟解决产生的各种错误的记忆现场本文转载自我的更新版梳理前端开发使用和来检查和格式化代码问题更新版，之前的版本可以看这里：梳理前端开发使用eslint和prettier来检查和格式化代码问题一、问题痛点在团队的项目开发过程中，代码维护所占的时间比重...

GitChat 2019-08-26 12:02 评论0 收藏0
我为什么推荐Prettier来统一代码风格

摘要：但是，有条原则应该是对的少数服从多数用工具统一风格。我曾经以为，程序员有自己独特的代码风格挺好的。业界有一些流行的代码风格，比如和。你也可以使用来统一风格。比如，的配置，只能统一示例的代码风格，而不能统一后面两者。相比于代码风格，我更推荐。译者按: 关于代码风格，不同的人有不同的偏好，其实并没有什么绝对的对错。但是，有 2 条原则应该是对的：少数服从多数；用工具统一风格。原文...

YJNldm 2019-08-23 16:11 评论0 收藏0
使用ESLint+Prettier来统一前端代码风格

摘要：但是关于代码风格，我们很难区分谁对谁错，不同的人有不同偏好，唯有强制要求才能规避争论。所以，团队关于代码风格必须遵循两个基本原则少数服从多数用工具统一风格。本文将介绍，如何使用来统一我们的前端代码风格。加分号还是不加分号？tab还是空格？你还在为代码风格与同事争论得面红耳赤吗？正文之前，先看个段子放松一下：去死吧！你这个异教徒！想起自己刚入行的时候，从svn上把代码checko...

Corwien 2019-08-22 18:07 评论0 收藏0
梳理前端开发使用eslint-prettier检查和格式化代码

摘要：梳理前端开发使用检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。使用格式化所有代码。参考文档如何花分钟解决产生的各种错误的记忆现场原文转载梳理前端开发使用检查和格式化代码线上猛如虎，线下怂如鼠梳理前端开发使用eslint-prettier检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编...

yangrd 2019-08-22 17:01 评论0 收藏0