digi-prettier-config

Digi 团队的共享 Prettier 配置包，提供统一的代码格式化规范。

特性

• 🎯 统一的代码风格配置
• 📝 完整的 EditorConfig 支持
• 🔧 Git Hooks 集成
• 🚀 一键设置脚本
• 💻 VSCode 完美集成

安装

自动安装（推荐）

npm install --save-dev digi-prettier-config
npx digi-prettier-config setup

手动安装

# 安装配置包
npm install --save-dev digi-prettier-config

# Node.js 16+ 项目（推荐）
npm install --save-dev prettier@^3.4.2

# Node.js 12-14 项目
npm install --save-dev prettier@^2.8.8

Node.js 版本兼容性

| Node.js 版本 | Prettier 版本 | 配置文件 | 状态 | |-------------|--------------|---------|------| | 12.x | ^2.8.8 | legacy | ✅ 支持 | | 14.x | ^2.8.8 | legacy | ✅ 支持 | | 16.x | ^3.4.2 | index | ✅ 推荐 | | 18.x | ^3.4.2 | index | ✅ 推荐 | | 20.x | ^3.4.2 | index | ✅ 推荐 |

📋 详细的版本兼容性信息请查看 NODE_COMPATIBILITY.md

使用方法

方法一：package.json 配置（推荐）

在你的 package.json 中添加：

{
  "prettier": "digi-prettier-config"
}

方法二：.prettierrc.js 文件

创建 .prettierrc.js 文件：

// Node.js 16+ 项目
module.exports = require('digi-prettier-config');

// Node.js 12-14 项目
module.exports = require('digi-prettier-config/legacy');

方法三：扩展配置

如果需要自定义某些规则：

// .prettierrc.js
const baseConfig = require('digi-prettier-config');

module.exports = {
  ...baseConfig,
  // 自定义配置
  printWidth: 120,
  singleQuote: false
};

自动检测版本配置

setup 脚本会自动检测你的 Node.js 版本并配置合适的 Prettier 版本：

npx digi-prettier-config setup

这会：

• 检测 Node.js 版本
• 安装合适的 Prettier 版本
• 配置 package.json
• 设置 VSCode 配置
• 复制必要的配置文件

一键设置

安装包后，运行自动设置脚本：

npx digi-prettier-config setup

这个脚本会自动：

• 复制 .prettierignore、.editorconfig、.lintstagedrc.json 文件
• 更新 package.json 添加格式化脚本
• 创建 VSCode 设置文件

配置详情

Prettier 规则

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto",
  "singleAttributePerLine": false,
  "vueIndentScriptAndStyle": false,
  "htmlWhitespaceSensitivity": "css"
}

支持的文件类型

• JavaScript (.js, .jsx)
• TypeScript (.ts, .tsx)
• Vue (.vue)
• JSON (.json)
• HTML (.html)
• CSS/SCSS/Less (.css, .scss, .less)
• Markdown (.md)
• YAML (.yml, .yaml)

脚本命令

安装后，你的 package.json 会自动添加以下脚本：

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

使用示例

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

# 自动格式化代码
npm run format

# 格式化特定文件
npx prettier --write src/**/*.{js,ts,vue}

Git Hooks 集成

配置包包含 lint-staged 配置，可以与 husky 结合使用：

# 安装 husky 和 lint-staged
npm install --save-dev husky lint-staged

# 初始化 husky
npx husky install

# 添加 pre-commit hook
npx husky add .husky/pre-commit "npx lint-staged"

VSCode 集成

自动设置脚本会创建 .vscode/settings.json，包含：

• 保存时自动格式化
• 设置 Prettier 为默认格式化工具
• 统一的编辑器设置

推荐的 VSCode 扩展

• Prettier - Code formatter
• EditorConfig for VS Code

项目结构

your-project/
├── .prettierrc.js          # Prettier 配置（或在 package.json 中配置）
├── .prettierignore         # 忽略文件
├── .editorconfig          # 编辑器配置
├── .lintstagedrc.json     # Git hooks 配置
├── .vscode/
│   └── settings.json      # VSCode 设置
└── package.json

团队协作

新成员加入

1. 克隆项目后运行：

   npm install
   npm run format:check

2. 安装推荐的 VSCode 扩展

3. 确保编辑器设置正确

代码提交流程

1. 开发完成后运行格式化检查：

   npm run format:check

2. 如果有格式问题，自动修复：

   npm run format

3. 提交代码（如果配置了 Git hooks，会自动格式化）

常见问题

Q: 如何忽略特定文件？

A: 在 .prettierignore 文件中添加文件路径或模式。

Q: 如何禁用某个文件的格式化？

A: 在文件顶部添加注释：

// prettier-ignore-file

Q: 如何禁用特定代码块的格式化？

A: 使用注释包围：

// prettier-ignore
const uglyCode = {
    a:1,b:2,c:3
};

Q: 与 ESLint 冲突怎么办？

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

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

然后在 ESLint 配置中添加：

{
  "extends": ["prettier"]
}

更新日志

1.0.0

• 初始版本
• 基础 Prettier 配置
• EditorConfig 支持
• Git Hooks 集成
• VSCode 集成
• 自动设置脚本

相关链接

• Prettier 官方文档
• EditorConfig 官方文档
• lint-staged 文档