跳到主要内容

认识

2023年02月22日
柏拉文
越努力,越幸运

一、认识


1.1 什么是 Prettier

Prettier是一个代码格式化工具,可以格式化代码,但不具备代码检查功能,它可以通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制一致的样式,并在必要时包装代码,如今,它已成为解决所有代码格式问题的优选方案,支持多种语言,可以将ESLintPrettier结合使用,提高代码质量。

1.2 为什么要用 Prettier

上面Prettier的定义一看,是不是觉得和ESLint差不了多少?那么,有了ESLint,为什么还要用Prettier呢?

其实呀,ESLint虽然是一个代码检测工具,可以检测代码质量问题并给出提示,但是提供的格式化功能有限,在代码风格上面做的不是很好,并且也只能格式化JS,不支持CSS,HTML等语言。而在代码风格上面,Prettier具有更加强大的功能,并且能够支持包括 JavaScriptTypeScript、各种 CSSVueMarkdown 等前端绝大部分的语言和文件格式。因此,我们一般会将ESLintPrettier一起结合起来使用,用ESLint进行代码校验,用Prettier统一代码风格。

二、安装


2.1 prettier

npm install prettier --save-dev

2.2 eslint-config-prettier

安装好Prettier之后,我们还需要安装eslint-config-prettier,这是因为eslintprettier里面的一些规则可能会存在冲突,这个时候我们就需要安装eslint-config-prettier,并且关掉所有和prettier冲突的eslint配置。

npm install eslint-config-prettier --save-dev

安装好eslint-config-prettier之后,接下来我们就需要关掉所有和prettier冲突的eslint配置。这里只需要在.eslintrc.jsextends中将prettier设置为最后一个extends即可,相当于用prettier的规则,覆盖掉 eslint:recommended的部分规则。

extends: ["eslint:recommended", "prettier"]

2.3 eslint-plugin-prettier

接下来,我们还需要安装eslint-plugin-prettiereslint-plugin-prettier的作用时是将prettier的能力集成到eslint中,使得我们在运行eslint检查我们的代码时,能够按照prettier的规则检查代码规范性,并进行修复。

npm install eslint-plugin-prettier

安装eslint-plugin-prettier后,需要对.eslintrc.js进行配置

{
"rules":{
"prettier/prettier":"error"
},
"plugins": ["prettier"],
}

除了上面这种配置之外,我们也可以直接将上面两个步骤结合在一起,使用下面的配置就可以。

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