首页 ›  文章

重新认识prettier及如何工程化

2019-11-22

1_qdyIUswy9X5SxSR2tzrIJw.png

背景

对前端代码进行格式化时大多数同学都用到过prettier,例如在vscode中安装prettier插件,即可格式化任意文件,或者只格式化文件的选中部分。

prettier起到的作用是按照统一风格去美化代码。

在工程量比较大的项目中,需要加入eslint来检测代码质量,保证代码提交前发现一些低级错误,或者将不符合规范的代码进行标红,引起注意及时修改。

eslint作用是按照一定规则,检测代码质量

prettier与eslint本身是两种不同用途的工具。如果先用prettier对代码格式化,会发现编辑器中的eslint会提示报错信息,之后需要执行eslint --fix或者手动修改,其根本原因是两种工具无法关联。

1 prettier介绍

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

1.1 prettier支持的文件格式
  • javascript、jsx、ts、tsx
  • flow
  • json
  • css、less、scss
  • graphql
  • markdown
  • yaml

以上文件格式基本涵盖了前端的工作范畴,prettier与我们的工作密切相关

1.2 parser

prettier之所以有支持多种文件格式的能力,是因为针对每种格式文件开发了对应的编译工具。例如编译graphql所使用的parser是graphql/language。

目前编译js的有两个,babylon(默认)和flow,由于babylon的bug较少,对编译工作支持度较好,官方默认选用babylon。

1.3 IDE

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

  • vscode
  • webstorm
  • atom
  • visual studio
  • sublime
1.4 prettier存在的必要性

eslint --fix本身可以修复部分代码格式缺陷,但以下几种情况,eslint就无能为力

function pretty({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,...}){
...
}
const pretty = [{greeting = "hello", greeted = '"World"', silent = false, onMouseOver},...]

痛点:代码超过了一定长度,eslint会标识错误信息,但无法自动修复

要想格式化以上代码,只需要使用vscode安装的prettier插件或者执行命令

npx prettier --write src/*.js

格式化之后的代码如下

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver
  ...
}) {
...
}
const pretty = [
{
  greeting = "hello", 
  greeted = '"World"', 
  silent = false, 
  onMouseOver
},
...
]

你也可以通过回车将代码一步步美化,这样做的缺点有,第一会浪费大量时间,第二每个人的风格迥异将导致代码冲突

优点:使用prettier格式化风格得到统一,减少了合并代码冲突的概率

1.5 问题

我们在使用prettier对代码进行格式化之后,紧接着需要执行eslint fix修复prettier带来的不兼容地方,有没有一个好的方法可以让以上步骤合二为一

2.工程化

2.1 eslint on save

上文中多次提到了eslint --fix命令,每次执行浪费大量时间,以vscode为例,在项目的根目录中加入以下配置,就可保存时自动进行fix .vscode/settings.json

"eslint.autoFixOnSave": true
2.2 eslint validate

react代码有四种格式的文件后缀,js、jsx、ts、tsx,在默认情况下vscode的eslint插件只能给js、jsx文件的错误标红,ts、tsx文件不会自动提示错误信息,但即使肉眼看不见这些错误信息,等到提交代码在husky等工具的校验下,代码依旧是提交失败的,如果想给ts、tsx文件提示错误信息需要增加以下配置 .vscode/settings.json

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {"language": "typescript", "autoFix": true },
    {"language": "typescriptreact", "autoFix": true }
]

3 prettier与eslint融合

融合需要解决eslint与prettier无法关联的问题,解决方案是将prettier的规则加到eslint的config中去,能在vscode中给出错误信息提示,且执行eslint fix时能按照eslint的配置以及prettier的规则同时格式化

3.1 eslint-config-prettier

关闭eslint可能与prettier冲突的规则

3.2 eslint-plugin-prettier

执行eslint --fix时,自动按照prettier的规则格式化代码

3.3 eslint配置

安装以上两个工具,只需要以下一行配置即可

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

此配置有三个作用

  • 继承prettier的config规则
  • 开启rules的 "prettier/prettier": "error"
  • eslint fix的同时执行prettier格式化
原文链接:segmentfault.com

上一篇:CSS入门:基本语法、选择器用法
下一篇:JavaScript两个不同类型之间是如何使用==进行比较的?
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入