Prettier 与 Vue 项目集成指南

Prettier 可以帮助 Vue 项目保持统一的代码风格，提升开发体验和代码质量。以下是具体的配置步骤、使用方法和推荐配置：

一、安装 Prettier

在 Vue 项目中安装 Prettier 及其 Vue 插件：

npm install prettier prettier-plugin-vue --save-dev

二、配置 Prettier

在项目根目录创建 .prettierrc.json 文件：

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

创建 .prettierignore 文件忽略不需要格式化的文件：

node_modules/
dist/
coverage/
*.lock

三、与 ESLint 配合（避免冲突）

安装 eslint-config-prettier 禁用 ESLint 中与 Prettier 冲突的规则：

npm install eslint-config-prettier --save-dev

在 .eslintrc.js 中添加：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'prettier' // 确保 'prettier' 在最后，以覆盖冲突规则
  ],
  rules: {
    // 其他 ESLint 规则...
  }
}

四、编辑器集成（VSCode/Webstrom）

配置 VSCode

• 1、安装 Prettier - Code formatter 插件

• 2、在 .vscode/settings.json 中添加：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.configPath": "${workspaceFolder}/.prettierrc.json"
}

配置 Webstrom

1、启用 Prettier

• 打开 File > Settings > Languages & Frameworks > JavaScript > Prettier
• 选择 Prettier package 路径（通常是项目的 node_modules/prettier）
• 勾选 Run on save for files，并设置文件匹配模式（如 *.{js,ts,vue,json,md}）

2、格式化快捷键

• 使用 Ctrl + Alt + L（Windows/Linux）或 Cmd + Opt + L（Mac）触发 Prettier 格式化

五、命令行工具

在 package.json 中添加脚本：

{
  "scripts": {
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

手动执行格式化：

npm run format  # 格式化 src 目录下的所有文件
npm run format:check  # 检查格式是否符合规范

六、Vue 特定配置

针对 Vue 文件的推荐配置：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "vueIndentScriptAndStyle": true, // Vue 组件中 <script> 和 <style> 单独缩进
  "singleAttributePerLine": false, // 不强制每个属性单独一行
  "jsxSingleQuote": true, // JSX 中使用单引号
  "htmlWhitespaceSensitivity": "css" // HTML 空白敏感度遵循 CSS 规则
}

七、Git 提交前自动格式化

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

npm install husky lint-staged --save-dev

在 package.json 中添加：

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue,json,css,scss,md}": [
      "prettier --write"
    ]
  }
}

初始化 husky：

npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

八、注意事项

1、Vue SFC 格式化

• Prettier 会格式化 <template>、<script> 和 <style> 标签内的代码
• 使用 忽略特定区域：

<template>
  <!-- prettier-ignore -->
  <div class="custom-format">保持原有格式</div>
</template>

2、冲突解决

• 如果 ESLint 和 Prettier 规则冲突，优先调整 ESLint 规则（通过 eslint-config-prettier）

3、插件版本兼容

• 确保 prettier-plugin-vue 与项目中的 Prettier 版本兼容

九、推荐配置总结

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "vueIndentScriptAndStyle": true,
  "singleAttributePerLine": false,
  "jsxSingleQuote": true,
  "htmlWhitespaceSensitivity": "css",
  "overrides": [
    {
      "files": "*.vue",
      "options": {
        "parser": "vue"
      }
    }
  ]
}

通过以上配置，你可以在 Vue 项目中高效使用 Prettier 格式化代码，保持统一的代码风格，提升团队协作效率。