75. Prettier 教程

1. Prettier 简介

Prettier 是一个 opinionated 的代码格式化工具，它可以自动格式化你的代码，确保代码风格的一致性，减少团队成员之间的代码风格争议。

1.1 Prettier 的核心特性

• 自动格式化：无需手动调整代码格式
• 一致性：确保整个项目代码风格一致
• 支持多种语言：支持 JavaScript、TypeScript、JSX、Vue、CSS、HTML 等多种语言
• 可配置性：虽然是 opinionated，但仍提供一些配置选项
• 编辑器集成：支持与各种编辑器集成
• CI/CD 集成：可以在持续集成过程中使用
• 与 ESLint 集成：可以与 ESLint 配合使用

1.2 Prettier 与 ESLint 的区别

Prettier 专注于代码格式化，而 ESLint 专注于代码质量检查。两者可以配合使用，Prettier 处理代码风格，ESLint 处理代码质量。

2. 安装与初始化

2.1 全局安装 Prettier

# 使用 npm
npm install -g prettier

# 使用 yarn
yarn global add prettier

# 使用 pnpm
pnpm add -g prettier

2.2 本地安装 Prettier

推荐在项目中本地安装 Prettier，以确保版本一致性：

# 使用 npm
npm install --save-dev prettier

# 使用 yarn
yarn add --dev prettier

# 使用 pnpm
pnpm add --save-dev prettier

2.3 创建配置文件

Prettier 支持多种格式的配置文件：

2.3.1 创建 .prettierrc.js 文件

module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  arrowParens: 'avoid',
  bracketSpacing: true,
  endOfLine: 'lf'
};

2.3.2 创建 .prettierrc.json 文件

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "lf"
}

2.3.3 创建 .prettierrc.yaml 文件

semi: true
trailingComma: es5
singleQuote: true
printWidth: 80
tabWidth: 2
useTabs: false
arrowParens: avoid
bracketSpacing: true
endOfLine: lf

2.3.4 在 package.json 中配置

{
  "prettier": {
    "semi": true,
    "trailingComma": "es5",
    "singleQuote": true,
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "endOfLine": "lf"
  }
}

2.4 创建忽略文件

创建 .prettierignore 文件，指定 Prettier 应该忽略的文件：

# .prettierignore

# 依赖目录
node_modules/

# 构建输出目录
dist/
build/

# 测试覆盖率目录
coverage/

# 配置文件
*.config.js

# 压缩文件
*.min.js

# 环境变量文件
.env
.env.local

# 日志文件
logs/
*.log

# 文档
*.md

2.5 配置 package.json 脚本

在 package.json 文件中添加 Prettier 脚本：

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

然后可以使用以下命令运行：

# 格式化代码
npm run format

# 检查代码格式
npm run format:check

3. 基本使用

3.1 格式化单个文件

# 全局安装的 Prettier
prettier --write file.js

# 本地安装的 Prettier
npx prettier --write file.js

# 使用 yarn
yarn prettier --write file.js

# 使用 pnpm
pnpm prettier --write file.js

3.2 格式化目录

# 格式化 src 目录
prettier --write src/

# 格式化多个目录
prettier --write src/ test/

# 格式化所有 JavaScript 文件
prettier --write "**/*.js"

# 格式化多种类型的文件
prettier --write "**/*.{js,jsx,ts,tsx,json,css,scss,md}"

3.3 检查代码格式

# 检查单个文件
prettier --check file.js

# 检查目录
prettier --check src/

--check 选项会检查代码是否符合 Prettier 的格式要求，但不会修改文件。如果有不符合要求的文件，会显示错误信息并退出。

3.4 使用不同的配置文件

# 使用指定的配置文件
prettier --config .prettierrc.custom.js --write src/

3.5 从 stdin 读取

# 从 stdin 读取
cat file.js | prettier --stdin-filepath file.js

4. 配置详解

4.1 核心配置选项

4.2 配置示例

4.2.1 默认配置

module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: false,
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  arrowParens: 'always',
  bracketSpacing: true,
  endOfLine: 'lf',
  htmlWhitespaceSensitivity: 'css',
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  jsxBracketSameLine: false,
  proseWrap: 'preserve',
  embeddedLanguageFormatting: 'auto'
};

4.2.2 常用配置

module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  arrowParens: 'avoid',
  bracketSpacing: true,
  endOfLine: 'lf'
};

5. 编辑器集成

5.1 VS Code 集成

1. 安装 Prettier 扩展：

   • 在 VS Code 中搜索并安装 "Prettier - Code formatter" 扩展

2. 配置 VS Code 设置（settings.json）：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

5.2 WebStorm 集成

1. 启用 Prettier：

   • 打开 Settings → Languages & Frameworks → JavaScript → Prettier
   • 选择 "Automatic Prettier configuration" 或 "Manual Prettier configuration"

2. 配置自动格式化：

   • 在 Settings → Tools → Actions on Save
   • 勾选 "Run Prettier"

5.3 Sublime Text 集成

1. 安装 Sublime-prettier 插件：

   • 使用 Package Control 安装 "JsPrettier"

2. 配置插件：

   • 打开 Preferences → Package Settings → JsPrettier → Settings
   • 配置 Prettier 路径和其他选项

5.4 Atom 集成

1. 安装 prettier-atom 插件：

   • 在 Atom 中搜索并安装 "prettier-atom"

2. 配置插件：

   • 打开 Settings → Packages → prettier-atom → Settings
   • 配置插件选项

6. 与 ESLint 集成

6.1 安装依赖

# 安装 Prettier 和相关插件
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

6.2 配置 ESLint

在 ESLint 配置文件中添加 Prettier 相关配置：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'  // 集成 Prettier
  ],
  plugins: [
    'prettier'
  ],
  rules: {
    'prettier/prettier': 'error'
  }
};

6.3 工作原理

• eslint-config-prettier：禁用与 Prettier 冲突的 ESLint 规则
• eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行

这样，ESLint 会检查代码质量，同时也会检查代码格式（通过 Prettier）。

6.4 运行 ESLint

# 运行 ESLint
npm run lint

# 运行 ESLint 并自动修复
npm run lint:fix

7. CI/CD 集成

7.1 GitHub Actions 集成

在 .github/workflows/prettier.yml 文件中添加：

name: Prettier Check

on: [push, pull_request]

jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Run Prettier check
        run: npm run format:check

7.2 GitLab CI/CD 集成

在 .gitlab-ci.yml 文件中添加：

format:
  stage: test
  script:
    - npm install
    - npm run format:check
  only:
    - branches

7.3 Jenkins 集成

在 Jenkinsfile 中添加：

stage('Format') {
  steps {
    sh 'npm install'
    sh 'npm run format:check'
  }
}

8. 最佳实践

8.1 项目配置最佳实践

1. 使用本地安装：在项目中本地安装 Prettier，确保版本一致性
2. 创建配置文件：根据项目需求创建合适的配置文件
3. 创建忽略文件：合理配置 .prettierignore 文件
4. 集成 ESLint：与 ESLint 配合使用，Prettier 处理代码风格，ESLint 处理代码质量
5. 添加脚本：在 package.json 中添加格式化脚本

8.2 团队协作最佳实践

1. 统一配置：团队使用相同的 Prettier 配置
2. 编辑器集成：团队成员都在编辑器中启用 Prettier 自动格式化
3. CI/CD 集成：在 CI/CD 流程中添加 Prettier 检查
4. 代码审查：将 Prettier 检查结果作为代码审查的一部分
5. 提交前钩子：使用 husky 和 lint-staged 在提交前自动格式化代码

8.3 提交前钩子配置

1. 安装依赖：

npm install --save-dev husky lint-staged

2. 配置 package.json：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

这样，在每次提交前，Prettier 会自动格式化修改的文件，然后将格式化后的文件添加到提交中。

8.4 性能优化

1. 合理配置忽略文件：避免格式化不必要的文件
2. 使用 lint-staged：只格式化修改的文件
3. 增量检查：在 CI/CD 中只检查修改的文件
4. 缓存：对于大型项目，使用 Prettier 缓存

9. 常见问题与解决方案

9.1 Prettier 不格式化某些文件

问题：Prettier 没有格式化预期的文件

解决方案：

• 检查 .prettierignore 文件，确保没有忽略这些文件
• 检查命令行参数，确保包含了这些文件
• 检查文件扩展名，确保 Prettier 支持该类型的文件

9.2 与 ESLint 冲突

问题：ESLint 规则与 Prettier 格式化结果冲突

解决方案：

• 安装并配置 eslint-config-prettier 和 eslint-plugin-prettier
• 确保 ESLint 配置中包含 plugin:prettier/recommended
• 检查 ESLint 规则，确保没有与 Prettier 冲突的规则

9.3 编辑器集成问题

问题：编辑器中的 Prettier 不工作

解决方案：

• 确保安装了正确的编辑器扩展
• 确保配置了正确的 Prettier 路径
• 确保文件类型被正确识别
• 重启编辑器

9.4 性能问题

问题：Prettier 格式化速度慢

解决方案：

• 合理配置 .prettierignore 文件
• 使用 lint-staged 只格式化修改的文件
• 对于大型项目，考虑使用 Prettier 缓存
• 避免在同一文件上同时使用多个格式化工具

9.5 配置覆盖问题

问题：Prettier 配置没有生效

解决方案：

• 检查配置文件路径是否正确
• 检查配置文件格式是否正确
• 检查是否有多个配置文件，Prettier 可能使用了其他配置文件
• 使用 --config 选项指定配置文件

10. 总结

Prettier 是一个强大的代码格式化工具，可以帮助开发者保持代码风格的一致性，减少团队成员之间的代码风格争议。通过本教程的学习，你应该已经掌握了：

• Prettier 的核心概念和基本使用方法
• 如何安装和配置 Prettier
• 如何使用 Prettier 格式化代码
• Prettier 的配置选项
• 如何集成 Prettier 与编辑器和 CI/CD 系统
• 如何与 ESLint 配合使用
• Prettier 的最佳实践和常见问题解决方案

Prettier 是前端开发工具链中的重要组成部分，合理使用 Prettier 可以显著提高代码质量和开发效率。建议在所有项目中都使用 Prettier，并根据项目需求进行适当的配置。

11. 扩展阅读

• Prettier 官方文档
• Prettier 配置选项
• Prettier 与 ESLint 集成
• Prettier 编辑器集成
• Prettier 与 Git 钩子集成
• ESLint 官方文档
• husky 官方文档
• lint-staged 官方文档