@huaiyou/config-prettier

@huaiyou/config-prettier

共享的 Prettier 配置，确保代码格式的一致性。

📦 安装

pnpm add -D @huaiyou/config-prettier prettier

🚀 使用方法

在 package.json 中使用

{
  "prettier": "@huaiyou/config-prettier"
}

在 .prettierrc.js 中使用

module.exports = require('@huaiyou/config-prettier');

使用 ES Module

import config from '@huaiyou/config-prettier';

export default config;

⚙️ 配置说明

选项	值	说明
semi	true	语句末尾添加分号
trailingComma	'es5'	尾随逗号（ES5 兼容）
singleQuote	true	使用单引号
printWidth	100	每行最大字符数
tabWidth	2	缩进空格数
useTabs	false	使用空格缩进
endOfLine	'lf'	行尾符（LF）
arrowParens	'always'	箭头函数参数始终加括号
bracketSpacing	true	对象字面量括号内加空格
jsxSingleQuote	false	JSX 使用双引号

📝 Scripts 配置

在 package.json 中添加格式化脚本：

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

🔧 自定义配置

扩展配置

import baseConfig from '@huaiyou/config-prettier';

export default {
  ...baseConfig,
  printWidth: 120, // 覆盖特定选项
};

忽略文件

创建 .prettierignore 文件：

# Dependencies
node_modules
pnpm-lock.yaml

# Build output
dist
build
.next
out

# Environment
.env
.env.local

🎨 编辑器集成

VSCode

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

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

WebStorm / IntelliJ IDEA

• 打开 Settings → Languages & Frameworks → JavaScript → Prettier
• 选择 Prettier package: node_modules/prettier
• 勾选 "On save" 和 "On code reformat"

🤝 与 ESLint 配合使用

本配置已经与 @huaiyou/config-eslint 完全兼容，不会产生规则冲突。

ESLint 负责代码质量检查，Prettier 负责代码格式化。

📄 License

MIT