Skip to main content

前端工程化配置(一)—— prettier

· 7 min read
hec9527

prettier 是一个非常流行的代码格式化工具,它可以帮助开发者自动格式化代码,使其复合一致的风格和规范,在团队协作中也能通过自动格式化,使代码风格保持统一。

prettier 的一些主要特点和功能

  1. 一致的代码风格:prettier 可以根据预定义的规则自动格式化代码,确保代码风格一致
  2. 支持多种编程语言:支持 JavaScript、TypeScript、CSS、HTML、JSON、Markdown 等多种语言和配置文件
  3. 零配置:默认情况下,prettier 不需要复杂的配置,使用简单直接
  4. 集成容易:可以很容易地集成到开发环境中,如编辑器、构建工具或版本控制系统中
  5. 自动化:集成到代码编辑器或者项目中的构建流程,自动化格式化代码

使用方式

推荐使用本地安装,直接将依赖安装到项目中

npm i -D prettier

使用命令行工具

如果直接使用命令行工具格式化代码推荐安装到全局,如果通过npm script执行脚本,可以安装到项目中。格式化支持使用-w选项,即自动格式化并将修改后的内容写入到源文件中。另外文件支持 glob 匹配,可以一次性格式化多个文件。

# 全局安装
npm i -g prettier
# 格式化 1.js
prettier -w 1.js
# 格式化 scr目录下所有js文件
prettier -w scr/**/*.js

使用编辑器插件

推荐使用 VSCode 插件,安装后会自动格式化代码,并在保存文件时自动格式化。在 vs code 插件市场搜索 Prettier - Code formatter 并安装,然后在 vscode 配置文件中添加两行配置

// 默认使用prettier格式化文本
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 保存后自动格式化
"editor.formatOnSave": true,

集成到构建工具

可以使用huskylint-staged来集成到构建工具中,在 husky 中添加一个名为 pre-commit 的钩子,并且添加以下内容

.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- lint-staged

另外再新建一个 lint-staged 的配置文件,在其中添加以下内容

.lintstagedrc
{
"*": "prettier -w"
}

这样在提交代码时,会先格式化代码,然后再将修改后的内容添加到暂存区,这样保证所有代码格式统一

prettier 配置

prettier 提供了许多配置项,允许你根据个人和团队的偏好来定制代码的格式化规则

常见配置项

配置项说明
printWidth每行的最大长度,默认 80
tabWidth每个缩进的空格数,默认 2
useTabs是否使用 tab 进行缩进,默认 false
semi是否在语句末尾添加分号,默认 true
singleQuote是否使用单引号,默认 false
quoteProps是否在对象属性中使用引号,默认 as-needed
jsxSingleQuote是否使用单引号,默认 false
trailingComma是否在对象最后一个属性后面添加逗号,默认 none。有三个可选值 nonees5all
bracketSpacing对象大括号中的空格,默认 true
arrowParens箭头函数的参数是否要有小括号,有两个可选值 alwaysavoid
endOfLine结尾的换行符,有三个可选值 autolfcrlf
overrides针对某些文件单独配置

overrides 配置项

overrides 配置项可以针对某些文件单独配置,例如

{
"overrides": [
{
"files": "*.css",
"options": {
"tabWidth": 4
}
}
]
}

配置文件格式

prettier 使用 lilconfig 来读取配置文件,和 cosmiconfig 有点类似的,你可以使用以下类型文件来配置 prettier

  • package.json中使用prettier键名
  • .prettierrc:JSON
  • .prettierrc.json:JSON
  • .prettierrc.json5:JSON
  • .prettierrc.yaml:YAML
  • .prettierrc.yml:YAML
  • .prettierrc.js:JavaScript
  • prettierrc.config.js:JavaScript
  • .prettierrc.mjs 或者 prettierrc.mjs: JavaScript with export
  • .prettierrc.cjs 或者 prettierrc.cjs: JavaScript with module.exports
  • .prettierrc.toml:TOML

忽略检查

忽略文件

在项目中有些文件不需要格式化,可以通过 .prettierignore 文件来忽略检查

.prettierignore
node_modules
dist

忽略单行

在需要忽略的行前面加上注释 prettier-ignore 即可,不用的语言单行注释方式不一样。例如 js

// prettier-ignore
const a = 1;

常用插件

prettier 本身只是一个格式化工具,不具有插件系统,但是有个一跟它相关的工具,prettier-plugin-packagejson,这个工具的目的是用来格式化 package.json 文件,它能格式化 package.json 的同时,排序其中的字段,依赖项等

npm i -D prettier prettier-plugin-packagejson

格式化冲突

在配置配置项目的过程中我们可能会增加一些其他工具,例如 eslintstylelint 等,这些工具可能会对代码进行一些修改,导致格式化结果不符合我们的预期,这时我们需要通过 eslint-config-prettierstylelint-config-prettier 来禁用这些工具对代码的修改,使得 prettier 格式化的代码和 eslintstylelint 格式化的代码保持一致。同时也能保证在不修改 eslint 和 styleLint 规则的情况下,不会报错

解决 prettier 与 eslint 的冲突

npm i -D eslint-config-prettier

在 eslint 配置文件中添加配置项

.eslintrc
{
"extends": ["prettier"]
}

解决 prettier 与 stylelint 的冲突

npm i -D stylelint-config-prettier

在 stylelint 配置文件中添加配置项

.stylelintrc
{
"extends": ["stylelint-config-prettier"]
}