认识
一 、认识
1.1 什么是 Prettier
Prettier
是一个代码格式化工具,可以格式化代码,但不具备代码检查功能,它可以通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制一致的样式,并在必要时包装代码,如今,它已成为解决所有代码格式问题的优选方案,支持多种语言,可以将ESLint
和Prettier
结合使用,提高代码质量。
1.2 为什么要用 Prettier
上面Prettier
的定义一看,是不是觉得和ESLint
差不了多少?那么,有了ESLint
,为什么还要用Prettier
呢?
其实呀,ESLint
虽然是一个代码检测工具,可以检测代码质量问题并给出提示,但是提供的格式化功能有限,在代码风格上面做的不是很好,并且也只能格式化JS
,不支持CSS
,HTML
等语言。而在代码风格上面,Prettier
具有更加强大的功能,并且能够支持包括 JavaScript
、TypeScript
、各种 CSS
、Vue
和 Markdown
等前端绝大部分的语言和文件格式。因此,我们一般会将ESLint
和Prettier
一起结合起来使用,用ESLint
进行代码校验,用Prettier
统一代码风格。
二、安装
2.1 prettier
npm install prettier --save-dev
2.2 eslint-config-prettier
安装好Prettier
之后,我们还需要安装eslint-config-prettier
,这是因为eslint
和prettier
里面的一些规则可能会存在冲突,这个时候我们就需要安装eslint-config-prettier
,并且关 掉所有和prettier
冲突的eslint
配置。
npm install eslint-config-prettier --save-dev
安装好eslint-config-prettier
之后,接下来我们就需要关掉所有和prettier
冲突的eslint
配置。这里只需要在.eslintrc.js
的extends
中将prettier
设置为最后一个extends
即可,相当于用prettier
的规则,覆盖掉 eslint:recommended
的部分规则。
extends: ["eslint:recommended", "prettier"]
2.3 eslint-plugin-prettier
接下来,我们还需要安装eslint-plugin-prettier
,eslint-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"
]
}