syl-prettier-config

🚀 上海有来团队共享 Prettier 配置包，旨在为现代前端项目提供开箱即用、统一且极致的代码格式化规范。

✨ 特性

• 🎯 统一规范 - 深度集成上海有来团队工程化最佳实践
• 📝 全方位支持 - 预置 EditorConfig，确保跨编辑器缩进一致
• 🔧 工程化集成 - 完美适配 Git Hooks (Husky + lint-staged)
• 🚀 零配置启动 - 提供智能交互式设置脚本，自动化完成所有配置
• 💻 编辑器适配 - 针对 VSCode 与 Antigravity 提供深度的原生级别集成支持

⚡ 快速开始

仅需两步，即可在您的项目中启用专业级的代码格式规范：

# 1. 安装配置包
npm install --save-dev syl-prettier-config

# 2. 运行自动化设置脚本
npx syl-prettier-config setup

[!TIP] setup 脚本会智能检测您的环境（Node.js 版本、已安装的编辑器），并自动完成所有繁琐的配置文件同步与 package.json 更新。

🛠️ 安装详情

自动安装（推荐）

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

手动安装

如果您希望完全控制安装过程：

# 安装基础配置
npm install --save-dev syl-prettier-config

# 根据项目环境安装对应的 Prettier 版本
# Node.js 16+ (推荐)
npm install --save-dev prettier@^3.4.2

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

📈 版本兼容性

我们为不同的运行环境提供了差异化的内核支持：

| 环境 | Prettier 内核 | 配置文件 | 兼容性建议 | | :--- | :--- | :--- | :--- | | Node.js 16+ | ^3.4.2 | index | 🌟 推荐 |

📖 关于各版本配置细节的差异，请阅读 NODE_COMPATIBILITY.md

📖 使用指南

方式一：package.json (最佳实践)

在 package.json 中添加一行配置即可：

{
  "prettier": "syl-prettier-config"
}

方式二：.prettierrc.js

创建配置文件以支持更灵活的逻辑：

// Node.js 16+ 环境
module.exports = require("syl-prettier-config");

// Node.js 12-14 环境
module.exports = require("syl-prettier-config/legacy");

方式三：扩展与自定义

如果您需要覆盖团队默认规则，可以使用扩展模式：

// .prettierrc.js
const baseConfig = require("syl-prettier-config");

module.exports = {
  ...baseConfig,
  printWidth: 120, // 覆盖默认 100
  singleQuote: false // 使用双引号
};

⚙️ 自动化能力

运行 npx syl-prettier-config setup 后，脚本将为您完成以下工作：

1. 智能同步：自动复制 .prettierignore, .editorconfig, .lintstagedrc.json
2. 基建配置：更新 package.json 的 scripts 区域
3. 编辑器适配：根据当前使用的编辑器（VSCode / Antigravity）自动写入对应设置
4. 环境治理：自动识别 Node.js 版本并推荐最匹配的 Prettier 内核

配置详情

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，确保您的开发环境获得最佳体验：

• 保存自动格式化 (Format on Save)
• Prettier 默认格式化器集成
• EditorConfig 深度支持

[!IMPORTANT] 推荐安装扩展：Prettier - Code formatter

🤖 Antigravity 深度原生集成

我们为 Antigravity 编辑器提供了首个原生级别的 Prettier 配置支持。

核心优势

• 自动注册：无需手动安装插件，配置文件写入即生效
• 智能命令：内置快捷 Workflow 指令

Workflow 指令集

| 指令 | 描述 | | :--- | :--- | | /format | 格式化全栈 - 扫描并修复项目中所有不规范的代码 | | /format-check | 合规检查 - 检测项目中存在的格式争议（不修改文件） | | /format-file | 针对性修复 - 仅处理当前处于活跃焦点的文件 |

推荐 Skills 支持

集成后将自动启用 frontend-design 与 webapp-testing 增强插件。

项目结构

your-project/
├── .prettierrc.js          # Prettier 配置（或在 package.json 中配置）
├── .prettierignore         # 忽略文件
├── .editorconfig          # 编辑器配置
├── .lintstagedrc.json     # Git hooks 配置
├── .vscode/
│   └── settings.json      # VSCode 设置
├── .gemini/
│   └── settings.json      # Antigravity 编辑器设置
├── .agent/
│   └── workflows/
│       ├── format.md          # 格式化项目代码
│       ├── format-check.md    # 检查代码格式
│       └── format-file.md     # 格式化单个文件
└── 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.1.0

• 新增 Antigravity 编辑器集成支持
• 自动生成 .gemini/settings.json 配置文件
• 新增 Workflow 命令（/format、/format-check、/format-file）
• 自动检测编辑器类型（VSCode / Antigravity）
• 更新 .prettierignore 支持 .gemini/ 和 .agent/ 目录

1.0.0

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

相关链接

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