Vue 3 与 Prettier 深度集成

概述

Prettier 是一个强大的代码格式化工具，可以自动处理代码格式，确保团队成员之间的代码风格一致。在 Vue 3 项目中，Prettier 可以与 ESLint 配合使用，提供全面的代码质量保障。本集将深入探讨 Vue 3 与 Prettier 的深度集成，包括配置优化、编辑器集成、CI/CD 集成等。

核心知识点

1. Prettier 基础回顾

Prettier 是一个 "有态度" 的代码格式化工具，它的特点包括：

• 支持多种语言（JavaScript、TypeScript、Vue、HTML、CSS、Markdown 等）
• 零配置或极少配置
• 自动格式化代码，无需手动调整
• 统一团队代码风格
• 与主流编辑器和构建工具集成

2. Vue 3 项目中的 Prettier 配置

安装依赖

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

基础配置文件

创建 .prettierrc.js 文件：

module.exports = {
  // 代码宽度，默认 80
  printWidth: 80,
  // 缩进宽度，默认 2
  tabWidth: 2,
  // 是否使用制表符，默认 false
  useTabs: false,
  // 语句末尾是否加分号，默认 true
  semi: false,
  // 是否使用单引号，默认 false
  singleQuote: true,
  // 对象属性是否加引号，默认 "as-needed"
  quoteProps: "as-needed",
  // JSX 中是否使用单引号，默认 false
  jsxSingleQuote: false,
  // 尾随逗号，默认 "es5"（仅在 ES5 兼容的地方使用）
  trailingComma: "es5",
  // 对象括号之间是否加空格，默认 true
  bracketSpacing: true,
  // JSX 标签闭合位置，默认 "line-aligned"
  bracketSameLine: false,
  // 箭头函数参数是否加括号，默认 "always"
  arrowParens: "always",
  // 范围格式化，默认 "auto"
  rangeStart: 0,
  rangeEnd: Infinity,
  // 是否格式化嵌入代码，默认 true
  embeddedLanguageFormatting: "auto",
  // HTML 自闭合标签末尾是否加斜杠，默认 false
  htmlWhitespaceSensitivity: "css",
  // Vue 文件脚本和样式标签的缩进，默认 false
  vueIndentScriptAndStyle: false,
  // 换行符类型，默认 "lf"
  endOfLine: "auto"
}

忽略文件配置

创建 .prettierignore 文件：

# 依赖目录
node_modules/
# 构建输出
dist/
build/
# 环境配置文件
.env
.env.local
.env.*.local
# 日志文件
*.log
# 类型声明文件
*.d.ts
# 打包配置文件
*.min.js
# 其他
*.json
*.md

3. Prettier 与 ESLint 集成

Prettier 与 ESLint 可以完美配合，ESLint 负责代码质量，Prettier 负责代码格式。

配置 ESLint 集成

在 .eslintrc.js 中配置：

module.exports = {
  // ...
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier', // 确保 prettier 在最后，覆盖 ESLint 冲突规则
    'plugin:prettier/recommended' // 启用 prettier 插件
  ],
  plugins: [
    'vue',
    'prettier'
  ],
  rules: {
    'prettier/prettier': 'error' // 将 Prettier 错误作为 ESLint 错误
  }
  // ...
}

命令行配置

在 package.json 中添加脚本：

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "lint": "eslint . --ext .js,.ts,.vue",
    "lint:fix": "eslint . --ext .js,.ts,.vue --fix"
  }
}

4. Prettier 与编辑器集成

VS Code 集成

安装 Prettier 扩展，并在 settings.json 中配置：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.configPath": ".prettierrc.js",
  "prettier.ignorePath": ".prettierignore"
}

WebStorm 集成

WebStorm 内置了 Prettier 支持，在设置中启用：

1. 打开 Settings > Languages & Frameworks > JavaScript > Prettier
2. 勾选 Enable Prettier
3. 选择 Prettier 包路径
4. 勾选 On save 和 On reformat code action
5. 配置 .prettierrc.js 路径

Vim/Neovim 集成

使用插件 prettier/vim-prettier 或 sbdchd/neoformat：

" vim-prettier 配置
let g:prettier#autoformat = 1
let g:prettier#autoformat_require_pragma = 0
let g:prettier#config_file = '.prettierrc.js'
let g:prettier#ignore_file = '.prettierignore'

" neoformat 配置
let g:neoformat_enabled_vue = ['prettier']
let g:neoformat_enabled_javascript = ['prettier']
let g:neoformat_enabled_typescript = ['prettier']
autocmd BufWritePre * Neoformat

5. Prettier 的高级配置

针对不同语言的配置

可以为不同语言设置不同的配置：

module.exports = {
  // 全局配置
  printWidth: 80,
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  trailingComma: "es5",
  
  // 针对特定语言的配置
  overrides: [
    {
      files: ["*.json", "*.md"],
      options: {
        printWidth: 120
      }
    },
    {
      files: ["*.html", "*.vue"],
      options: {
        htmlWhitespaceSensitivity: "strict"
      }
    },
    {
      files: "*.ts",
      options: {
        trailingComma: "all"
      }
    }
  ]
}

使用配置文件优先级

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

1. package.json 中的 prettier 字段
2. .prettierrc（JSON 或 YAML）
3. .prettierrc.json
4. .prettierrc.yaml、.prettierrc.yml
5. .prettierrc.js、.prettierrc.cjs
6. .prettier.config.js、.prettier.config.cjs

配置文件继承

可以使用 @company/prettier-config 等共享配置：

// .prettierrc.js
module.exports = {
  ...require("@company/prettier-config"),
  // 覆盖共享配置
  semi: false,
  singleQuote: true
}

6. Prettier 与 CI/CD 集成

在 CI/CD 流程中使用 Prettier 确保代码格式一致：

GitHub Actions 配置

# .github/workflows/format.yml
name: Code Format Check

on: [push, pull_request]

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Check code format
        run: npm run format:check

GitLab CI 配置

# .gitlab-ci.yml
format-check:
  stage: test
  image: node:16
  script:
    - npm install
    - npm run format:check
  only:
    - merge_requests
    - main

7. Prettier 插件系统

Prettier 支持插件扩展，可以为更多语言或特定需求提供格式化支持。

常用插件

• prettier-plugin-tailwindcss - Tailwind CSS 类排序
• prettier-plugin-vue - Vue 特定格式化（已内置）
• prettier-plugin-pkg - package.json 格式化
• prettier-plugin-svelte - Svelte 格式化
• prettier-plugin-solidity - Solidity 格式化

安装和配置插件

以 Tailwind CSS 插件为例：

npm install -D prettier-plugin-tailwindcss

配置插件：

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  // ...其他配置
}

自定义插件

创建自定义 Prettier 插件：

// prettier-plugin-custom.js
module.exports = {
  // 插件名称
  name: "prettier-plugin-custom",
  // 支持的语言
  parsers: {
    "custom-language": {
      parse: (text) => {
        // 解析逻辑
        return { /* AST */ };
      },
      astFormat: "custom-ast"
    }
  },
  // 格式化器
  printers: {
    "custom-ast": {
      print: (path, options, print) => {
        // 格式化逻辑
        return ["/* 格式化后的代码 */"];
      }
    }
  },
  // 选项
  options: {
    customOption: {
      type: "boolean",
      default: true,
      category: "custom",
description: "自定义选项"
    }
  }
}

8. Prettier 与 Git 钩子集成

使用 Husky 和 lint-staged 在提交代码前自动格式化：

npm install -D husky lint-staged

配置 package.json：

{
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{html,css,scss}": [
      "prettier --write"
    ]
  }
}

设置 Husky 钩子：

npx husky init

在 .husky/pre-commit 文件中添加：

npx lint-staged

最佳实践

1. 团队协作

• 统一团队的 Prettier 配置
• 将配置文件提交到版本控制
• 使用共享的配置包
• 定期更新配置以适应新的语法和最佳实践

2. 合理配置

• 根据项目需求调整配置
• 避免过度个性化配置
• 考虑项目的历史背景和现有代码风格
• 渐进式应用新的配置

3. 性能优化

• 合理配置 .prettierignore
• 仅格式化需要的文件
• 使用 --cache 选项提高格式化速度
• 避免在大型文件上使用 Prettier

4. 与其他工具配合

• 与 ESLint 配合使用，各司其职
• 与编辑器集成，提高开发效率
• 与 CI/CD 集成，确保代码质量
• 与 Git 钩子集成，防止不合格代码提交

5. 教育和培训

• 向团队成员介绍 Prettier 的优势
• 提供配置和使用指南
• 鼓励团队成员使用 Prettier
• 定期审查和讨论代码风格

常见问题与解决方案

1. Prettier 与 ESLint 规则冲突

问题：Prettier 格式化后的代码与 ESLint 规则冲突。

解决方案：

• 使用 eslint-config-prettier 禁用冲突规则
• 确保 prettier 扩展在 ESLint 配置的最后
• 调整 ESLint 规则以适应 Prettier
• 使用 eslint-plugin-prettier 将 Prettier 错误作为 ESLint 错误

2. Prettier 格式化速度慢

问题：项目较大时，Prettier 格式化速度慢。

解决方案：

• 合理配置 .prettierignore
• 使用 --cache 选项
• 仅格式化修改的文件
• 升级 Prettier 版本
• 考虑使用增量格式化工具

3. 某些文件不需要格式化

问题：某些自动生成的文件或配置文件不需要 Prettier 格式化。

解决方案：

• 将这些文件添加到 .prettierignore
• 使用 // prettier-ignore 注释忽略单行
• 使用 /* prettier-ignore */ 注释忽略代码块

4. Vue 文件格式化问题

问题：Vue 文件的脚本和样式标签格式化不符合预期。

解决方案：

• 调整 vueIndentScriptAndStyle 选项
• 配置 htmlWhitespaceSensitivity 选项
• 使用 --vue-indent-script-and-style 命令行选项

5. 自定义插件不生效

问题：安装的 Prettier 插件不生效。

解决方案：

• 确保插件已正确安装
• 在配置文件中明确指定插件
• 检查插件的兼容性
• 尝试重新安装依赖

进阶学习资源

1. 官方文档：

   • Prettier 官方文档
   • Prettier 配置选项
   • Prettier 插件开发指南

2. 教程和博客：

   • Prettier 入门指南
   • Prettier 与 ESLint 集成最佳实践
   • Vue 3 项目中的 Prettier 配置

3. 配置示例：

   • Prettier 配置示例集合
   • Vue 3 + TypeScript + Prettier 配置

4. 视频教程：

   • Prettier 从入门到精通
   • Vue 3 代码格式化最佳实践

5. 工具和插件：

   • Prettier Playground
   • Prettier VS Code 扩展
   • Prettier 社区插件列表

实践练习

练习1：配置 Vue 3 项目的 Prettier

要求：

• 创建一个 Vue 3 项目
• 配置 Prettier，包括：
  • 基础配置
  • 忽略文件
  • 与 ESLint 集成
  • 命令行脚本
• 运行 prettier --write . 格式化代码

练习2：创建共享的 Prettier 配置包

要求：

• 创建一个 npm 包，包含共享的 Prettier 配置
• 支持 Vue 3、TypeScript、Tailwind CSS
• 在多个项目中使用该配置包
• 测试配置是否生效

练习3：与 CI/CD 集成

要求：

• 在 CI/CD 流程中配置 Prettier
• 设置格式化检查
• 生成报告
• 配置邮件通知

练习4：使用 Git 钩子

要求：

• 配置 Husky 和 lint-staged
• 在提交代码前自动格式化
• 测试钩子是否生效
• 尝试提交不符合格式的代码

练习5：开发自定义 Prettier 插件

要求：

• 创建一个简单的 Prettier 插件
• 支持自定义语言的格式化
• 在项目中使用该插件
• 测试插件功能

总结

Prettier 是 Vue 3 项目中不可或缺的代码格式化工具，它可以帮助团队保持一致的代码风格，提高代码可读性和可维护性。通过本集的学习，你应该掌握了 Vue 3 与 Prettier 的深度集成技巧，包括配置优化、编辑器集成、CI/CD 集成、插件系统等。

在下一集中，我们将探讨 Vue 3 与 TypeScript 的高级应用，敬请期待！