乐趣区

重新认识prettier及如何工程化

jiezi

背景

对前端代码进行格式化时大多数同学都用到过 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 格式化
退出移动版