prettier浅出

2019-11-02 admin

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://segmentfault.com/a/1190000020888028

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78786.html

文章标题:prettier浅出

相关文章
浅谈js设计模式
策略模式 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。目的是将算法的使用与算法的实现分离开来。 一个基于策略模式的程序至少由两部分组成: 一组策略类,策略类封装了具体的算法,并且负责具体的计算过程。 环境类Cont...
2018-05-10
浅析Node.js的Stream模块中的Readable对象
我一直都很不愿意扯 nodejs 的流,因为从第一次看到它我就觉得它的设计实在是太恶心了。但是没办法,Stream 规范尚未普及,而且确实有很多东西都依赖了 nodejs 的流来实现的,所以我也只能捏着鼻子硬着头皮来扯一扯这又臭又硬的 no...
2017-03-27
JS实用的动画弹出层效果实例
本文实例讲述了JS实用的动画弹出层效果的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra...
2017-03-23
浅谈Javascript数组索引
从题目说起,之所以是不完全,是因为有些东西比如数组的方法怎么用这个我都不打算讲,因为那个看一下都会,下面讲的都是我觉得重要的,只关于数组对象本身。另外,由于我的Javascript实战经验不多,所以可能有些东西没涉及到,有些内容说的有误,请...
2017-03-27
vue+element-ui的简洁导入导出功能
1.前段后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出; 2.导入是利用element-ui的Upload 上传组件; <el-upload class="upload-demo" :...
2017-12-24
JS实现从网页顶部掉下弹出层效果的方法
本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法。分享给大家供大家参考。具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,...
2017-03-27
浅谈Javascript的静态属性和原型属性
文章给各位介绍Javascript的静态方法和原型方法一个例子,如果大家对于Javascript的静态方法和原型方法不了解可以和小编一起来看看。 一段代码,了解静态方法和实例方法: <script> /...
2017-03-23
layer弹出层中H5播放器全屏出错的解决方法
1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 <!DOCTYPE html> <html> <head> <meta c...
2017-03-16
深入浅出分析javaScript中this用法
本文实例讲述了javaScript中this用法。分享给大家供大家参考。具体分析如下: 之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解。我后来也是看了许多别人写的文章,才理解过来的。现在把别...
2017-03-23
浅谈angular2的http请求返回结果的subcribe注意事项
实例如下: this.monitorSer.getVehicleLonAndLat(vehicleIds) .subscribe( data => { //将data下的data字符串转化为vehdat...
2017-03-14
回到顶部