为了账号安全,请及时绑定邮箱和手机立即绑定

Prettier介绍与基本用法

标签:
JavaScript

Prettier

Prettier的中文意思是“漂亮的、机灵的”,也是一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。

Prettier具有以下几个有优点:

  1. 可配置化

  2. 支持多种语言

  3. 集成多数的编辑器

  4. 简洁的配置项

使用Prettier在code review时不需要再讨论代码样式,节省了时间与精力。下面使用官方的例子来简单的了解下它的工作方式。

Input

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

Output

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

安装

使用yarn

yarn add prettier --dev --exact# or globallyyarn global add prettier

使用npm

npm install --save-dev --save-exact prettier# or globallynpm install --global prettier

和ESLint一起使用

很多项目都会使用ESLint来提高代码的质量,有两种方式能够集成Prettier和ESLint,你也可以单独或同时使用它们。

使用ESLint运行Prettier

如果你已经在你的项目中使用ESLint并且想要只通过单独一条命令来执行你的所有的代码检查的话,你可以使用ESLint来为你运行Prettier。

只需要使用eslint-plugin-prettier来添加Prettier作为ESLint的规则配置。

yarn add --dev prettier eslint-plugin-prettier

.eslintrc.json

{  "plugins": ["prettier"],  "rules": {    "prettier/prettier": "error"
  }
}

关闭ESLint的格式规则

你是否通过ESLint来运行Prettier,又或者是单独运行两个工具,那你大概只想要每个格式问题只出现一次,而且你特别不想要ESLint仅仅是和Prettier有简单的不同和偏好而报出“问题”。

所以你大概想要禁用冲突的规则(当保留其他Prettier不关心的规则时)最简单的方式是使用eslint-config-prettier。它可以添加到任何ESLint配置上面。

yarn add --dev eslint-config-prettier

.eslintrc.json

{  "extends": ["prettier"]
}

还有更多的细节可以通过文档来查看。



作者:白色鹈鹕鸟
链接:https://www.jianshu.com/p/d6a69eb08f07


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消