prettier代码格式化工具

更新日期: 2019-11-01阅读: 3.6k标签: 工具

1.两大linter说起

  • eslint 为js而设计的可插拔的检查程序
  • tslint 为ts语言而设计的可扩展的检查工具(将在2019年取消更新,建议使用eslint)

两种linter都可以实现fix功能,所谓fix就是将原代码转化为符合一定规则的新代码。虽然linter工具fix之后的代码,解决了大部分问题,但可能有些地方并不符合我们的阅读代码的习惯,比如一行代码过长。

在强迫症的影响下,不同的人对自己的代码进行不同程度的”美化“,甚至遇到他人代码时也会顺手美化一把。

最终导致项目中的代码风格不能统一。


2.prettier简介

prettier是一种保证代码一致性、兼具美化效果的代码格式化工具

2.1 not only js

前有jslint,而后由于eslint过于成功,导致了jslint已经无人问津,这也让我们误以为eslint只专注于js
下面列举了它所支持的其他语言

  • javascript、jsx
  • flow、typescript
  • json
  • css、less、scss
  • graphql
  • markdown
  • yaml

2.2 IDE

有人的地方就有江湖,有编辑器的地方就有prettier,目前流行的ide都能支持prettier

  • vscode
  • webstorm
  • atom
  • visual studio
  • sublime

以上列举了前端比较常用的几个工具,需要确定所使用的的编辑器是否支持prettier是否支持,请移步官网

2.3 parser

prettier针对不同的语言,所使用的的parser有多个,例如编译graphql时所使用的就是graphql/language。
而编译js的目前有两个,即babylon(默认)、flow,由于babylon的bug较少,对编译工作支持度较好,所以默认情况下选用babylon即可。
babylon即babel6的编译工具,在babel7中已更名为@babel/parser


3.eslint融合

eslint作为强大的linter工具,与vscode配合后能降低代码问题的风险,在coding的过程中就发现潜在问题,提高代码质量。

3.1 eslint-config-prettier

eslint的config可以继承自第三方包的config,config中定义了rules的开关规则,eslint-config-prettier主要定义了prettier格式化后导致eslint报错的那些规则

3.2 eslint-plugin-prettier

eslint与prettier的格式化需要分别进行,如果想要让eslint fix的同时,也能兼顾prettier的规则进行格式化,就需要使用到eslint-plugin-prettier这个插件。

它的主要作用就是专门定义了eslint fix的prettier规则

3.3 融合写法

在.eslintrc文件中加入以下配置

{
  "extends": ["plugin:prettier/recommended"]
}

这段代码有三个作用

  • 继承prettier的config规则
  • 开启rules的 "prettier/prettier": "error"
  • eslint fix的同时执行prettier格式化


链接: https://www.fly63.com/article/detial/6230

常用的前端开发者的工具、库和资源

这篇文章简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。这个列表包含许多种类的资源,所以这里我将它们分组整理。

web前端程序员代码编辑器推荐

今天给大家分享前端程序员最爱用的代码编辑器,来看看你用哪款?包括:Visual Studio Code、Atom、HBuilder、Sublime Text、Dreamweaver、Brackets、Notepad++

JavaScript常用工具方法封装

Js常用工具方法封装:type 类型判断、Date、Array、String 字符串操作、Number、Http、DOM、Other 其它操作

Node.js 命令行工具的编写

日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作。其编写也不难,和日常编写 Node.js 代码并无二致。package.json 中的 bin 字段

一百行js代码实现一个校验工具

做过校验需求的小伙伴们都知道,校验其实是个麻烦事。规则多,需要校验的字段多,都给我们前端带来巨大的工作量。一个不小心,代码里就出现了不少if else等不可维护的代码。因此,我觉得一个团队或者是一个项目

Licia 支持小程序的 JS 工具库

Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块,同时支持浏览器、node 及小程序运行环境,提供了包括日期格式化、md5、颜色转换等实用模块,可以极大地提高开发效率。

程序员常用命令行工具

WordGrinder它是一款使用起来很简单,但拥有足够的编写和发布功能的文字编辑器。Proselint:它是一款全能的实时检查工具。GNU Aspell:

Web前端开发工程师常用的工具!

工欲善其身必先利器,作为前端行业的你,如果知道一些好用的软件工具可以帮助他们更好的工作。下面,就给大家分享Web前端开发工程师常用的工具。

用100行代码,完成自己的前端构建工具!

ES2017+,你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具,可以脑海中永远划掉。100行代码,你将透视构建工具的本质。

欺骗技术13款开源工具分享

一旦被那些受利益驱使或有政府背景的黑客团伙盯上,在这场不太公平的攻防博弈中,你会明显感到力不从心。他们有充足的时间,有娴熟的技术和丰富的资源,而且只要在无数次的尝试中成功一次就可以大获全胜

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!