prettier代码格式化工具基础知识入门_工具入门攻略

1.两大linter说起eslint 为js而设计的可插拔的检查程序tslint 为ts语言而设计的可扩展的检查工具(将在2019年取消更新,建议使用eslint)两种linter都可以实现fix功能,所谓fix就是将原代码转化为符合一定规则的新代码。虽然linter工具fix之后的代码,解决了大部分问题,但可能有些地方并不符合我们的阅读代码的习惯,比如一行

prettier代码格式化工具基础知识入门

1.两大linter说起

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

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

prettier代码格式化工具基础知识入门_工具入门攻略

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

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

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这个插件。

3.3 融合写法

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

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

这段代码有三个作用

  • 继承prettier的config规则
  • 开启rules的 “prettier/prettier”: “error”
  • eslint fix的同时执行prettier格式化
海计划公众号
(0)
上一篇 2020/03/23 08:57
下一篇 2020/03/23 08:57

您可能感兴趣的内容

  • WebDev小白入门_在线网站优化检测工具

    WebDev小白入门 官方网址:https://web.dev/ 简介描述:在线网站优化检测工具 WebDev是由谷歌发布的全新网站优化检测工具,让你的网站贴切搜索引擎,输入网址即…

    2020/03/10
  • css常用属性使用教程_属性攻略教程

    1、文本属性文本对齐text-align 属性规定元素中的文本的水平对齐方式。属性值:none | center | left | right | justify文本颜色color属性文本首行缩进text-indent 属性规定元素首行缩进的距离,单位建议使用em文本修饰text-decoration属性规定文本修饰的样式属性值:none(默认) | und

    2020/03/30
  • 十大技术趋势小白教程_技术菜鸟攻略

    变化是唯一不变的。这也适用于我们的职业生涯。如今技术发展非常迅速。 下面十大技术预计将在2020年获得巨大市场。人工智能区块链增强现实和虚拟现实认知云计算Angular和React开发运维物联网(IoT)智能应用程序大数据RPA(机器人过程自动化)RPA通常,任何行业中的任何桌面工作都涉及本质上是重复的并且可以自动化的任务。RPA或机器人过程自动化使您可以自

    2020/03/20
  • props、属性、事件传递零基础入门_props小白帮助

    之前看了一篇关于Vue开发技巧的文章,其中提到了在写高级组件时,通过v-bind=”$props”将props一次性向下传递。这种向下传递的方式我之前没有用过,便看了下官网的介绍,并补充了一些相关API用法,在这里记录一下,方便自己以后查看。先进行相关的属性介绍,代码在后面。使用介绍:v-bind=”$props”: 可以将父组件的所有props下发给它的子

    2020/03/24
  • Moment.js基础教程一个 JavaScript 日期处理类库,用于解析、检验、操作以及显示日期

    Moment.js使用说明 官方网址:http://momentjs.com/ GitHub:https://github.com/moment/momentjs.com 简介描述…

    2020/03/06
  • Web安全测试检查单使用说明_安全入门基础知识

    大类细项标记备注上传功能绕过文件上传检查功能P1功能测试阶段覆盖上传文件大小和次数限制P1 注册功能注册请求是否安全传输P1功能测试阶段覆盖注册时密码复杂度是否后台检验P1功能测试阶段覆盖激活链接测试P1功能测试阶段覆盖重复注册P1 批量注册问题P1 登录功能登录请求是否安全传输P1功能测试阶段覆盖会话固定P1功能测试阶段覆盖关键Cookie是否HttpOn

    2020/04/03
  • 响应式网站的内容设计菜鸟教程下载_响应式菜鸟攻略

    基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容。 1 响应式图片显示内容设计真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片,我们可以准备多张不同尺寸的图片,然后在各自的媒体查询样式中使用对应的图片背景。再结合min-wi

    2020/03/24
  • 前端部署和提效:从静态到node再到负载均衡小白入门_部署小白攻略

    前言相信很多前端同学对 vue 或 react 的开发很熟悉了,也知道如何去打包生成一个生产环境的包,但对于生产环境的部署可能有些同学了解比较少。小公司可能都是后端帮忙部署了,大公司会有专门的运维同学部署,对于生产环境的部署工作有些同学接触的不多,所以这次来分享和总结下前端项目部署相关的实战经验:从静态站点的部署,到 node 项目的部署,再到负载均衡的部署

    2020/03/20
  • js 实现二级联动菜鸟攻略_方法小白基础

    在web开发中我们经常会遇到页面的一个二级联动技术,二级联动字面解释就是说我在选择一级select不同的option,下面的二级option的属性值在进行相应的变化。onchange 事件山东<op

    2020/03/31
  • 一道面试题引起的思考小白帮助_面试小白攻略

    今天在认真干(划)活(水)的时候,看到群里有人发了一道头条的面试题,就顺便看了一下,发现挺有意思的,就决定分享给大家,并且给出我的解决方案和思考过程。题目如下:实现一个get函数,使得下面的调用可以输出正确的结果const obj = { selector: { to: { toutiao: “FE Coder”} }, target: [1, 2, { n

    2020/04/03
  • 互联网公司没有中年人入门知识_互联网指南攻略

    其实企业,只要上了规模,人在里头就容易被螺丝钉化,随着系统,制度的完善,你看起来操盘很大的一个生意,但其实仅仅是航母的一部分。今天你看到的那一群挤破头进腾讯阿里头条百度美团的年轻人,和十年前挤破头进IBM等诸多外企的那人,其实是同一群人。1、一些变化正在发生5年前,刚生完2宝的宝妈ZZ主动从中国最好的互联网公司离职。她所在的互动娱乐游戏工作室收入丰厚,年终奖

    2020/03/29
  • 从js讲解时间复杂度和空间复杂度基础入门_算法小白指南

    1. 博客背景今天有同事在检查代码的时候,由于函数写的性能不是很好,被打回去重构了,细思极恐,今天和大家分享一篇用js讲解的时间复杂度和空间复杂度的博客2. 复杂度的表示方式之前有看过的,你可能会看到这么一串东西T(n) = O(f(n))
    S(n) = O(f(n))
    这个叫做大O表示法,其中的T代表的是算法需要执行的总时间S表示的算法需要的总空间f(

    2020/03/29
  • esdoc基础知识入门_一个 JavaScript 自动生成接口文档

    esdoc基础知识入门 官方网址:https://github.com/esdoc/esdoc GitHub:https://github.com/esdoc/esdoc 简介描述…

    2020/03/06
  • 理解Javascript的正则表达式菜鸟攻略_正则小白知识

    正文相信很多人第一次见到正则表达式的第一印象都是懵逼的,对新手而言一个正则表达式就是一串毫无意义的字符串,让人摸不着头脑。但正则表达式是个非常有用的特性,不管是Javascript、PHP、Java还是Python都有正则表达式。俨然正则表达式已经发展成了一门小语言。作为编程语言的一部分,它不想变量,函数,对象这种概念那么容易理解。很多人对于正则表达式的理解

    2020/03/20
  • 码农如何通过编程赚更多的钱基础知识教程_码农小白帮助

    有很多机会可以将收入扩展到日常工作之外成为程序员是一件很棒的事。 不仅大多数时候工作都很有趣,而且周围有很多工作机会,而且大多数人的薪水都很高。但是有时候,多花一些钱是值得赞赏的。 是因为您仍在上大学,还是想开始为自己而不是别人工作,您有一个孩子并想花更多的时间陪伴他们,您仍然需要赚钱或在做开发,就是图个好玩儿。这是一件好事:作为程序员,您拥有增加现金流量所

    2020/03/20
  • AJAX原理及常见面试题基础知识入门_面试题菜鸟教程下载

    引语AJAX 即 Asynchronous Javascript And XML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据(而不是图片,HTML文档等资源),互联网资源的传输变得前所未有的轻量级和纯粹,这激发了广大开发者的创造力,使各式各样功能强

    2020/03/22