跳到主要内容位置

前端工程化配置（一）—— prettier

· 预计阅读时间：7分钟
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,

集成到构建工具​

可以使用husky和lint-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。有三个可选值 none、es5、all
bracketSpacing对象大括号中的空格，默认 true
arrowParens箭头函数的参数是否要有小括号，有两个可选值 always、avoid
endOfLine结尾的换行符，有三个可选值 auto、lf、crlf
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

格式化冲突​

在配置配置项目的过程中我们可能会增加一些其他工具，例如 eslint、stylelint 等，这些工具可能会对代码进行一些修改，导致格式化结果不符合我们的预期，这时我们需要通过 eslint-config-prettier 和 stylelint-config-prettier 来禁用这些工具对代码的修改，使得 prettier 格式化的代码和 eslint、stylelint 格式化的代码保持一致。同时也能保证在不修改 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"]
}

目录