prettier浅出

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格式化
原文链接:segmentfault.com

上一篇:css适配iPhoneX屏幕安全区
下一篇:JavaScript之多线程和Event Loop

相关推荐

  • 项目代码的格式化统一配置 Prettier & ESLint

    以前没时间过eslint,每次项目vscode 编辑器的eslint插件就关掉eslint,老项目都没注意过相关的代码规范,这次新项目加入进去实践下! Question 1. 三个插件功自动有...

    2 年前
  • 零代码深入浅出React并发模式,带你理解React Fiber架构

    React Fiber架构有一定的复杂度,如果硬着头皮去啃源码,我们会深陷于庞大的代码量和实现细节之中,往往学不到什么东西。 React并发模式是ReactFiber架构的重要应用,本文不贴任何Rea...

    4 个月前
  • 零代码深入浅出React并发模式

    本文不贴任何React源码,纯粹使用文字讲述React并发模式的原理。 这不是一篇关于React并发模式API使用的文章。 为节约篇幅,下文不会详细介绍API的用法,只会讲解原理。

    4 个月前
  • 重新认识prettier及如何工程化

    1qdyIUswy9X5SxSR2tzrIJw.png(https://img.javascriptcn.com/93f429f947421085617d8d16a2017b3e "1qdyIUswy...

    6 个月前
  • 让你的代码更Prettier!代码风格统一终极方案!

    很多团队还在为代码风格头疼。大到采用哪套代码风格方案,小到tab和space之争,都是团队开发面临的选择。之前解决这种代码统一问题的方案是:EditorConfig(/go/?target=https...

    2 年前
  • 精读《深入浅出Node.js》

    (前言 "前言")前言 如果你想要深入学习Node,那你不能错过《深入浅出Node.js》这本书,它从不同的视角介绍了 Node 内在的特点和结构。由首章Node 介绍为索引,涉及Node 的各个...

    2 年前
  • 端到端测试神器 cypress 浅入浅出

    我之前写过关于cypress的文章,https://segmentfault.com/a/11...(https://segmentfault.com/a/1190000014907041),最近在工...

    2 年前
  • 用eslint + prettier + pre-commit管理项目(React)

    前言 人是很懒惰的,你刚开始建立的一个规规整整的项目,可能一段时间过后,就回被你无数次的提交代码弄得凌乱不堪。 就算你能保证你的编码风格严谨统一,别人又该如何,每个人都有不一样的编码风格,要保持统...

    2 年前
  • 用 TS + Vue 写了一个在 Chrome 中运行 Prettier 格式化的扩展程序

    (https://img.javascriptcn.com/28e2de6762703da14b29c7cfd181c5b0.png) 在介绍 prettierchrome(https://gith...

    2 年前
  • 深入浅出,教你一步步实现数据分析入门、进阶

    源|数据分析 最近有很多人在问数据分析的一些问题。关于数据分析到底应该怎么学?如何快速入门,以及技术和业务之间的瓶颈如何突破? 其实,要学数据分析之前,至少要了解一下数据分析师,到底需要哪些技能。

    8 个月前

官方社区

扫码加入 JavaScript 社区