共享配置

当管理多个项目时，创建共享配置可避免重复配置。本文详解如何创建、发布和使用Prettier共享配置包。

创建共享配置包

共享配置本质是导出Prettier配置的npm包，需包含两个核心文件：

prettier-config/
├── index.js      # 配置主体
└── package.json  # 包定义

package.json示例

{
  "name": "@yourname/prettier-config",
  "version": "1.0.0",
  "description": "团队统一Prettier配置",
  "type": "module",  // 启用ES模块
  "exports": "./index.js",
  "license": "MIT",
  "publishConfig": {
    "access": "public"  // 公开作用域包
  },
  "peerDependencies": {
    "prettier": ">=3.0.0"  // 声明兼容版本
  }
}

index.js配置主体

/** @type {import("prettier").Config} */
const config = {
  trailingComma: "all",    // 尾随逗号
  tabWidth: 2,             // 缩进2空格
  semi: false,             // 无分号
  singleQuote: true,       // 单引号
  printWidth: 100,         // 行宽100
};

export default config;

参考实现：https://github.com/azz/prettier-config

发布配置包

npm publish  # 需先登录npm(npm login)

使用共享配置

  1. 安装配置包：
npm install --save-dev @yourname/prettier-config
  1. 在项目配置中引用：

package.json方式：

{
  "name": "project-alpha",
  "prettier": "@yourname/prettier-config"
}

.prettierrc方式：

"@yourname/prettier-config"

扩展共享配置

创建.prettierrc.mjs覆盖特定配置：

import baseConfig from "@yourname/prettier-config";

/** @type {import("prettier").Config} */
export default {
  ...baseConfig,
  semi: true  // 覆盖分号配置
};

高级配置技巧

类型注解支持

通过JSDoc获取配置提示：

/**
 * @type {import("prettier").Config}
 */
const config = { 
  /* 配置项 */ 
};

export default config;

需安装Prettier开发依赖：

npm install --save-dev prettier

包含插件

// index.js
export default {
  plugins: ["prettier-plugin-organize-imports"],
  // 其他配置...
}
// package.json
{
  "dependencies": {
    "prettier-plugin-organize-imports": "^3.0.0"
  }
}

参考实现：https://github.com/kachkaev/routine-npm-packages/tree/main/packages/prettier-config

插件依赖策略

依赖类型适用场景示例
dependencies强绑定特定插件版本团队内部统一工具链
peerDependencies用户自行管理插件版本公开共享配置

深入了解：https://nodejs.org/en/blog/npm/peer-dependencies

最后更新: