重新认识prettier及如何工程化

背景

对前端代码进行格式化时大多数同学都用到过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两个不同类型之间是如何使用==进行比较的?

相关推荐

  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇-开发环境搭建 私人管家-包管理器 待续 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前...

    6 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇-开发环境搭建 私人管家-包管理器 待续 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前...

    6 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 包管理器 在很久很久以前,那时候的前端被大家”亲切“的称为“切图仔”,那时前端的工作非常简单,仅仅只是将设计图还原,然后加上一些交互和...

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

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

    2 年前
  • 谈谈前端工程化 js加载

    当年的 js 加载 在没有 前端工程化之前,基本上是我们是代码一把梭,把所需要的库和自己的代码堆砌在一起,然后自上往下的引用就可以了。 那个时代我们没有公用的cdn,也没有什么特别好的方法来优化加载j...

    2 年前
  • 记录vue-cli3.0+typescript项目:Eslint+prettier报错以及解决方法

    记录vue-cli3.0+typescript项目:Eslint+prettier遇到的一些报错以及得到的解决方法1、一直报错 error Delete ‘........’,或者是warning D...

    4 个月前
  • 记录vue-cli3.0+typescript项目:Eslint+prettier一些报错以及解决方法

    记录vue-cli3.0+typescript项目:Eslint+prettier遇到的一些报错以及得到的解决方法1、一直报错 error Delete ‘........’,或者是warning D...

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

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

    2 年前
  • 认识 ESLint 和 Prettier

    原文链接:https://ssshooter.com/2020-06... ESLint 和 Prettier 分别是什么,有什么关系? 直接用脚手架生成一个带 ESLint 的项目,整天报错有没有...

    6 个月前
  • 用eslint + prettier + pre-commit管理项目(React)

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

    2 年前

官方社区

扫码加入 JavaScript 社区