Prettier配置踩坑记那些年我遇到的格式化难题

项目初期的技术选型

最近接手了一个老项目，团队里新来了几个实习生，代码风格五花八门。有些喜欢分号，有些讨厌分号；有些人缩进用2个空格，有些人用4个空格；还有人居然混用了空格和Tab。每次Code Review都得手动调整格式，简直要命。

之前也没怎么认真搞过Prettier，就是简单的安装一下配个默认配置就完事了。这次想着干脆好好搞一套完整的配置，省得后面越来越乱。开始没想到这玩意儿还挺有讲究的，踩了不少坑。

基础配置就这么点东西

基础配置其实很简单，就是那些常用的选项：

module.exports = {
  // 换行长度
  printWidth: 80,
  // 缩进用2个空格
  tabWidth: 2,
  // 不用tab
  useTabs: false,
  // 行末分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象属性的引号规则
  quoteProps: 'as-needed',
  // jsx双引号
  jsxSingleQuote: false,
  // 尾随逗号
  trailingComma: 'es5',
  // 大括号前的空格
  bracketSpacing: true,
  // jsx标签右边的空格
  jsxBracketSameLine: false,
  // 箭头函数参数括号
  arrowParens: 'avoid',
  // 行尾换行
  endOfLine: 'lf'
};

这些配置基本能满足大部分需求，但是实际项目中还是会遇到一些特殊情况。比如Vue文件里的template部分，有时候格式化结果不太理想。开始没想到这个问题，后面才发现需要额外配置。

最大的坑：和ESLint的冲突

项目里本来就有ESLint，接入Prettier的时候遇到了第一个大坑。两个工具在某些规则上冲突了，比如分号的问题。ESLint强制不加分号，Prettier默认加，结果格式化一次，ESLint报错一次，来回打架。

开始折腾了好久，各种查资料试方案。最后用了eslint-config-prettier这个包来解决冲突：

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

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended', 
    'prettier' // 这个要在最后
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

这里要注意顺序，prettier这个extends一定要放在最后，不然会被其他规则覆盖掉。这个我踩了好几次坑才明白。

Vue和TypeScript的特殊处理

项目是Vue + TypeScript的，配置的时候发现有些特殊的语法支持不好。比如Vue的template里的一些特殊标签，还有TS的一些高级类型写法。

后来加了这两个插件解决问题：

{
  "devDependencies": {
    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
    "@vue/compiler-sfc": "^3.2.0"
  }
}

配置文件也相应调整：

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  arrowParens: 'avoid',
  endOfLine: 'lf',
  // Vue文件的特殊处理
  vueIndentScriptAndStyle: true,
  // import排序
  importOrder: [
    '^@/(.*)$',
    '^[./]'
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true
};

这个importOrder的功能挺不错的，能把导入的模块按规则排序，避免每次手动调整。不过刚开始配置的时候有点复杂，得把规则写清楚，不然容易出错。

团队协作的配置问题

配置好本地之后，还要考虑团队协作的问题。有些同事用VSCode，有些用WebStorm，编辑器设置可能不一样。我测试了几种方案，最后选择了pre-commit钩子的方式。

安装husky和lint-staged：

npm install --save-dev husky lint-staged

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

这样每次提交代码都会自动格式化，保证入库的代码都是统一格式的。但是这里有个小问题，就是格式化的速度有时候比较慢，特别是文件比较多的时候。不过还好，大多数时候都能接受。

CI/CD集成也要注意

项目用的是GitLab CI，还得在流水线里加上格式检查。这个比较简单，在package.json里加个script就行：

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

CICD的配置文件里加上检查命令，如果格式不对就失败。这样能确保所有提交的代码都符合规范。

一些意外的小问题

用了几个月后发现一些小问题。比如某些特殊的JSON文件格式化后会出错，还有一些配置文件被格式化后反而不好读。后来在.prettierignore文件里把这些特殊文件排除掉了：

*.min.js
config/**
dist/**
node_modules/**
*.min.css

还有个问题是，有时候手动改了格式之后，IDE的格式化快捷键会把改动撤销掉。这个主要是编辑器配置的问题，不同IDE的prettier插件行为不太一样。现在大家都统一在settings.json里配置了相同的格式化规则，问题基本解决了。

回顾与反思

总体来说这套配置还是挺有用的，至少代码风格统一了，Code Review的压力小了很多。但是过程中确实踩了不少坑，特别是ESLint和Prettier的冲突问题，花了很长时间才解决好。

现在回头看，有几个地方还可以优化。比如format检查的速度还可以再快一点，某些特殊语法的支持还需要完善。不过目前的配置基本够用，暂时先这么用着吧。

另外想说的就是，配置这东西没有完美的，适合自己项目的就好。有时候为了追求完美反而耽误了开发效率，那就得不偿失了。这次的经验告诉我，先把基础配置搭好，遇到具体问题再针对性解决，这样更实用。

以上是我踩坑后的总结，希望对你有帮助。如果有更好的配置方案或者遇到类似问题，欢迎交流。