Prettier - 前端团队代码格式化神器

Prettier 简介

Prettier 是一个代码格式化工具，它通过解析代码并使用自己的规则重新打印它，强制执行一致的样式。它消除了原始样式，确保所有输出的代码符合一致的样式。

为什么要用 Prettier?

说实话,没有 Prettier 之前,代码评审最烦人的就是跟同事争论代码格式问题: “这个花括号要不要换行啊?” “缩进到底是用 tab 还是空格?” “这个逗号要不要加?” …

现在好了,有了 Prettier 这个"独裁者",它用固定的规则重新格式化你的代码,从此解放你的大脑,专注写逻辑就完事了。

它有这些让人爱不释手的特点:

支持超多语言,前端常用的都能搞定
主流编辑器都能用,VSCode、WebStorm 随便挑
配置简单,改几个常用选项就能用
保存自动格式化,懒人必备
团队统一标准,不用再为格式撕逼

开始使用

无论是 Vue 还是 React 项目，首先装上 Prettier,这个必须的:

Bash

# npm党
npm install --save-dev prettier

# yarn党
yarn add --dev prettier

# pnpm党
pnpm add -D prettier

Vue 项目配置

1. 先装几个常用插件

这些插件都挺好使:

Bash

npm i -D prettier prettier-plugin-tailwindcss @trivago/prettier-plugin-sort-imports @prettier/plugin-pug

prettier-plugin-tailwindcss: 专门处理 Tailwind 的类名排序
@trivago/prettier-plugin-sort-imports: 自动整理 import 语句
@prettier/plugin-pug: 用 Pug 模板的同学装这个

2. 创建配置文件 (prettier.config.cjs)

Javascript

File: prettier.config.cjs

/**
 * @typedef {import('prettier').Config} PrettierConfig
 * @typedef {import('prettier').PluginDescriptor} PrettierPluginDescriptor
 */

/**
 * Vue项目的Prettier配置
 * @type {PrettierConfig & { plugins: PrettierPluginDescriptor[] }}
 */
module.exports = {
  /** 每行最大宽度 @default 80 */
  printWidth: 120,

  /** 缩进空格数 @default 2 */
  tabWidth: 2,

  /** 使用空格缩进 @default false */
  useTabs: false,

  /** Vue风格指南推荐不使用分号 @default true */
  semi: false,

  /** 使用单引号 @default false */
  singleQuote: true,

  /**
   * 对象属性的引号使用
   * @default "as-needed"
   * "as-needed" - 需要时使用
   * "consistent" - 有一个需要引号，则全部使用
   * "preserve" - 保持原样
   */
  quoteProps: 'as-needed',

  /**
   * 多行时尾逗号配置
   * @default "all"
   * "all" - 尽可能使用尾逗号
   * "es5" - 在ES5中有效的地方使用
   * "none" - 不使用
   */
  trailingComma: 'none',

  /** 对象字面量括号空格 @default true */
  bracketSpacing: true,

  /** 多行HTML标签的>放在最后一行末尾 @default false */
  bracketSameLine: false,

  /**
   * 箭头函数参数括号
   * @default "always"
   * "avoid" - 可以省略括号时省略
   * "always" - 总是使用括号
   */
  arrowParens: 'avoid',

  /** 换行符类型 @default "lf" */
  endOfLine: 'lf',

  /** HTML空格敏感度 @default "css" */
  htmlWhitespaceSensitivity: 'ignore',

  /** Vue文件中的script和style标签内容是否缩进 @default false */
  vueIndentScriptAndStyle: true,

  /** HTML标签属性换行 @default false */
  singleAttributePerLine: false,

  /** 插件 */
  plugins: [
    'prettier-plugin-tailwindcss', // Tailwind CSS支持
    '@trivago/prettier-plugin-sort-imports', // import排序
    '@prettier/plugin-pug' // 可选，如果使用Pug模板
  ]
};

3. 创建 .prettierignore 文件

Text

node_modules
dist
.nuxt
auto-imports.d.ts
components.d.ts

React 项目配置

1. 安装常见插件

Bash

npm i -D prettier prettier-plugin-organize-imports prettier-plugin-tailwindcss @trivago/prettier-plugin-sort-imports prettier-plugin-styled-components

2. 创建配置文件 (prettier.config.cjs)

Javascript

File: prettier.config.cjs

/**
 * @typedef {import('prettier').Config} PrettierConfig
 * @typedef {import('prettier').PluginDescriptor} PrettierPluginDescriptor
 */

/**
 * React项目的Prettier配置
 * @type {PrettierConfig & { plugins: PrettierPluginDescriptor[] }}
 */
module.exports = {
  /** 每行最大宽度 @default 80 */
  printWidth: 120,

  /** 缩进空格数 @default 2 */
  tabWidth: 2,

  /** 使用空格缩进 @default false */
  useTabs: false,

  /** 语句末尾使用分号 @default true */
  semi: true,

  /** 使用单引号 @default false */
  singleQuote: true,

  /** JSX中使用单引号 @default false */
  jsxSingleQuote: true,

  /**
   * 对象属性的引号使用
   * @default "as-needed"
   * "as-needed" - 需要时使用
   * "consistent" - 有一个需要引号，则全部使用
   * "preserve" - 保持原样
   */
  quoteProps: 'as-needed',

  /**
   * 多行时尾逗号配置
   * @default "all"
   * "all" - 尽可能使用尾逗号
   * "es5" - 在ES5中有效的地方使用
   * "none" - 不使用
   */
  trailingComma: 'none',

  /** 对象字面量括号空格 @default true */
  bracketSpacing: true,

  /** 多行JSX元素的>放在最后一行末尾 @default false */
  bracketSameLine: false,

  /**
   * 箭头函数参数括号
   * @default "always"
   * "avoid" - 可以省略括号时省略
   * "always" - 总是使用括号
   */
  arrowParens: 'avoid',

  /** 换行符类型 @default "lf" */
  endOfLine: 'lf',

  /** HTML空格敏感度 @default "css" */
  htmlWhitespaceSensitivity: 'css',

  /** HTML标签属性换行 @default false */
  singleAttributePerLine: false,

  /** 插件 */
  plugins: [
    'prettier-plugin-organize-imports', // 组织import语句
    'prettier-plugin-tailwindcss', // Tailwind CSS支持
    '@trivago/prettier-plugin-sort-imports', // import排序
  ]
};

3. 创建 .prettierignore 文件

Text

node_modules
dist
build
coverage
.next
out

编辑器集成

VSCode 配置

安装 Prettier 插件搜索并安装 “Prettier - Code formatter”
配置 settings.json

Json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.requireConfig": true,
  "prettier.configPath": "prettier.config.cjs"
}

配置 Package.json 脚本

Json

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,vue,css,less,scss,json,md}\"",
    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,vue,css,less,scss,json,md}\""
  }
}

踩坑记录

1. ESLint 和 Prettier 打架怎么办?

这个问题很多同学都遇到过,其实装两个依赖就能解决:

Bash

npm i -D eslint-config-prettier eslint-plugin-prettier

然后在 .eslintrc.js 加上这行配置就完事了:

Javascript

module.exports = {
  extends: [
    // 其他配置...
    'plugin:prettier/recommended'
  ]
};

2. 想跳过某些文件的格式化?

创建 .prettierignore 文件,把不想格式化的文件写进去就行:

Text

# 构建产物
dist
build

# 自动生成的文件
auto-imports.d.ts
components.d.ts

# 第三方库
node_modules

3. 配置文件优先级

Prettier 会按以下顺序查找配置文件：

prettier.config.js 或 .prettierrc.js
.prettierrc.json
.prettierrc.yaml
.prettierrc.yml
.prettierrc
package.json 中的 “prettier” 字段

总结

Prettier 确实是个好东西:

再也不用操心代码格式的事了
团队代码风格统一,看着就舒服
代码评审可以专注在逻辑上
新人也能轻松遵循项目规范

最后的建议:别花太多时间纠结配置,用默认的就挺好,真的。

参考资料

Prettier 官方文档 Vue 风格指南 React 文档