前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端代码风格自动化系列(四)之Prettier

前端代码风格自动化系列(四)之Prettier

作者头像
河马嘴不大
发布2022-12-24 12:22:05
3870
发布2022-12-24 12:22:05
举报
文章被收录于专栏:前后两端不设限

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

安装

代码语言:javascript
复制
npm install --save-dev prettier

配置

代码语言:javascript
复制
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}

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

这里有个官网的例子

代码语言:javascript
复制
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

格式化之后

代码语言:javascript
复制
foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-01-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装
  • 配置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档